Rails 3 - 使用jquery ajax调用partial的link_to

时间:2011-01-22 05:40:07

标签: jquery ruby-on-rails ruby-on-rails-3

我正在尝试使用 link_to 来显示部分通过jquery ajax,但似乎无法让它工作(编辑:返回空白屏幕),我不知道我是什么我失踪了。任何帮助将不胜感激。

我想点击“预览窗口小部件”链接,并在div 预览中显示 _widget.html.erb

根据我的理解,“预览窗口小部件”链接应调用 def preview_widget 操作,该操作调用 preview_widget.js.erb ,然后呈现部分 _widget.html div中的.erb

编辑根据Ignatius Reza建议更新链接

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'

3 个答案:

答案 0 :(得分:6)

好的,最后通过以下更改来实现这一点 routes.rb (向窗口小部件资源添加成员)

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

show.html.erb (更改了link_to以匹配路线)

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

现在显示部分。我仍然不能100%确定以前的代码出了什么问题 - 至少它现在有用了。

答案 1 :(得分:5)

你的问题没有清除,你“似乎无法让它工作”......但是从我给你的代码中看到的......一切似乎都是正确的,但你错过了实际的ajax调用..

可以添加:remote =&gt;对于“预览窗口小部件”链接,例如:

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

如果默认行为足够..或者您可以在application.js上添加自己的自定义ajax调用..

作为一个注释,我不认为设置“预览窗口小部件”链接到@widget的:id属性是明智的...因为它将放置窗口小部件的字符串表示,通常看起来像“&lt; Widget: 0x12412 ..&gt;“也许最好把它改成“widget-link - #{@ widget.id}”

答案 2 :(得分:4)

我有类似的问题让我受到这种威胁,所以我认为在这里分享我的解决方案对任何人都有帮助。

使用:remote => true我获得了http://localhost:3000/info/about?remote=true的正常HTTP请求,而不是http://localhost:3000/info/about所需的AJAX请求

修复很简单但很难找到!

在我的HAML视图中

触发HTTP请求的错误代码

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

OK-Code触发AJAX请求

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

唯一的区别是{花括号}!

有趣的是,在AJAX请求中,我得到了info/about.html,没有布局文件。这不是偏袒的,但接近于Jan所希望的。 我期待渲染info/about.js.erb

在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