Forum: Ruby on Rails AJAX + Table.

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
C728d93eb5205cf20cac0c2928b0ad62?d=identicon&s=25 Jeff Jones (rurounijones)
on 2006-01-16 14:44
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 <td> 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 %>
<br />
<table id="results">
  <tr>
    <th>SPR Number</th>
    <th>Developer</th>
    <th>Origin</th>
    <th>Date</th>
    <th>Status</th>
  </tr>
</table>

CONTROLLER FUNCTION

def results
    @componentlogs =
Componentlog.find_by_compname(params[:componentlog][:cl_compname]).reverse
    render :partial=> "componentlog", :collection => @componentlogs
  end

PARTIAL FORM

<tr>
<td><%=h componentlog.cl_spr %></td>
<td><%=h componentlog.cl_user %></td>
<td><%=h componentlog.cl_fromarea %></td>
<td><%=h componentlog.cl_date %> <%=h
componentlog.cl_date.to_formatted_s(:my_time) %></td>
<td><%=h componentlog.cl_status %></td>
</tr>

Any help would be seriously appreciated!

Thanks very much
C8a634a01a2c4508360874bff7fb1a7f?d=identicon&s=25 Kevin Olbrich (olbrich)
on 2006-01-16 15:01
Jeff Jones wrote:
> <table id="results">
>   <tr>
>     <th>SPR Number</th>
>     <th>Developer</th>
>     <th>Origin</th>
>     <th>Date</th>
>     <th>Status</th>
>   </tr>
> </table>


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

_Kevin
C728d93eb5205cf20cac0c2928b0ad62?d=identicon&s=25 Jeff Jones (rurounijones)
on 2006-01-16 15:22
Kevin Olbrich wrote:
> Jeff Jones wrote:
>> <table id="results">
>>   <tr>
>>     <th>SPR Number</th>
>>     <th>Developer</th>
>>     <th>Origin</th>
>>     <th>Date</th>
>>     <th>Status</th>
>>   </tr>
>> </table>
>
>
> 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.
9b7647d55df4584d7031130915556040?d=identicon&s=25 Will Briggs (Guest)
on 2006-01-16 15:30
(Received via mailing list)
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
3801fd43acf8d326679ae27aa865a11c?d=identicon&s=25 Thomas Lockney (tlockney)
on 2006-01-16 17:28
(Received via mailing list)
Jeff Jones <rurounijones@...> writes:

> 1. Firefox renders correctly (Multiple rows inserted into page).
> 2. Opera renders the entire returned string in one <td> 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:
http://www.robsanheim.com/2005/10/11/prototype-ins...

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
C728d93eb5205cf20cac0c2928b0ad62?d=identicon&s=25 Jeff Jones (rurounijones)
on 2006-01-16 17:36
Thomas Lockney wrote:
> Jeff Jones <rurounijones@...> writes:
>
>> 1. Firefox renders correctly (Multiple rows inserted into page).
>> 2. Opera renders the entire returned string in one <td> 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:
> 
http://www.robsanheim.com/2005/10/11/prototype-ins...
>
> 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)
3801fd43acf8d326679ae27aa865a11c?d=identicon&s=25 Thomas Lockney (tlockney)
on 2006-01-16 20:23
(Received via mailing list)
Jeff Jones <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/Ins...
77ac1a323e4ccc8976bfc7b5216b7aed?d=identicon&s=25 Larry Young (Guest)
on 2006-01-17 01:27
(Received via mailing list)
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;
          }
        }
}
00e3a96684ab390a350b0271e98741d3?d=identicon&s=25 Nshbrown Nshbrown (nshb)
on 2006-01-17 02:01
(Received via mailing list)
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 <TR> 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 :)

> <table>
<tbody id="results">
>   <tr>
>     <th>SPR Number</th>
>     <th>Developer</th>
>     <th>Origin</th>
>     <th>Date</th>
>     <th>Status</th>
>   </tr>
</tbody>
> </table>

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:
> <tr id="<%= componentlog.id %>">
> <td><%=h componentlog.cl_spr %></td>
> <td><%=h componentlog.cl_user %></td>
> <td><%=h componentlog.cl_fromarea %></td> <td><%=h
> componentlog.cl_date %> <%=h
> componentlog.cl_date.to_formatted_s(:my_time) %></td>
> <td><%=h componentlog.cl_status %></td> </tr>

Regards,
Nathaniel.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 Nathaniel S. H. Brown                           http://nshb.net
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
This topic is locked and can not be replied to.