Question

This is my first day trying out both AJAX and jQuery so I’m still bumbling around a bit with the basics.

I’ve based a lot of my code on what’s found at this site.

On destroy of an object, I want the list of object on an index page to update.

Controller action:

def destroy
  @artist = Artist.find(params[:id])
  @artist.destroy
  @artists = Artist.all
end

destroy.js.erb:

$("#post_errors").hide(300);
$("#flash_notice").html("<%= escape_javascript(flash[:notice]) %>");
$("#flash_notice").show(300);
$("#posts_list").html("<%= escape_javascript( render(partial: "list")) %>");

_list.html.erb:

<% for artist in @artists %>
  <tr>
    <td><%= artist.display_name %></td>
    <td><%= link_to "Destroy", artist, remote: true, confirm: "Are you sure?", method: :delete %></td>
  </tr>
<% end %>

index.html.erb:

<div id="artist_list"><%= render partial: 'list' %></div>

On clicking the destroy link, the database action for destroying the object is executed and the object is removed, but the list on the index page does not update without me refreshing the page.

Is there anything obvious I’m doing wrong here?

Answer 1

You might try making this change to your JS:

$("#artist_list").html("<%= escape_javascript( render(partial: "list")) %>");

Because, if I understand your code correctly, you’re trying to change the html for a DOM object where the ID is “posts_list”.