# AJAX + Table

**URL:** <https://www.ruby-forum.com/t/ajax-table/95293>\
**Category:** Rails\
**Created:** [January 16, 2006, 2:44pm UTC](https://www.ruby-forum.com/t/ajax-table/95293 "2006-01-16T14:44:47Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![jjantz](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/dfb087/32.png) [@jjantz](https://www.ruby-forum.com/u/jjantz)\
**Post date:** [January 16, 2006, 2:44pm UTC](https://www.ruby-forum.com/t/ajax-table/95293/1 "2006-01-16T14:44:47Z")

</div>

Hello all.

I am trying ot load table rows using AJAX based on a search. The  
following code results in:

1. Firefox renders correctly (Multiple rows inserted into page).
2. Opera renders the entire returned string in one by the looks of  
it (Bunched up under first header, the \<\> tags arne’t visible)
3. IE6 does nothing…great 😉

This is driving me nuts so any help would be much appreciated 🙂

SEARCH PAGE (Has a layout with unintereting stuff in it. The JS’s are  
there:)

\<%= form\_remote\_tag(:update =\> “results”,  
:url =\> { :action =\> :results },  
:position =\> “bottom” ) %\>  
\<%= render :partial =\> ‘form’ %\>  
\<%= submit\_tag “Search” %\>  
\<%= end\_form\_tag %\>

| SPR Number | Developer | Origin | Date | Status |
| --- | --- | --- | --- | --- |

CONTROLLER FUNCTION

def results  
@componentlogs =  
Componentlog.find\_by\_compname(params[:componentlog][:cl\_compname]).reverse  
render :partial=\> “componentlog”, :collection =\> @componentlogs  
end

PARTIAL FORM

\<%=h componentlog.cl\_spr %\> \<%=h componentlog.cl\_user %\> \<%=h componentlog.cl\_fromarea %\> \<%=h componentlog.cl\_date %\> \<%=h componentlog.cl\_date.to\_formatted\_s(:my\_time) %\> \<%=h componentlog.cl\_status %\>

Any help would be seriously appreciated!

Thanks very much

---

<div class="post-metadata">

**Author:** ![jjantz](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/dfb087/32.png) [@jjantz](https://www.ruby-forum.com/u/jjantz)\
**Post date:** [January 16, 2006, 3:01pm UTC](https://www.ruby-forum.com/t/ajax-table/95293/2 "2006-01-16T15:01:25Z")

</div>

Jeff J. wrote:

> | SPR Number | Developer | Origin | Date | Status |
> | --- | --- | --- | --- | --- |

Have you tried wrapping the table in a div and replacing the entire  
table?

\_Kevin

---

<div class="post-metadata">

**Author:** ![jjantz](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/dfb087/32.png) [@jjantz](https://www.ruby-forum.com/u/jjantz)\
**Post date:** [January 16, 2006, 3:22pm UTC](https://www.ruby-forum.com/t/ajax-table/95293/3 "2006-01-16T15:22:43Z")

</div>

Kevin O. wrote:

> Jeff J. wrote:
> 
> > | SPR Number | Developer | Origin | Date | Status |
> > | --- | --- | --- | --- | --- |
> 
> Have you tried wrapping the table in a div and replacing the entire  
> table?
> 
> \_Kevin

Can’t do that because it is a partial view that is being called  
repeatedly for each item in the list. How would I render the headers  
only once and not end up with

HEADERS  
DATA ROW  
HEADERS  
DATA ROW  
HEADERS  
DATA ROW

I tried rendering a separate partial for the headers but that fell over.

---

<div class="post-metadata">

**Author:** ![jjantz](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/dfb087/32.png) [@jjantz](https://www.ruby-forum.com/u/jjantz)\
**Post date:** [January 16, 2006, 3:30pm UTC](https://www.ruby-forum.com/t/ajax-table/95293/4 "2006-01-16T15:30:20Z")

</div>

Why can’t you have a partial for the table that utilizes the partials  
for  
the rows to render itself? Then just redraw that partial in a div.

-Will

---

<div class="post-metadata">

**Author:** ![jjantz](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/dfb087/32.png) [@jjantz](https://www.ruby-forum.com/u/jjantz)\
**Post date:** [January 16, 2006, 5:28pm UTC](https://www.ruby-forum.com/t/ajax-table/95293/5 "2006-01-16T17:28:26Z")

</div>

Jeff J. \<rurounijones@…\> writes:

> 1. Firefox renders correctly (Multiple rows inserted into page).
> 2. Opera renders the entire returned string in one by the looks of  
> it (Bunched up under first header, the \<\> tags arne’t visible)
> 3. IE6 does nothing…great 😉

Jeff,

I believe the reason you are experiencing this is do to the issue  
discussed  
here:

> **[Home](https://robsanheim.com)**
>
> Just another WordPress site

I don’t have any experience with Opera, myself, but I know that in IE it  
is not  
possible to insert new rows into a table using the DOMs innerHtml  
property  
(which is how the code that is generated by the form\_remote\_tag is doing  
it).  
Unfortunately, as helpful as all these helper tags are in Rails in  
abstracting  
out the javascript code involved, sometimes they can’t cover up the  
pecularities  
of particular browsers. You will likely need to resort to either  
modifying the  
Prototype code yourself or wrapping the returned results in some code to  
detect  
whether it needs to use the workarounds available for IE.

Regards,  
Tom Lockney

---

<div class="post-metadata">

**Author:** ![jjantz](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/dfb087/32.png) [@jjantz](https://www.ruby-forum.com/u/jjantz)\
**Post date:** [January 16, 2006, 5:36pm UTC](https://www.ruby-forum.com/t/ajax-table/95293/6 "2006-01-16T17:36:48Z")

</div>

Thomas L. wrote:

> Jeff J. \<rurounijones@…\> writes:
> 
> > 1. Firefox renders correctly (Multiple rows inserted into page).
> > 2. Opera renders the entire returned string in one by the looks of  
> > it (Bunched up under first header, the \<\> tags arne’t visible)
> > 3. IE6 does nothing…great 😉
> 
> Jeff,
> 
> I believe the reason you are experiencing this is do to the issue  
> discussed  
> here:  
> [Home](http://www.robsanheim.com/2005/10/11/prototype-insertion-ie-6-trs-and-invalid-target-element-for-this-operation/)
> 
> I don’t have any experience with Opera, myself, but I know that in IE it  
> is not  
> possible to insert new rows into a table using the DOMs innerHtml  
> property  
> (which is how the code that is generated by the form\_remote\_tag is doing  
> it).  
> Unfortunately, as helpful as all these helper tags are in Rails in  
> abstracting  
> out the javascript code involved, sometimes they can’t cover up the  
> pecularities  
> of particular browsers. You will likely need to resort to either  
> modifying the  
> Prototype code yourself or wrapping the returned results in some code to  
> detect  
> whether it needs to use the workarounds available for IE.
> 
> Regards,  
> Tom Lockney

Thank you very much for that Tom. I had spent the best part of the day  
googling to try and find information for this but I guess my google-fu  
is weak (Although I was focussing on the Opera bit)!

I am a newbie when it comes to RoR but I shall try the methods listed  
above and in the posts attached to that website.

Again thanks.

(Might have to add something to the WIKI about this. It must be a pretty  
common operation)

---

<div class="post-metadata">

**Author:** ![jjantz](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/dfb087/32.png) [@jjantz](https://www.ruby-forum.com/u/jjantz)\
**Post date:** [January 16, 2006, 8:23pm UTC](https://www.ruby-forum.com/t/ajax-table/95293/7 "2006-01-16T20:23:23Z")

</div>

Jeff J. \<rurounijones@…\> writes:

> Again thanks.

No problem. It actually took me a second to realize that was the problem  
you  
were seeing. I was familiar with it from doing javascript coding in IE  
from  
years past (it predates IE 6).

> (Might have to add something to the WIKI about this. It must be a pretty  
> common operation)

It’s already listed on the scriptaculous wiki under the prototype  
section, but  
most people probably don’t know to look there for things like this:

[http://wiki.script.aculo.us/scriptaculous/show/Insertion.Bottom](http://wiki.script.aculo.us/scriptaculous/show/Insertion.Bottom)

---

<div class="post-metadata">

**Author:** ![jjantz](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/dfb087/32.png) [@jjantz](https://www.ruby-forum.com/u/jjantz)\
**Post date:** [January 17, 2006, 2:01am UTC](https://www.ruby-forum.com/t/ajax-table/95293/8 "2006-01-17T02:01:10Z")

</div>

I just went through this myself.

What you need for IE to work properly is a TBODY tag within the table,  
and  
target that ID instead of the Parent table.

Even though that worked perfectly fine, I found that when I tried to  
replace  
all of the

 rows with a new set, I had to first add the new ones,  
then  
remove the old ID’s last. I really didn’t get to the bottom of why this  
happens, everything looked fine while debugging, but in any case, it  
worked  
so I am happy with it for now 🙂

> \> \> \> \> \> \> \> \> 
> 
> | SPR Number | Developer | Origin | Date | Status |
> | --- | --- | --- | --- | --- |
> 
> In RJS you could write:  
> tablelog.each { |row| page.insert\_html :bottom, ‘results’, render  
> :partial  
> =\> ‘table/row’, :locals =\> { :componentlog =\> row } }
> 
> Which the table/row partial contains:
> 
> > \<%=h componentlog.cl\_spr %\> \<%=h componentlog.cl\_user %\> \<%=h componentlog.cl\_fromarea %\> \<%=h componentlog.cl\_date %\> \<%=h componentlog.cl\_date.to\_formatted\_s(:my\_time) %\> \<%=h componentlog.cl\_status %\>
> 
> Regards,  
> Nathaniel.
> 
> ```auto
> Nathaniel S. H. Brown http://nshb.net
> 
> ```

---

<div class="post-metadata">

**Author:** ![jjantz](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/dfb087/32.png) [@jjantz](https://www.ruby-forum.com/u/jjantz)\
**Post date:** [January 17, 2006, 1:27am UTC](https://www.ruby-forum.com/t/ajax-table/95293/9 "2006-01-17T01:27:45Z")

</div>

A simple workaround for this is to have the row posted as a complete  
one-row  
table directed to a hidden div. You can also add a ‘:complete’ action,  
which is to run a short javascript to remove the row from the hidden div  
and  
insert it into the main table. This works fine in Firefox.

Here is my form\_remote\_tag for this method:

\<%= form\_remote\_tag( :update =\> ‘effort\_add\_div’,  
:url =\> { :action =\> ‘ajax\_add\_effort’,  
:id =\> @person.id,  
:person\_id =\> @person.id,  
:task\_id =\> task.id,  
:day\_id =\> @day.id, :date =\> @day.date } ,  
:complete =\> ‘xfereffort()’ ) %\>

And here is my row transfer code:

function xfereffort(){  
var src=document.getElementById(‘effort\_add\_table\_tbody’);  
var dst=document.getElementById(‘effort\_table\_tbody’);  
var lst=document.getElementById(‘effort\_id\_list’);

var rows=src.getElementsByTagName(‘TR’);  
if (rows.length \> 0){  
var row=rows[0];  
var rowid=row.getAttribute(“id”).split(’.’)[1];  
src.removeChild(row);  
dst.appendChild(row);  
var elist=lst.value;  
if (elist.length \> 0){  
lst.value = elist + “,” + rowid;  
}else{  
lst.value=rowid;  
}  
}  
}