I have been try to make a page where a user can add something to a list and then delete something from the same list all without re-loading the page. The adding part is easy, but the deleting part is turning out to be a pain.

A user by the name of Philip gave me some very helpful hints: Put the snip of rHTML that needs to refresh into a partial. Include it the normal way, like this:

<div id='refresh_me'>     <%= render :partial => 'my_partial' %> </div>

Now wire link_to_remote up to an action that looks like this:

def my_action     return unless request.xhr?     render :update do |page| # <-- I call that rjs sometimes!        page.replace_html 'refresh_me', :partial => 'my_partial'     end end

The deal is that almost* anything you can pass to render, you can also pass to the second argument to JavaScriptGenerator#replace_html.

The first code injects raw HTML into your page as it renders, before it goes over the wire. The second snip renders the partial, then creates JavaScript containing Element.update('refresh_me', '<my partial html >'). This goes over the wire, and the Ajax handlers from prototype.js will replace the innerHTML member of that <div id='refresh_me'> with the new version.

(Question for the lifers - is it _really_ "almost anything"? Or is it "anything"!?)

I haven't come across anything that I couldn't send back yet...

This does not work, however, it just reloads the entire page within the list. Does anyone have any other ideas or sugestions. I realize that I am probably implementing the above code wrong, but I have tried every way that I can think of. Thanks,

What does your link_to_remote look like? It should just update the 'refresh_me' div with the result of the partial 'my_partial'.

Also, if you want to delete an item, another idea would be to assign each item it's own id. Say

<div id='my_item_123'>This is item 123</div> ...

Then in your delete action (or link to method for that action in a callback on success) use an event to simply remove that element from the page. Then nothing has to update, and the item simply goes away after deleting it.


It looks like this. 'hotel_info-refresh' is the name of the div and 'delete_hotel_info' is the name of the method that does the destroy. I will try giving each item an id. <%= link_to_remote 'Delete', :update => 'hotel_info_refresh', :action => 'delete_hotel_info', :id => %>

Did you just mis-type the dash vs underscore in your div id and the value of :update? Otherwise it looks okay to me.

Oh Wait!

If you're passing in :update, you don't need to do a page.replace_html in your action. Just render the partial with :layout => false.