CODEWITHSUNDEEP
ruby-on-railsajax
jedi
jedi

Reputation: 2198

Rails Ajax - render different partial

I would like to submit a post via Ajax call and make the post disappear from the page. I can't figure out how to wire it up all together. I have a page with the list of pending approvals and after I click on 'Approve' I want the post to disappear (I think I need to re-render all pending approval posts). Here's my code:

static/_pending_approval.html.erb

%= link_to 'Approve', approve_post_path(pending_approval), class: 'btn btn-success btn-block', id: "approve_#{pending_approval.id }", remote: true %>

posts_controller.rb

def approve
    authorize @post
    respond_to do |format|
      if @post.approved!
        format.html { redirect_to root_path, notice: 'Time entry has been approved' }
        format.js 
      else
        format.html { render action: "index" }
      end
    end
  end

And here's my problem. I don't know how to make the post disappear without full page reload. I think I should re-render the partial 'static/_pending_approval' that I have defined in 'static/_admin.html.erb' that renders the list of posts. It looks like this:

'static/_admin.html.erb'

<div class="pending-homepage row">
  <h2>Items Pending Your Approval</h2>
  <hr>
  <%= render partial: 'pending_approval', locals: { pending_approvals: @pending_approvals } %>
</div>

'static/_pending_approval.html.erb'

<% pending_approvals.each do |pending_approval| %>
  <div class="homepage-block col-md-3">
    <h4>
      <%= pending_approval.user.full_name %>
    </h4>
    ...
    ...
    ...
<% end %>

I have 'posts/approve.js.erb' file, which looks like this:

$('.pending-homepage').html('<%= escape_javascript render ????? %>');

How can I get this to work?

Upvotes: 1

Views: 85

Answers (1)

Sebasti&#225;n Palma
Sebasti&#225;n Palma

Reputation: 33420

You could add an identifier to the .homepage-block div, then hide it.

<% pending_approvals.each do |pending_approval| %>
  <div class="homepage-block col-md-3 pending-approval-"<%= pending_approval.id %>">
    <h4>
      <%= pending_approval.user.full_name %>
    </h4>
    ...
<% end %>

In the js.erb file:

$(".pending-approval-"<%= @post.id %>").hide()

Upvotes: 1

Related Questions