Rails - Jun 2005 - Trouble with Prototype's "Insertion.Top" and Internet Explorer 6

Hello,

I''m no Javascript wiz, and I''m running into a bit of a problem
with
some of Rails'' AJAX functionality. Hopefully someone here can help.
Before I describe the specifics, if you want to look at all of the
code involved, anonymous Subversion access to it can be had at
http://explainpmt.com/svn/explainpmt/branches/rebuild_with_ajax

Basically, I have a StoryCardsController#list view that contains a
table with information about each story card. That table is formatted
like so:

<table id="story_list">
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>Name</th>
      <th>Points</th>
      <th colspan="2">&nbsp;</th>
    </tr>
    <tr id="new_story_card">
      <td>&nbsp;</td>
      <td>{the name field}</td>
      <td class="numeric_cell">{the points field}</td>
      <td class="icon_cell">
        <input id="submit_story" type="submit"
name="submit" value="Add" />
      </td>
      <td class="throbber_cell">{the throbber image}</td>
    </tr>
  </thead>
  <tbody id="story_list_body">
    <% for story_card in @story_cards %>
    <tr id="story_card_<%= story_card.id %>">
      <td class="icon_cell">{an icon}</td>
      <td class="story_name_cell">{the story name}</td>
      <td class="numeric_cell">{the points}</td>
      <td class="icon_cell">{a delete link}</td>
      <td class="throbber_cell">&nbsp;</td>
    </tr>
    <% end %>
  </tbody>
</table>

The html for each existing story card (in the for loop) is actually
rendered from a partial. When the form is submitted (via AJAX) to the
create action, the following javascript is rendered in the template
and I use '':complete => "eval(request.responseText);''
in the
form_remote_tag.

new Insertion.Top(''story_list_body'',
  ''<%=
escape_javascript(render_partial(''list_item'',
  :story_card => @story_card)) %>'');

I use this method, because there is actually more javascript in that
template that needs to get executed when the action is complete, but
I''ve commented it out to narrow the problem down to this statement.
The partial that is rendered there is the same one that''s used to
render each item when the list is initially displayed.

Now, in Firefox, the code works like a charm---does exactly what you''d
expect. However, in IE, I get a javascript error when it tries to
execute the Insertion.Top code. The error says:

Line: 506
Char: 7
Error: Invalid target element for this operation.
Code: 0

However, if I place an empty div with an id of "test" at the top of
the list template and change the Insertion.Top code to:

new Insertion.Top(''test'',
  ''<%=
escape_javascript(render_partial(''list_item'',
  :story_card => @story_card)) %>'');

No javascript error occurs, and the HTML is successfully inserted into
that div. I''ve also tried giving the id of the table itself
(''story_list'') instead of the tbody, but that still throws the
javascript error.

Anyone know how to work around this issue? Is it just a bug in IE''s
DOM, or am I doing something wrong?

-- 
Regards,
John Wilger

-----------
Alice came to a fork in the road. "Which road do I take?" she asked.
"Where do you want to go?" responded the Cheshire cat.
"I don''t know," Alice answered.
"Then," said the cat, "it doesn''t matter."
- Lewis Carrol, Alice in Wonderland

John

Maybe its a problem with insertAdjacentHTML ? 

If you look at the microsoft docs
http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/insertadjacenthtml.asp
  and scroll down to the last section, Applies To, you''ll see that
this function is not supported for table or tbody tags.

When I''ve used the Insertion functions, I broken each row down into
its own table and wrapped it with a div and then inserted new tables
within the div. If you do a search through the archives, you''ll find
some code examples.

Erik

