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:
<div id=''comment_list''>
<table>
<% for @comment in @comments %>
<%= render :partial => ''comment_list''
%>
<% end %>
</table>
</div>
<p>You can <a href="#"
onclick="Element.toggle(''add_comment''); return
false;">add a comment</a>.</p>
<div id=''add_comment'' style=''display:
none;''>
<%= form_remote_tag :update => ''comment_list'',
:position => :bottom,
:url => {:action => ''add_comment''} %>
<%= text_area_tag(''new_comment_text'', nil, :size =>
''50x8'') %>
<%= submit_tag ''Submit'' %>
</div>
Then my _comments_list.rhtml partial:
<tr>
<div id=''comment<%= @comment.id %>''>
<td><div class=''comment_user''>
<b><%= @comment.user.firstname %></b><br/>
<span style="font-size: smaller;"><%=
@comment.created_at.strftime(''%d
%B'') %></span>
</div></td>
<td><div class=''comment_comment''><%=
in_place_editor_field :comment,
:comment, {}, { :rows => 10 } %></div></td>
<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>
</div>
</tr>
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.
--
"Impossible is nothing."
-------------- next part --------------
An HTML attachment was scrubbed...
URL:
http://wrath.rubyonrails.org/pipermail/rails/attachments/20060814/2b3142dc/attachment.html
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 <tbody> 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 <rowid>.
Example:
(1) tablepage.rhtml
<html>
<head>
<%= javascript_include_tag :defaults %>
</head>
<body>
<table id="tablename">
<thead>
<tr>
<td><label>column1</label></td>
<td><label>column2</label></td>
<td><label>column3</label></td>
</tr>
</thead>
<tbody id="tabrow">
<tr id="1">
<td> val11</td>
<td> val12</td>
<td> val13</td>
<td> <%=link_to_remote ''Remove'', :url
=> {:action =>
''RemoveRow'',:rowCount => "1"}%>
</td>
</tr>
</table>
<br>
<br>
<br>
<br>
<%=link_to_remote ''Add New Row'', :url => {:action =>
''addNewRow''}%>
<br>
</body>
</html>
(2) addNewRow.rjs
page.insert_html :bottom, ''tabrow'', :partial=>
''row_disp'', :locals =>
{:count => @count}
(3) _row_disp.rhtml
<tr id="<%=count%>">
<td> val<%=count%>1</td>
<td> val<%=count%>2</td>
<td> val<%=count%>3</td>
<td> <%=link_to_remote ''Remove'', :url
=> {:action =>
''RemoveRow'',:rowCount => count}%> </td>
</tr>
(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.
On 8/14/06, zer0halo <zerohalo@gmail.com> wrote:>
> 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:
>
> <div id=''comment_list''>
> <table>
>
> <% for @comment in @comments %>
> <%= render :partial =>
''comment_list'' %>
> <% end %>
>
> </table>
> </div>
>
> <p>You can <a href="#"
onclick="Element.toggle(''add_comment''); return
> false;">add a comment</a>.</p>
>
> <div id=''add_comment'' style=''display:
none;''>
>
> <%= form_remote_tag :update => ''comment_list'',
:position => :bottom,
> :url => {:action => ''add_comment''} %>
>
> <%= text_area_tag(''new_comment_text'', nil, :size
=> ''50x8'') %>
>
> <%= submit_tag ''Submit'' %>
>
> </div>
>
> Then my _comments_list.rhtml partial:
>
> <tr>
> <div id=''comment<%= @comment.id %>''>
>
> <td><div class=''comment_user''>
> <b><%= @comment.user.firstname %></b><br/>
> <span style="font-size: smaller;"><%=
@comment.created_at.strftime(''%d %B'') %></span>
> </div></td>
>
> <td><div class=''comment_comment''><%=
in_place_editor_field :comment,
> :comment, {}, { :rows => 10 } %></div></td>
>
> <td><%= link_to_remote image_tag(''delete''),
> { :url=>{
> :action=>"delete_comment",
> :id=>@comment.id},
> :update=>" comment#{@comment.id
<comment#%7B@comment.id>}",
> :loading=>"status(''comment#{@comment.id
<comment#%7B@comment.id>
> }'')"},
> { :class => ''del_comment''}
> %></td>
>
> </div>
> </tr>
>
> 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.
>
> --
> "Impossible is nothing."
>
> _______________________________________________
> Rails mailing list
> Rails@lists.rubyonrails.org
> http://lists.rubyonrails.org/mailman/listinfo/rails
>
>
>
--
If not you then who.....
If not now then when......
-----------------------------------------------------
With Best Regards,
Medha.
-------------- next part --------------
An HTML attachment was scrubbed...
URL:
http://wrath.rubyonrails.org/pipermail/rails/attachments/20060814/60f4ad88/attachment-0001.html
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 tableNo, 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
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 ;) I have a select button that calls an ajax function which
then updates a table wrapped in a <div> 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 :) 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 ;)
Jst a thought :)
Regards
Stef
zer0halo wrote:> 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:
>
> <div id=''comment_list''>
> <table>
>
> <% for @comment in @comments %>
> <%= render :partial =>
''comment_list'' %>
> <% end %>
>
> </table>
> </div>
>
> <p>You can <a href="#"
onclick="Element.toggle(''add_comment''); return
> false;">add a comment</a>.</p>
>
> <div id=''add_comment'' style=''display:
none;''>
>
> <%= form_remote_tag :update => ''comment_list'',
:position =>
> :bottom, :url => {:action => ''add_comment''} %>
>
> <%= text_area_tag(''new_comment_text'', nil, :size
=> ''50x8'') %>
>
> <%= submit_tag ''Submit'' %>
>
> </div>
>
> Then my _comments_list.rhtml partial:
>
> <tr>
> <div id=''comment<%= @comment.id <http://comment.id>
%>''>
>
> <td><div class=''comment_user''>
> <b><%= @comment.user.firstname %></b><br/>
> <span style="font-size: smaller;"><%=
> @comment.created_at.strftime (''%d %B'') %></span>
> </div></td>
>
> <td><div class=''comment_comment''><%=
in_place_editor_field
> :comment, :comment, {}, { :rows => 10 } %></div></td>
>
> <td><%= link_to_remote image_tag(''delete''),
> { :url=>{
> :action=>"delete_comment",
> :id=>@comment.id <http://comment.id>},
> :update=>" comment#{@comment.id
<mailto:comment#%7B@comment.id>}",
> :loading=>"status(''comment#{@comment.id
> <mailto:comment#%7B@comment.id>}'')"},
> { :class => ''del_comment''}
> %></td>
>
> </div>
> </tr>
>
> 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.
>
> --
> "Impossible is nothing."
> ------------------------------------------------------------------------
>
> _______________________________________________
> Rails mailing list
> Rails@lists.rubyonrails.org
> http://lists.rubyonrails.org/mailman/listinfo/rails
>
On 8/14/06, Medha Kulkarni <medhak@gmail.com> wrote:> > 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 <tbody> 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 <rowid>. > > Let me know if this helps. > >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 <tbody> 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) <tr id=''comment<%= @comment.id %>''> Then in my delete_comment action: @row_to_delete = ''comment''+params[:id].to_s delete_comment.rjs: page.remove @row_to_delete Thanks, Medha! -- "Impossible is nothing." -------------- next part -------------- An HTML attachment was scrubbed... URL: http://wrath.rubyonrails.org/pipermail/rails/attachments/20060815/9dd872e2/attachment.html