3d813d3e0d8086cfdc14b35891e9204c

This code works perfectly in firefox but when i open it in IE it breaks. Even the text does not disappear which is using javascript!

Please help!

<%- @title = "Write entry" -%>

<div id="entries_write" class="content edit">

<h2><img src="/blog/images/writersicon.png" alt="An image of a clipboard">  Write new entry</h2>

<%= form_tag({:action => "save"} ,{:id =>"live-entry-form"}, {:method => "post", :multipart => true}) %>
<h8><a href="#" id="reveal" onclick="Element.show('entry_basic'); Element.hide('reveal');new Effect.Highlight('entry_basic');return false;">Show basic information about the entry</a></h8>
<fieldset id="entry_basic">
<legend>Basic information about the entry - <h8> <a href="#" onclick="new Effect.Fade('entry_basic'); Effect.Appear('reveal'); return false;">Hide</a></h8></legend>
<%= hidden_field "entry", "id" %>
<ol>
  <li class="left">
    <label for="entry_title"><span class="accesskey">T</span>itle:</label>
    <%= text_field "entry", "title", {:accesskey => "t", :onblur => "makeSlug();"} %>
  </li> 
  <li class="right">
    <label for="entry_slug">Slu<span class="accesskey">g</span>:</label><h8> <a href="#" id="whatThisLink" onclick="Element.show('whatThis1');Effect.Fade('whatThisLink');new Effect.Highlight('whatThis1');return false;">What's This?</a></h8>
    <%= text_field "entry", "slug", {:accesskey => "g"} %>
  </li>
  <li id="whatThis1" class="right">
  <p>The 'slug' is what the URL will be, usually the shorter the better but generally you wont have to worry about this. Leave it as it is.</p><h8> <a href="#" onclick="new Effect.Fade('whatThis1');Element.show('whatThisLink');return false;">Hide</a></h8>
  
  </li>
  <li class="left">
    <label for="entry_tags">T<span class="accesskey">a</span>gs:</label>
    <%= text_field "entry", "tags", {:value => tags(@entry), :accesskey => "a",
     :autocomplete => "off", :onkeydown => "keyPress(event);", :onkeyup => "suggestTags(event);"} %>
  </li>
  <li class="right">
    <%= hidden_field 'entry', 'state', :value=> "D" %>
  </li>
  <li class="left" id="entry_suggest">
    <label>Suggestions:</label>
    <ul id="entry_suggest_suggestions"></ul>
  </li>
  <li id="hidden" class="right">
    <label for="entry_date_published">Date:</label>
    <%- if @entry -%>
    <%= datetime_select "entry", "date_published" %>
    <%- else -%>
    <%- t = Time.now + (Option["general_timedifference"].to_f * 60 * 60) -%>
    <%= select_year(t, {:prefix => "entry", :field_name => "date_published(1i)"}) +
        select_month(t, {:prefix => "entry", :field_name => "date_published(2i)"}) +
        select_day(t, {:prefix => "entry", :field_name => "date_published(3i)"}) + " &mdash; " +
        select_hour(t, {:prefix => "entry", :field_name => "date_published(4i)"}) + ":" +
        select_minute(t, {:prefix => "entry", :field_name => "date_published(5i)"}) %>
    <%- end -%>
  </li>
  <li class="right">
    <%= hidden_field 'entry', 'user_id', :value=> session["user"].id %>
  </li>
    </li>
  <li class="left">
  <a href="#" onclick="new Effect.Fade('entry_basic'); Effect.Appear('reveal'); return false;">Done here? Now Hide it!</a>
  </li>
</ol>
</fieldset>

<div id="entry_typebased" class="tabs">
<ul id="entry_types" class="tablist">
<%- for type in @types -%>
  <li id="entry_type_<%= type.id %>">
    <a href="#type" onclick="loadType(<%= type.id %>);"><%= type.name.capitalize %></a></li>
<%- end -%>

</ul>

<%= hidden_field "entry", "type_id" %>
<%= hidden_field "entry", "description" %>
<%= hidden_field "entry", "contents" %>

<%= observe_form "live-entry-form",
					:frequency => 1,
					:update => "live-preview",
					:complete =>"Element.show('live-preview')",
					:url => {:controller => "entries", :action=>"show"} %>
<%= observe_form "live-entry-form",
					:frequency => 5,
					:update => "message",
					:complete =>"Element.show('live-preview')",
					:url => {:controller => "entries", :action=>"save_draft"} %>
<!--<div id="message" style="color:#990000;"></div>-->
<%- for type in @types -%>
<%= render :partial => "type_" + type.name %>
<%- end -%>

<script type="text/javascript">
if($("entry_type_id").value != "") {
    loadType($("entry_type_id").value);
} else {
    loadType(1);
}
</script>
</div>

