At what point is using data-attributes bad practice when making ajax calls in ruby on rails?

Question

My problem comes with the navigation links/endless scrolling.

I have included a "delete" button for each micropost. When that button is pressed, there's an ajax call to the server and the micropost is deleted and the div is removed from the DOM.

Say that I had microposts 1 to 10 on the first page, microposts 11 to 20 on the second, etc. Say that I delete items 1, 2 and 3 on the first page. Then scroll dowmn. The server will "recalculate" the microposts; since I removed 3 of the previous list, it will return items 13 to 22. In other words, microposts 10, 11 and 12 don't appear on the first page nor the second.

After hunting around on stackoverflow I found a solution:

Whenever I delete a micropost from the list, I load the micropost that came right after the last micropost on the page, and inserted it at it at the bottom.

How I'm currently going with the fix:

By default I show 10 microposts on a page using the will_paginate gem. I need to know the id of any micropost displayed at any given time. I achieve this by storing it in the opening div tag of for the container that holds each micropost:

<% @microposts.each do |m| %>
     <div class="postHolder" data-micropost-id="<%= m.id %>">

I access it like this in my microposts.js assets file:

$(function() {

     $('.message_delete').on('ajax:success', function(event, data, status, xhr){
          console.log(data); //to check if json is working
          console.log($('.postHolder').last().data('micropost-id'));
     });
});

Here is my controller destroy action:

def destroy
    micropost = Micropost.find(params[:id])
       respond_to do |format|   
         micropost.destroy
       format.json  { render :json => micropost } #just to check if json is working
    end
end

Now I know the ID of each micropost so when one is deleted I use a jquery selector to fine the last .postHolder div on the page get the ID and then use that ID to get the micropost that comes after it and insert that micropost after it. This way when a message is deleted one is automatically appended.

If the user happens to scroll to load more messages none are missing. I've watched some railscasts and see Ryan Bates do similar things with using data attributes and have read a few things about them and seem to get the impression this is bad practice.

I've tried to come up with other ways of doing this but can't think of any but doing it this way feels slightly strange. Maybe it's all in my head but I would like another better solution if possible.

Thanks

Kind regards

Answer 1

You could use a variable to keep track of the number of microposts on the current page. Whenever you remove a post, decrement this variable. Whenever you fetch a new page of posts, reset this variable to its default value (of 10).

When you fetch a new 10 posts, the offset for the database will be (assuming your requesting page 3 of microposts, and you have deleted 4 from page two)

(3 * 10) - (4) == 26

The first micropost on page 3 will now be micropost id 26

Assuming I have understood your question, that is!