Rails 4使用ajax，jquery，：remote => true和response_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标志，控制器的类定义中的response_to：js标志，路线，局部视图，最后是jquery实际呈现动态效果。部分必须包含在单独的.html.js文件中。

以下示例是“ someajax”控制器的虚拟“ render_partial_form”方法的示例。

1）在触发元素上添加：remote = > true标志，将
.remote => true标志放在要触发AJAX调用的元素的.html.erb文件（视图）的链接或表单标记中，喜欢

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

使用：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调用，因此我将控制器的谓词verb路由到了render_partial_form视图。

post 'someajax' => 'someajax#render_partial_form

定义的controller方法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);