<div id="entry_pluginbased" class="tabs">
<ul id="entry_plugins" class="tablist">
<%- for plugin in @plugins -%>
  <li id="entry_plugin_<%= plugin['key'] %>">
    <a href="#plugin" onclick="loadPlugin('<%= plugin['key'] %>');"><%= plugin["name"] %></a></li>
<%- end -%>
</ul>

<%- for plugin in @plugins -%>
<%= render :partial => "plugin_" + plugin["key"] %>
<%- end -%>

<script type="text/javascript">
loadPlugin("<%= @plugins[0]['key'] %>");
document.getElementById("reveal").hide();

document.getElementById("hidden").hide();
document.getElementById("whatThis1").hide();

</script>
</div>

<div id="entry_submit" class="submit">
<%= hidden_field_tag "submit", "" %>
<% #if session["user"].permission == "writer" %>
<%= submit_tag "Send To Editor", :id => "entry_submit_send", :onclick => "submitButton(this);" if (@entry and @entry.state != "E") or (!@entry) %>
<% #end %>
<% if session["user"].permission == "admin" %>
<%= submit_tag "Publish Live", :id => "entry_submit_publish", :onclick => "submitButton(this);" if (@entry and @entry.state != "P") or (!@entry) %>
<% end %>
<%= submit_tag "Save and Preview", :id => "entry_submit_save", :class => "default", :onclick => "submitButton(this);" %>
<%= submit_tag "Save and continue editing", :id => "entry_submit_saveandcontinue", :onclick => "submitButton(this);" %>
<%= tag :input, {:type => "button", :name => "commit", :value => "Cancel", :id => "entry_submit_cancel", :onclick => "window.history.back();"} %>
</div>

<%= end_form_tag %>

<div style="clear: both;" />
</div>

Refactorings

No refactoring yet !

5170ca260dbd2cdfd5a887a4dba7636f

Jeremy Weiskotten

December 7, 2007, December 07, 2007 14:58, permalink

1 rating. Login to rate!

Have you tried validating the HTML that is rendered? Sometimes unclosed or illegally nested tags can cause weird behavior. If you're still having trouble, please post the rendered HTML.

3d813d3e0d8086cfdc14b35891e9204c

James

December 7, 2007, December 07, 2007 17:55, permalink

1 rating. Login to rate!

Hey, sorry still struggling, this page does not validate (although the front-end of the site does) this is just the admin interface and so i thought less important. However all the other admin pages work just fine... I dunno why this one seems to look any different?

Thanks,
James

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Write entry - 
  NCMag Online: Admin Center</title>
  <link href="/stylesheets/admin.css?1196974793" media="screen" rel="Stylesheet" type="text/css" />
  <script src="/javascripts/prototype.js?1195833149" type="text/javascript"></script>
<script src="/javascripts/effects.js?1195833148" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1195833146" type="text/javascript"></script>
<script src="/javascripts/controls.js?1195833145" type="text/javascript"></script>

<script src="/javascripts/application.js?1195833144" type="text/javascript"></script>
  <script src="/javascripts/admin.js?1195833143" type="text/javascript"></script>
  <!--[if IE]>
  <style type="text/css">
  @import url("/stylesheets/admin_ie.css?1196963225")
  </style>
  <![endif]-->
</head>
<body>

<div id="header"> <!--Start of Header -->
  <img src="/blog/images/iconwriter.png" alt="An id card image"> <h1 id="header_title">James</h1><br />
  
  <div id="breadcrumbs"><!-- Start of Breadcrumbs -->

  <ul>
         <li>You are here:</li>
<li>&#187;</li><li><a href="/admin/">admin</a></li>
<li>&#187;</li><li><a href="/admin/entries/">entries</a></li>
<li>&#187;</li><li>write</li>
</ul>
</div><!--End of Breadcrumbs -->
  
</div><!-- End of Header -->