On 6/13/05, rails-request-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
<rails-request-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org>
wrote:
> Send Rails mailing list submissions to
>         rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> 
> To subscribe or unsubscribe via the World Wide Web, visit
>         http://lists.rubyonrails.org/mailman/listinfo/rails
> or, via email, send a message with subject or body ''help''
to
>         rails-request-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> 
> You can reach the person managing the list at
>         rails-owner-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> 
> When replying, please edit your Subject line so it is more specific
> than "Re: Contents of Rails digest..."
> 
> 
> Today''s Topics:
> 
>    1. Trouble with Prototype''s "Insertion.Top" and
Internet
>       Explorer 6 (John Wilger)
> 
> 
> ----------------------------------------------------------------------
> 
> Message: 1
> Date: Mon, 13 Jun 2005 12:45:29 -0400
> From: John Wilger
<johnwilger-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
> Subject: [Rails] Trouble with Prototype''s
"Insertion.Top" and Internet
>         Explorer 6
> To: Rails Mailing List
<rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org>
> Message-ID:
<a05e51b605061309451af1df68-JsoAwUIsXosN+BqQ9rBEUg@public.gmane.org>
> Content-Type: text/plain; charset=ISO-8859-1
> 
> Hello,
> 
> I''m no Javascript wiz, and I''m running into a bit of a
problem with
> some of Rails'' AJAX functionality. Hopefully someone here can
help.
> Before I describe the specifics, if you want to look at all of the
> code involved, anonymous Subversion access to it can be had at
> http://explainpmt.com/svn/explainpmt/branches/rebuild_with_ajax
> 
> Basically, I have a StoryCardsController#list view that contains a
> table with information about each story card. That table is formatted
> like so:
> 
> <table id="story_list">
>   <thead>
>     <tr>
>       <th>&nbsp;</th>
>       <th>Name</th>
>       <th>Points</th>
>       <th colspan="2">&nbsp;</th>
>     </tr>
>     <tr id="new_story_card">
>       <td>&nbsp;</td>
>       <td>{the name field}</td>
>       <td class="numeric_cell">{the points
field}</td>
>       <td class="icon_cell">
>         <input id="submit_story" type="submit"
name="submit" value="Add" />
>       </td>
>       <td class="throbber_cell">{the throbber
image}</td>
>     </tr>
>   </thead>
>   <tbody id="story_list_body">
>     <% for story_card in @story_cards %>
>     <tr id="story_card_<%= story_card.id %>">
>       <td class="icon_cell">{an icon}</td>
>       <td class="story_name_cell">{the story
name}</td>
>       <td class="numeric_cell">{the points}</td>
>       <td class="icon_cell">{a delete link}</td>
>       <td class="throbber_cell">&nbsp;</td>
>     </tr>
>     <% end %>
>   </tbody>
> </table>
> 
> The html for each existing story card (in the for loop) is actually
> rendered from a partial. When the form is submitted (via AJAX) to the
> create action, the following javascript is rendered in the template
> and I use '':complete =>
"eval(request.responseText);'' in the
> form_remote_tag.
> 
> new Insertion.Top(''story_list_body'',
>   ''<%=
escape_javascript(render_partial(''list_item'',
>   :story_card => @story_card)) %>'');
> 
> I use this method, because there is actually more javascript in that
> template that needs to get executed when the action is complete, but
> I''ve commented it out to narrow the problem down to this
statement.
> The partial that is rendered there is the same one that''s used to
> render each item when the list is initially displayed.
> 
> Now, in Firefox, the code works like a charm---does exactly what
you''d
> expect. However, in IE, I get a javascript error when it tries to
> execute the Insertion.Top code. The error says:
> 
> Line: 506
> Char: 7
> Error: Invalid target element for this operation.
> Code: 0
> 
> However, if I place an empty div with an id of "test" at the top
of
> the list template and change the Insertion.Top code to:
> 
> new Insertion.Top(''test'',
>   ''<%=
escape_javascript(render_partial(''list_item'',
>   :story_card => @story_card)) %>'');
> 
> No javascript error occurs, and the HTML is successfully inserted into
> that div. I''ve also tried giving the id of the table itself
> (''story_list'') instead of the tbody, but that still
throws the
> javascript error.
> 
> Anyone know how to work around this issue? Is it just a bug in
IE''s
> DOM, or am I doing something wrong?
> 
> --
> Regards,
> John Wilger
>

On 6/13/05, John Wilger
<johnwilger-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> I''m no Javascript wiz, and I''m running into a bit of a
problem with
> some of Rails'' AJAX functionality. Hopefully someone here can
help.
> Before I describe the specifics, if you want to look at all of the
> code involved, anonymous Subversion access to it can be had at
> http://explainpmt.com/svn/explainpmt/branches/rebuild_with_ajax
> 
> Basically, I have a StoryCardsController#list view that contains a
> table with information about each story card. That table is formatted
> like so:
<snip>
> Now, in Firefox, the code works like a charm---does exactly what
you''d
> expect. However, in IE, I get a javascript error when it tries to
> execute the Insertion.Top code. The error says:
<snip>
> No javascript error occurs, and the HTML is successfully inserted into
> that div. I''ve also tried giving the id of the table itself
> (''story_list'') instead of the tbody, but that still
throws the
> javascript error.
> 
> Anyone know how to work around this issue? Is it just a bug in
IE''s
> DOM, or am I doing something wrong?
This is IE not just not implementing something, but doing it in such a
way that it''s nigh on impossible to detect (insertAdjacentHTML
shoudn''t be defined, instead of throwing out an error). I have a fix
(attached) for adding things to the bottom of a table, but it
shouldn''t be hard to ameliorate it to insert at the top.

If the author of prototype would like to include this in the next
version, I think that''d be great.

Hope this helps,


-- 
Nathaniel

<:((><


_______________________________________________
Rails mailing list
Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails