Ajax on Rails - I'm having an issue...

Question

I'm working on a Ruby on Rails web app, in which I've got several lists of posts. Each post will use Ajax to load their comments. In order of populating them in the right place, I'm doing the following:

Each post has a div with an id formatted as follows: <div id="my_div_<%= post.id %>"></div>. So, for example if the post.id is 12, the id will be "my_div_12".

My controller's action looks like this:

render :update do |page|
    page.replace_html 'my_div_' + params[:post_id].to_s, :partial => 'my_comments_section_partial_path'
end

That works fine only if I have a post only once at the page. But in this site, each post might be listed more than once, because there are several lists (latest posts, popular, tops, etc). And all of them will have their Comments section to show.

The issue now is that, as the comments section functionality is inside a partial view, it will work the same for every type of list (as it's expected), and therefore, it doesn't make the difference between the divs (because they will have the same post.id, and thus, the same div's id).

My question now is: how could I solv this problem? Is there a better and different way for doing this?

Thanks in advance!

EDIT:

Just to clarify what I want, in few words:

I would like the code page.replace_html 'my_div_' + params[:post_id].to_s, :partial => 'my_comments_section_partial_path' to replace that partial in EVERY div called 'my_div' + params[:post_id].to_s (because there may be more than one div in the same page with the same id).

Answer 1

It seems like you have two sets of posts on the same page and are worried about putting the comments for the correct post in the correct spot. I think making two Ajax requests would be fine. The URLs would probably be something like /posts/1/comments and /posts/2/comments. Essentially what you want is "all the comments for a given post". You could have a comments action on your posts controller to use your has_many :comments association from Post. Using the URL ID parameter you can supply the post ID. You could get the Post ID out of the markup through a custom ID attribute, a custom class, or a custom data-* attribute.

It looks like you're using RJS but I'd recommend using Prototype or jQuery to make the Ajax request and specify JSON data or HTML as the response, then append the JSON or HTMl in the correct spot.

In jQuery I'd grab the post ID, make the ajax request, then append the comment HTML. This is not tested, but roughly the idea in code.

var comments_div = $('.post .comments'); /* need a diff. comments div for each */
var post_id = $('.post').attr('data-post_id');
$.get({'/posts/'+post_id+'/comments', function(data){ comments_div.append(data); }  });

Answer 2

Note that having several elements with the same id on one page produces technically invalid html. Many browsers won't even render all those id attributes (leaving one and erasing the rest).

One simple solution is to switch to using classes instead of ids. There can be multiple elements with the same class and each element can have more than one class.
I don't work with built-in ajax helpers in Rails, but google suggests it's possible.