Rails 4使用ajax,jquery,:remote => true和respond_to呈现部分

Question

看起来像使用AJAX动态呈现页面以响应提交的表单是常见的.其他类似问题都没有集中在如何以一般方式执行此操作.

我能找到的关于这个主题的最好的博客文章是:http://www.gotealeaf.com/blog/the-detailed-guide-on-how-ajax-works-with-ruby-on-rails

问题:我如何对rails应用程序进行编码,以便在提交表单或单击链接时通过AJAX触发部分视图加载？

Answer 1

必须有几件事情可以解决这个问题,包括:触发元素上的:remote => true标志,控制器类定义中的respond_to:js标志,路径,局部视图,以及最后实际呈现动态的jquery partial必须包含在单独的.html.js文件中.

下面的示例是"someajax"控制器的虚构"render_partial_form"方法.

1)在触发元素中添加:remote => true标志,
在你的.html.erb文件(视图)中的链接或表单标签上放置:remote => true标志,用于触发AJAX调用的元素,喜欢

<%= form_tag("/someajax", method: 'post', :remote => true) do %>

with:remote => true,rails不会自动切换视图,这样就可以运行JQuery.这可以与form_tag,link_tag或其他类型的标记一起使用.

2)在控制器

的顶部添加"respond_to:html,:js"在控制器的类定义的顶部,您现在必须指定控制器可以响应javascript以及html:

class SomeajaxController < ApplicationController
   respond_to :html, :js

   ...

   def render_partial_form
      @array_from_controller = Array.new

      ...

   end
end

在这个例子中,有一个变量从控制器传递到视图中:一个名为选择列表选项的数组@array_from_controller.

3)将http动词路由到控制器的方法

因为我想要一个POSTed表单来触发AJAX调用,所以我将我的控制器的post动词路由到render_partial_form视图.

post 'someajax' => 'someajax#render_partial_form

定义的控制器方法def render_partial_form与视图名称匹配,_render_partial_form.html.erb因此无需从控制器调用渲染操作.

4)创建局部视图
局部视图应与控制器方法同名,并以下划线开头:_render_partial_form.html.erb

<h3>Here is the partial form</h3>

<%= form_tag("/next_step", method: 'post') do %>
    <%= label_tag(:data, "Some options: ") %>
    <%= select_tag(:data, options_for_select(@array_from_controller.transpose[0].collect)) %>
    <%= submit_tag('Next') %>
<% end %>

5)创建JQuery文件

JQuery语句触发表单的呈现.将"render_partial_form"替换为控制器方法和部分视图的实际名称.slideDown效果是可选的"眼睛糖果".创建一个扩展名为.js.erb且与控制器名称相同的文件:

render_partial_form.js.erb

$('#render_partial_form').html("<%= escape_javascript (render partial: 'render_partial_form') %>");
$('#render_partial_form').slideDown(350);

Answer 2

您应该使用JS视图(具有"js.erb"扩展名),例如"create.js.erb"用于创建控制器操作.然后,添加format.js到respond_to do |format| ... end块.并将remote:true参数添加到表单中.注意:js.erb应包含您需要包含的Javascript代码,例如:

$("tbody#items").append("<%= j render(partial: 'your_partial_path') %>")