render partial on click

Question

I would like to call partials on some standard operations. I am using this method for calling the partial:

 %li= link_to 'Delete Event', 'javascript:void(0);', :class => 'alert tiny button', :data => {'reveal-id' => :RevealDelete}
= render 'layouts/reveal_delete', :item => event_display(@event.event), :resource => @event

Then in my partial,

#RevealDelete.reveal-modal


 %a.close-reveal-modal ×
  %h3= "Delete #{item}"
  %p Are you sure you want to delete this?
  =link_to "Delete #{item}", resource, :method => :delete, :remote => :true, :confirm => resource, :class => 'button close-reveal-modal'
  %a.button.alert.close-reveal-modal Cancel

How can I have this has as something like:

link_to 'Delete', '#', :partial => 'layouts/delete', :remote => :true? 

so that I only render that partial when clicked and not when the page loads?

Solution 1

You can do that with javascript like:

<%= link_to "Delete", delete_content_path, :remote => true %>

The action in your corresponding controller then will be this:

My Controller:

def delete_content
  respond_to do |format|               
    format.js
  end        
end 

Then you can create the delete_content.js.erb inside your correct directory of the link and there you put the following code:

delete_content.js.erb

$('#div_id').html("<%= render :partial => 'my_partial' %>");

Then in your view:

delete_content.html.erb

<div id = "div_id">
#this div is html div that will render your partial

</div>

Don't forget to put your partial _my_partial.html.erb in the same folder.

Solution 2

To add to the accepted answer, I only got it to work after changing the js portion to the following:

$('#div_id').html("<%= escape_javascript(render :partial => 'my_partial') %>");

Without the escape_javascript it was just rendering the partial in the background and not updating the view.

Comments

[sanny Sin]

just for notice, format.js will use partial like action_method_name.js.erb. SO in case you'll need to render 2 partials, you need to specify name of another partials

[Boss Nass]

im getting this error undefined local variable or method delete_content_path' for #<#<Class:0x007fd6972c1a58>:0x007fd6972c9320>` do i need create a route for this to work?

[Boss Nass]

added the route, to my routes.rb though it doesnt appear to be rendering anything :S

[Boss Nass]

seems that the js file doesnt seem to be actioning anything

[My God]

Please note that you should have some contents in file _my_partial.html.erb so that the div should display within it.

[Boss Nass]

I have content in my partial, its the rendering from the jquery that doesnt appear to be working

[Boss Nass]

i think its something relating to this line $('#RevealDelete').html("<%= render :partial => 'reveal_delete' %>");

[My God]

So do you have _reveal_delete.html.erb with the contents in it? And also do you have div with <div id = "RevealDelete"></div> in your file where you defined your link_to? In my above code link_to must belong to delete_content.html.erb because there only you are rendering. Make sure that all.

[Boss Nass]

i have all of those things, still no go

[oneirois]

What about if the person clicks New Tab or New Window on the partial. If you have the respond to in place the new tab will have a blank page which is ok. But wouldn't it be better to prevent this from happening to not make this a link_to and make the onclick trigger the partial rendering?

[auto]

I have the same question as the OP, tried this solution and got the same error. This solution does not work or fails to address whatever is causing the undefined local variable or method error. @BossNass, did you ever find a proper solution or what was causing the error?