Updating a table with Ajax

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
for me. I can get it to work using DIVs instead of a table, but doing
layout with DIVs is much more cumbersome and I know it works for others
a table (though I haven’t been able to find an exact example code
Here’s my code (simplified for this example:)


    <% 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;"><%= 

%B’) %>

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

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

<td><%= link_to_remote image_tag('delete'),
    { :url=>{
    { :class => 'del_comment'}

Here’s the problem:

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

The delete button doesn’t update the table either (unless I refresh the
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.

Refer below example, it might be of help: Here hint is,
Give unique id to each table row. You can use a session variable
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 .

(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]

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

def RemoveRow
@rowAttrCount = params[:rowCount]

Let me know if this helps.

With Regards,

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 :)

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

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

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
of the

tag, which I hadn’t used (I was assigning an id to the
and updating that instead.

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

Then in my delete_comment action:

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


page.remove @row_to_delete

Thanks, Medha!

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
Tables Dynamically” and you’ll see that tables are addressable via the
Object Model, not the Document Object Model.

CSS is a little more work in the short-term since we already know how to
tables but, I’ve found, not that tough. There are some very good
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.


This forum is not affiliated to the Ruby language, Ruby on Rails framework, nor any Ruby applications discussed here.

| Privacy Policy | Terms of Service | Remote Ruby Jobs