<div id="header_login"><!--Start of header Login -->

  <h8>
    Logged in as <strong>James</strong>.
    <a href="/">View site.</a>
    <a href="/account/logout">Log out.</a>
  </h8>
  </div><!--End of Header Login -->

 <ol id="navigation">

  <li id="navigation_dashboard" onmouseover="showNavigation('dashboard');">
    <a href="/admin" class="controller"><span>Dashboard</span></a>
    <ol>
      <li><a href="/admin/dashboard/welcome">Welcome</a></li>
    </ol>	
  </li>
  <li><a href="/admin/ideas/view"><span>Ideas</span></a></li>
  <li id="navigation_entries" onmouseover="showNavigation('entries');">

    <a href="/admin/entries" class="controller"><span>Entries</span></a>
    <ol>
      <li><a href="/admin/entries/write">Write entry</a></li>
      <li><a href="/admin/entries/manage">Manage entries</a></li>
    </ol>

  </li>
 
 
 <li id="navigation_comments" onmouseover="showNavigation('comments');">

    <a href="/admin/comments" class="controller"><span>Comments</span></a>
    <ol>
      <li><a href="/admin/comments/manage">Manage comments</a></li>
    </ol>
  </li>
  <li id="navigation_users" onmouseover="showNavigation('users');">

    <a href="/admin/users" class="controller"><span>Users</span></a>

    <ol>
      <li><a href="/admin/users/new">New user</a></li>
      <li><a href="/admin/users/manage">Manage users</a></li>
    </ol>
  </li>
  
  <li id="navigation_themes" onmouseover="showNavigation('themes');">

    <a href="/admin/themes" class="controller"><span>Themes</span></a>

    <ol>
      <li><a href="/admin/themes/manage">Manage themes</a></li>
    </ol>
  </li>
  <li id="navigation_settings" onmouseover="showNavigation('settings');">
    <a href="/admin/settings" class="controller"><span>Settings</span></a>

    <ol>

      <li><a href="/admin/settings/general">General settings</a></li>
      <li><a href="/admin/settings/comment">Comment settings</a></li>
    </ol>
  </li>
 
 </ol>
 


<script type="text/javascript">
showNavigation("entries");
</script>

<p id="notice">Logged in successfully.</p>





<div id="entries_write" class="content edit">



<h2><img src="/blog/images/writersicon.png" alt="An image of a clipboard">  Write new entry</h2>



<form action="/admin/entries/save" id="live-entry-form" method="post">

<h8><a href="#" id="reveal" onclick="Element.show('entry_basic'); Element.hide('reveal');new Effect.Highlight('entry_basic');return false;">Show basic information about the entry</a></h8>

<fieldset id="entry_basic">

<legend>Basic information about the entry - <h8> <a href="#" onclick="new Effect.Fade('entry_basic'); Effect.Appear('reveal'); return false;">Hide</a></h8></legend>

<input id="entry_id" name="entry[id]" type="hidden" />

<ol>

  <li class="left">

    <label for="entry_title"><span class="accesskey">T</span>itle:</label>

    <input accesskey="t" id="entry_title" name="entry[title]" onblur="makeSlug();" size="30" type="text" />

  </li> 

  <li class="right">

    <label for="entry_slug">Slu<span class="accesskey">g</span>:</label><h8> <a href="#" id="whatThisLink" onclick="Element.show('whatThis1');Effect.Fade('whatThisLink');new Effect.Highlight('whatThis1');return false;">What's This?</a></h8>

    <input accesskey="g" id="entry_slug" name="entry[slug]" size="30" type="text" />

  </li>

  <li id="whatThis1" class="right">

  <p>The 'slug' is what the URL will be, usually the shorter the better but generally you wont have to worry about this. Leave it as it is.</p><h8> <a href="#" onclick="new Effect.Fade('whatThis1');Element.show('whatThisLink');return false;">Hide</a></h8>

  

  </li>

  <li class="left">

    <label for="entry_tags">T<span class="accesskey">a</span>gs:</label>

    <input accesskey="a" autocomplete="off" id="entry_tags" name="entry[tags]" onkeydown="keyPress(event);" onkeyup="suggestTags(event);" size="30" type="text" value="" />

  </li>

  <li class="right">

    <input id="entry_state" name="entry[state]" type="hidden" value="D" />

  </li>

  <li class="left" id="entry_suggest">

    <label>Suggestions:</label>

    <ul id="entry_suggest_suggestions"></ul>

  </li>

  <li id="hidden" class="right">

    <label for="entry_date_published">Date:</label>



    <select name="entry[date_published(1i)]">
<option value="2002">2002</option>
<option value="2003">2003</option>

<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007" selected="selected">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>

</select>
<select name="entry[date_published(2i)]">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>

<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12" selected="selected">December</option>
</select>
<select name="entry[date_published(3i)]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>

<option value="5">5</option>
<option value="6">6</option>
<option value="7" selected="selected">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>

<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>

<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>

</select>
 &mdash; <select name="entry[date_published(4i)]">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>

<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>

<option value="16">16</option>
<option value="17" selected="selected">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>

:<select name="entry[date_published(5i)]">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>

<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>

<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>

<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30" selected="selected">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>

<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>

<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>

<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select>


  </li>

  <li class="right">

    <input id="entry_user_id" name="entry[user_id]" type="hidden" value="1" />

  </li>

    </li>

  <li class="left">

  <a href="#" onclick="new Effect.Fade('entry_basic'); Effect.Appear('reveal'); return false;">Done here? Now Hide it!</a>

  </li>

</ol>

</fieldset>



<div id="entry_typebased" class="tabs">

