Rails 3 - link_to to call partial using jquery ajax

Question

I am trying to get a link_to to display a partial via jquery ajax, but can't seem to get it to work (edit: returning blank screen) and I'm not sure what I'm missing. Any help would be appreciated.

I would like to click the link "Preview Widget" and have it display _widget.html.erb in the div preview.

From my understanding the link "Preview Widget" should call the action def preview_widget which calls preview_widget.js.erb which then renders the partial _widget.html.erb in the div.

EDIT: updates link as per Ignatius Reza suggestions

show.html.erb

<%= link_to "Preview Widget", :action => 'preview_widget' , :id => @widget.id, :remote => true %> %>
<div id="preview"></div>

widget_controller.rb

def preview_widget  
    respond_to do | format |  
        format.js {render :layout => false}  
    end
end

preview_widget.js.erb

$( "#preview" ).html( "<%= escape_javascript( render( :partial => "widget", :locals => { :widget => @widget} ) ) %>" );

_widget.html.erb

<% @widget.videos.each do |video| %>
      <h3><a href='#'><%= video.name %></a></h3>
      <div>
        <object height='316' width='540'>
          <embed  style='border: 1px solid #333333;' height='316' width='540' allowfullscreen='true' allowscriptaccess='always' type='application/x-shockwave-flash' src='<%= video.url %>'>
        </object>
      </div>
  <% end %>

routes.rb

match 'preview_widget' => 'widgets#preview_widget'

pagetribe · Answer 1 · 2011-01-24T00:08:32.113

Ok finally got this to work with the following changes.
routes.rb (added member to widget resources)

  resources :widgets do
    member do
      get 'preview_widget'
    end
  end

show.html.erb (changed link_to to match routes)

<%= link_to 'Preview', preview_widget_widget_path(:id => @widget.id),  :remote => true %>

This now shows the partial. I am still not 100% sure what was wrong with the previous code - at least it now works.

score 5 · Answer 2 · answered Jan 22 '11 at 06:02

5

It's not cleared on your question, what you "can't seem to get it to work".. but from what i see in the code you gave.. all seems right, but you miss the actual ajax call..

it could be added by adding :remote => true to the "Preview Widget" link such as :

<%= link_to "Preview Widget", :action => 'preview_widget' , :id => @widget, :remote => true %>

if the default behaviour is enough.. or you could add your own custom ajax call on application.js..

as a note, i don't think setting the :id attribute of "Preview Widget" link to @widget is wise.. as it will put the string representation of widget, which usually will looks like "<Widget:0x12412 ..>" perhaps it would be better to change it to "widget-link-#{@widget.id}"

answered Jan 22 '11 at 06:02

Ignatius Reza

220
1
2
7

Thanks. I have added the :remote => true to the code and fixed widget-link-#{@widget.id}. The link is now "http://localhost:3000/preview_widget?id=1&remote=true" when I click on it I get blank page? – pagetribe Jan 23 '11 at 03:38
which version of rails did you used? i'm assuming that you used 3.* when i suggest adding ":remote => true".. as starting in 3.0, rails used unobtrusive javascipt approach to handle all javascript related feature.. if you're using 2.*.. then you need to change link_to to remote_link_to, and optionally remove the ":remote => true".. – Ignatius Reza Jan 24 '11 at 17:00

score 4 · Answer 3 · answered Sep 20 '12 at 19:26

I’ve a similar problem that brought me to this threat, so I thought sharing my solution here might be helpful to anybody.

With :remote => true I got an normal HTTP Request to http://localhost:3000/info/about?remote=true instead of the wanted AJAX Request to http://localhost:3000/info/about

The fix was easy but hard to find!

In my HAML View:

WRONG Code that triggers HTTP Request

= link_to( image_tag("icons/information.png", :title => t('menu.info')), :controller => "info", :action => "about", :remote => true )

OK-Code that triggers AJAX Request

= link_to( image_tag("icons/information.png", :title => t('menu.info')), {:controller => "info", :action => "about"}, :remote => true )

The only difference is {curly brackets}!

Funny though is that with the AJAX Request I get info/about.html rendered, without the layout file. Which isn’t a partial but is close to what Jan wanted. I was expecting info/about.js.erb to be rendered.

In InfoController

  def about
    respond_to do |format|
      format.html # renders ‘views/info/about.html.erb’ inside layout template on HTTP Request
      format.js# renders ‘views/info/about.html.erb’, without layout
    end
  end

-

  def about
    respond_to do |format|
      format.html # => ‘views/info/about.html.erb’ inside layout template on HTTP Request
      format.js {render 'about.js'} # => renders ‘views/info/about.js.erb’
    end
  end

Rails 3 - link_to to call partial using jquery ajax

3 Answers3

Linked