Updating a table with Ajax

Rails
1

I’ve been banging my head against the wall trying to update a table
(add/delete rows) using Ajax. It seems simple enough but just doesn’t
work
for me. I can get it to work using DIVs instead of a table, but doing
the
layout with DIVs is much more cumbersome and I know it works for others
with
a table (though I haven’t been able to find an exact example code
anywhere).
Here’s my code (simplified for this example:)

View:

    <% for @comment in @comments %>
            <%= render :partial => 'comment_list' %>
    <% end %>

You can add a comment.

<%= form_remote_tag :update => 'comment_list', :position => :bottom,

:url => {:action => ‘add_comment’} %>

<%= text_area_tag('new_comment_text', nil, :size => '50x8') %>

<%= submit_tag 'Submit' %>

Then my _comments_list.rhtml partial:

<td><div class='comment_user'>
    <b><%= @comment.user.firstname %></b><br/>
    <span style="font-size: smaller;"><%=

@comment.created_at.strftime(’%d
%B’) %>

<td><div class='comment_comment'><%= in_place_editor_field :comment,

:comment, {}, { :rows => 10 } %>

<td><%= link_to_remote image_tag('delete'),
    { :url=>{
        :action=>"delete_comment",
        :id=>@comment.id},
    :update=>"comment#{@comment.id}",
    :loading=>"status('comment#{@comment.id}')"},
    { :class => 'del_comment'}
    %></td>

Here’s the problem:

The ajax updating works, but instead of putting the new comment inside
the
table, it puts it after the table.

The delete button doesn’t update the table either (unless I refresh the
page
of course). in my “delete_comment” action I have render :text => ‘’.

Could anyone point me to some sample working code of how to update table
rows with ajax? THanks.

2

Refer below example, it might be of help: Here hint is,
Give unique id to each table row. You can use a session variable
which
will be incremented for each row.
For adding a new row to a table: give id to

tag & use it as a
reference id in “rjs” for rendering a partial.
For removing a row from a table: simply write a rjs with code:
page.remove .

Example:
(1) tablepage.rhtml

<%= javascript_include_tag :defaults %>
column1 column2 column3
val11 val12 val13 <%=link_to_remote 'Remove', :url => {:action => 'RemoveRow',:rowCount => "1"}%>




<%=link_to_remote ‘Add New Row’, :url => {:action => ‘addNewRow’}%>

(2) addNewRow.rjs page.insert_html :bottom, 'tabrow', :partial=> 'row_disp', :locals => {:count => @count}

(3) _row_disp.rhtml

val<%=count%>1 val<%=count%>2 val<%=count%>3 <%=link_to_remote 'Remove', :url => {:action => 'RemoveRow',:rowCount => count}%> (4) removeRow.rjs page.remove @rowAttrCount (5) Controller code before_filter :set_counter, :only => :addNewRow

def set_counter
session[:count] = session[:count] || 1
session[:count] += 1
@count = session[:count]
end

def addNewRow
puts “\n controller addNewRow”
p @count
end

def RemoveRow
@rowAttrCount = params[:rowCount]
end

Let me know if this helps.

With Regards,
Medha.

3

Hello,
Well, actually, I am updating a table with Ajax, although, perhaps
‘update’ is too strong a word - read my rough explanation and you decide
for yourself :wink: I have a select button that calls an ajax function which
then updates a table wrapped in a

with a whole new copy of the
table. I have some :before javascript that grabs the values and stashes
them into an array, then :after the ajax has updated with the new blank
table, it re-populates the table :slight_smile: This allows someone to change the
number of rows in the table pretty easily. 
Its not 'update' in the strictest sense of the word. I don't update

merely one row at a time, it does require the table ‘blank’ to be passed
over, granted, however its much quicker than posting the details over
and re-sending them back. Its perhaps not the nicest way to do it,
however, it does scale well upto 100 rows or so. This is an online
booking system, so, having a (very) arbitrary limit of 100 ‘contacts’ on
any booking is not -that- big of a problem :wink:

Jst a thought :)
Regards
Stef
4

On 8/14/06, Medha K. [email protected] wrote:

Yes, it worked just great. I’ll try to add this to the Rails wiki
sometime.

I’m quite sure I had tried what you had suggetsed before (assigning an
id to
each row) and it hadn’t worked. What’s different about your code is the
use
of the tag, which I hadn’t used (I was assigning an id to the
table
and updating that instead.

Also, instead of using a counter for the rows, I use the id of the
record
displayed. Simplifies the code since no set_counter function is needed.
Row
ids are as follows (assuming @comment is the record displayed)

Then in my delete_comment action:

@row_to_delete = ‘comment’+params[:id].to_s

delete_comment.rjs:

page.remove @row_to_delete

Thanks, Medha!

5

zer0halo wrote:

I’ve been banging my head against the wall trying
to update a table (add/delete rows) using Ajax.

I know it works for others with a table

No, it doesn’t work for others with a table. That’s why you can’t find
working code examples. Long-story-short is … check MSDN, “How To
Build
Tables Dynamically” and you’ll see that tables are addressable via the
Table
Object Model, not the Document Object Model.

CSS is a little more work in the short-term since we already know how to
use
tables but, I’ve found, not that tough. There are some very good
resources
too. The css-discuss mailing list ( http://css-discuss.incutio.com/ )
is a
great place to start for anyone looking for help making the change.

hth,
Bill