<ul id="entry_types" class="tablist">


  <li id="entry_type_1">

    <a href="#type" onclick="loadType(1);">Article</a></li>




</ul>



<input id="entry_type_id" name="entry[type_id]" type="hidden" />

<input id="entry_description" name="entry[description]" type="hidden" />

<input id="entry_contents" name="entry[contents]" type="hidden" />



<script type="text/javascript">
//<![CDATA[
new Form.Observer('live-entry-form', 1, function(element, value) {new Ajax.Updater('live-preview', '/admin/entries/show', {asynchronous:true, evalScripts:true, onComplete:function(request){Element.show('live-preview')}, parameters:value})})
//]]>
</script>



<!--<div id="message" style="color:#990000;"></div>-->


<!-- Write an article -->
<fieldset id="entry_typebased_1" class="tab">

<legend>Write an article</legend>
<ol>
 	<li class="right">
  		<div id="live-preview"></div>
  	</li>
  <li>
    <label for="entry_description_1">E<span class="accesskey">x</span>cerpt:</label>
    <textarea cols="100" id="entry_description_1" name="entry_description_1" rows="6"></textarea>

  </li>
  <li>
    <label for="entry_contents_1">Bod<span class="accesskey">y</span>:</label>
    <textarea cols="100" id="entry_contents_1" name="entry_contents_1" rows="20"></textarea>
  </li>

</ol>
</fieldset>





<script type="text/javascript">

if($("entry_type_id").value != "") {

    loadType($("entry_type_id").value);

} else {

    loadType(1);

}

</script>

</div>



<div id="entry_pluginbased" class="tabs">

<ul id="entry_plugins" class="tablist">


  <li id="entry_plugin_textcontrol">

    <a href="#plugin" onclick="loadPlugin('textcontrol');">Text Control</a></li>


  <li id="entry_plugin_commentcontrol">

    <a href="#plugin" onclick="loadPlugin('commentcontrol');">Comment Control</a></li>


</ul>




<!-- Plugin Text Control -->
<fieldset id="entry_pluginbased_textcontrol" class="tab">
<legend>Plugin Text Control</legend>
<ol>
  <li>
    <label for="meta_formatting">Formatting</label>
    <select id="meta_formatting" name="meta[formatting]"><option value="N" selected="selected">None</option>

<option value="M">Markdown</option>
<option value="T">Textile</option></select>
  </li>
</ol>
</fieldset>



<!-- Plugin Comment Control -->
<fieldset id="entry_pluginbased_commentcontrol" class="tab">
<legend>Plugin Comment Control</legend>
<ol>
  <li>

    <label for="meta_allow_comments">Allow comments?</label>
    <input checked="checked" id="meta_allow_comments" name="meta[allow_comments]" type="checkbox" value="1" /><input name="meta[allow_comments]" type="hidden" value="0" />
  </li>
</ol>
</fieldset>





<script type="text/javascript">

loadPlugin("textcontrol");





document.getElementById("hidden").hide();

document.getElementById("whatThis1").hide();



document.getElementById("reveal").hide();

</script>

</div>



<div id="entry_submit" class="submit">

<input id="submit" name="submit" type="hidden" value="" />


<input id="entry_submit_send" name="commit" onclick="submitButton(this);" type="submit" value="Send To Editor" />




<input id="entry_submit_publish" name="commit" onclick="submitButton(this);" type="submit" value="Publish Live" />


<input class="default" id="entry_submit_save" name="commit" onclick="submitButton(this);" type="submit" value="Save and Preview" />

<input id="entry_submit_saveandcontinue" name="commit" onclick="submitButton(this);" type="submit" value="Save and continue editing" />

<input id="entry_submit_cancel" name="commit" onclick="window.history.back();" type="button" value="Cancel" />

</div>



</form>



<div style="clear: both;" />

</div>

</body>
</html>
F288a8afe5302a16a366d5e9d34f2fec

Joe Grossberg

July 4, 2008, July 04, 2008 14:54, permalink

No rating. Login to rate!

"this page does not validate"

So then *read the validation errors* and fix those problems. HTML validation isn't just a yes/no question; the W3C tool can be a little cryptic sometimes, but if you're a professional developer, it's worth reading the messages and learning what they mean.

"However all the other admin pages work just fine"

So then focus on what's *different* about this page.

Check for JavaScript errors. Try disabling CSS and JS. Leave out the partials. Try removing chunks of HTML (e.g. those "OL" tags and their contents) until it does work. Eventually you will have something in a working state; then add stuff back until it breaks and that will narrow down where the problem is.

Come on man, this is RefactorMyCode.com not DebugMyCode.com -- debugging is a critical part of the developer's job, and you figuring how to solve this problem is far more valuable than just finding out the solution. Keep working at it, man -- you'll get it. :)

Your refactoring





Format Copy from initial code

or Cancel