Rails 3 - link_to 使用 jquery ajax 调用部分

Posted 2023-05-09

【中文标题】Rails 3 - link_to 使用 jquery ajax 调用部分

【英文标题】：Rails 3 - link_to to call partial using jquery ajax

【发布时间】：2011-06-13 13:49:21

【问题描述】：

我正在尝试通过 jquery ajax 让 link_to 显示部分内容，但似乎无法使其正常工作（编辑：返回空白屏幕），我不确定我要做什么我失踪了。任何帮助将不胜感激。

我想点击链接“Preview Widget”并让它在 preview div 中显示 _widget.html.erb。

据我了解，“预览小部件”链接应该调用动作 def preview_widget 调用 preview_widget.js.erb 然后呈现部分 _widget.html .erb 在 div 中。

编辑：根据 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'

【参考方案1】：

好的，终于让它与以下更改一起使用。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% 确定之前的代码出了什么问题 - 至少它现在可以工作了。

【参考方案2】：

您的问题尚未明确，您“似乎无法使其正常工作”..但是从我在您提供的代码中看到的内容..一切似乎都很好，但是您错过了实际的 ajax 调用..

可以通过将 :remote => true 添加到“Preview Widget”链接来添加，例如：

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

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

作为一个注释，我不认为将“预览小部件”链接的 :id 属性设置为@widget 是明智的。因为它会放置小部件的字符串表示形式，通常看起来像“<0x12412 ..>

【讨论】：

&

【参考方案3】：

我有一个类似的问题让我遇到了这种威胁，所以我认为在这里分享我的解决方案可能对任何人都有帮助。

使用: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 )

触发AJAX请求的OK-Code

= 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