Rails 4 x AJAX: partial not reloading on click with remote: true

Question

In my Rails 4 app, I have a Post model with a custom approval attribute.

I am trying to update this custom approval attribute from the Posts#Show page when the user clicks on one of three particular links set with remote: true .

The goal is to reload only the partial displaying the content of this attribute, and not the entire page.

Here is my Post show.html.erb view:

<div id="post_show_approval">
  <%= render 'approval' %>
</div>

And here is my _approval.html.erb partial, located in the app/views/posts folder:

<ul>
  <li>
    <% if @post.approval == "ok" %>
      <span class="ok_green">
        <span class="glyphicon glyphicon-ok"></span>
          Post Approved
      </span>
    <% else %>
      <span class="approval_blue" %>
        <%= link_to post_path(:id => @post.id, "post[approval]" => "ok"), :class => "post_appoval_link", remote: true, :method => :patch do %>
          <span class="glyphicon glyphicon-ok"></span>
          Approve this post
      </span>
        <% end %>
    <% end %>
  </li>
  <li id="post_show_require_edits">
    <% if @post.approval == "edit" %>
      <span class="edit_yellow">
        <span class="glyphicon glyphicon-repeat"></span>
          This post requires edits
      </span>
    <% else %>
        <span class="approval_blue" %>
          <%= link_to post_path(:id => @post.id, "post[approval]" => "edit"), :class => "post_appoval_link", remote: true, :method => :patch do %>
          <span class="glyphicon glyphicon-repeat"></span>
          Require edits for this post
        </span>
          <% end %>
    <% end %>
    </li>
  <li id="post_show_to_be_deleted">
    <% if @post.approval == "remove" %>
        <span class="remove_red">
          <span class="glyphicon glyphicon-remove"></span>
          This post needs to be deleted
        </span>
      <% else %>
        <span class="approval_blue" %>
          <%= link_to post_path(:id => @post.id, "post[approval]" => "remove"), :class => "post_appoval_link", remote: true, :method => :patch do %>
            <span class="glyphicon glyphicon-remove"></span>
            Mark this post as to be deleted
          <% end %>
        </span>
      <% end %>
    </li>
</ul>

As you can see, all the links with the post_approval_link class are set with remote: true .

Then, I have updated my PostsController as follows:

def update
  respond_to do |format|
    if @post.update(post_params)
      format.html { redirect_to post_path(@post) }
      format.json { render :show, status: :ok, location: @post }
      format.js
    else
      format.html { render :edit }
      format.json { render json: @post.errors, status: :unprocessable_entity }
    end
  end
end

And I have created an update.js.erb file in the app/views/posts folder:

$('#post_show_approval').reload(true);

—————

UPDATE : as alternatives to the above line, I also tried

$('#post_show_approval').hide().show();

and

$('#post_show_approval').toggle().toggle();

But none of these seem to work.

—————

UPDATE 2 : here is another thing I tried:

$('#post_show_approval').load('<%= j render "approval" %>');

But it is not working either.

—————

UPDATE 3 : when I try only

$('#post_show_approval').hide();

or

$('#post_show_approval').toggle();

The div does disappear.

But I still did not find a way to make it reappear with its content updated.

—————

UPDATE 4 : also, when I use:

$('#post_show_approval').append('<%= j render(partial: "approval") %>');

The approval partial does load with its updated content... the initial content does not disappear, so every time we click on one of the links, a new line of content stacks up.

—————

However, when I click on one of the three links with the post_approval_link class, the appoval attribute of the post is actually updated to the correct value, but the #post_show_approval div is not reloaded and I need to refresh the page to see the actual changes.

What am I missing in the implementation of this AJAX feature?

Answer 1

The problem was that I was not using the right JavaScript method.

With:

$('#post_show_approval').html('<%= j render(partial: "approval") %>');

It is now working like a charm.