轨道4渲染的部分使用Ajax，jQuery的，：远程=＆GT;真的，的respond_to [英] Rails 4 rendering a partial with ajax, jquery, :remote => true, and respond_to

问题描述

这似乎是动态呈现页面与AJAX响应提交的表单是常见的。没有其他类似的问题都集中围绕如何做到这一点的一般方式。

It seems like rendering a page dynamically with AJAX in response to a submitted form is common. None of the other similar questions are focused around how to do this in a general way.

最好的博客中，我能找到关于这个问题在这里：<一href="http://www.gotealeaf.com/blog/the-detailed-guide-on-how-ajax-works-with-ruby-on-rails">http://www.gotealeaf.com/blog/the-detailed-guide-on-how-ajax-works-with-ruby-on-rails

The best blog post I could find on the subject was here: http://www.gotealeaf.com/blog/the-detailed-guide-on-how-ajax-works-with-ruby-on-rails

问题：我如何code我的Rails应用程序，这样我可以触发局部视图通过AJAX加载，当我提交表单或点击一个链接

The question: How do I code my rails application so that I can trigger a partial view to load via AJAX when I submit a form or click a link?

推荐答案

几件事情必须是present这个工作，其中包括：远程=>真正触发元素旗，respond_to代码：JS标志的控制器的类定义，途径，局部视图，最后jquery的实际呈现一个动态部分必须包含在一个单独的.html.js文件。

下面的例子是对someajax控制器的虚拟render_partial_form的方法。

Several things must be present for this to work, including the :remote => true flag on the triggering element, the respond_to :js flag in the controller's class definition, the route, the partial view, and lastly the jquery to actually render a dynamic partial must be contained in a separate .html.js file.

Examples below are for a fictitious "render_partial_form" method of the "someajax" controller.

1）添加：远程=> true标志来触发元素
放：远程=>真正的标志，要触发的AJAX调用，如

1) Add a :remote => true flag to the triggering element
put the :remote => true flag on the link or form tag in your .html.erb file (view) for the element that you want to trigger the AJAX call, like

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

有：远程=>真正的，铁轨也不会自动切换的观点，这使得jQuery来运行，而不是。这可以用来与的form_tag，一个link_tag，或其它类型的标签。

with :remote => true, rails will not automatically switch views, which allows the JQuery to be run instead. This can be used with a form_tag, a link_tag, or other types of tags.

2）添加respond_to代码：HTML，：JS在控制器的顶部

在你的控制器的类定义的顶部，你现在必须指定该控制器可以给JavaScript反应以及HTML：

2) Add "respond_to :html, :js" at the top of the controller

At the top of your controller's class definition, you must now specify that the controller can respond to javascript as well as html:

class SomeajaxController < ApplicationController
   respond_to :html, :js

   ...

   def render_partial_form
      @array_from_controller = Array.new

      ...

   end
end

在这个例子中，有一个从控制器到视图传递一个变量：称为选择列表中选择一个数组 @array_from_controller

In this example, there's a variable being passed from the controller into the view: an array of select list options called @array_from_controller.

3）路线的HTTP动词到控制器的方法

因为我想一个提交的表单来触发AJAX调用，我路由后的动词我的控制器到render_partial_form视图。

3) Route the http verb to your controller's method

Since I wanted a POSTed form to trigger the AJAX call, I routed the post verb for my controller to the render_partial_form view.

post 'someajax' => 'someajax#render_partial_form

按高清render_partial_form 定义的控制器方法与视图的名称相匹配， _render_partial_form.html.erb 等等没有必要调用来自控制器的渲染操作。

The controller method defined by def render_partial_form matches with the name of the view, _render_partial_form.html.erb so there is no need to call a render action from the controller.

4）创建的局部视图
局部视图应该具有相同的名称作为您的控制器的方法，并开始与下划线： _render_partial_form.html.erb

4) Create the partial view
The partial view should have the same name as your controller method and begin with an underscore: _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的文件

5) Create the JQuery file

JQuery的陈述引发的形式的呈现。替换render_partial_form与您的控制器方法和局部视图的实际名称。该了slideDown效果是可选的眼睛糖果。 创建具有.js.erb扩展，和相同的名称作为控制器的文件：

render_partial_form.js.erb

JQuery statements trigger the form's rendering. Replace "render_partial_form" with the actual name of your controller method and partial view. The slideDown effect is optional "eye candy". Create a file with a .js.erb extension, and the same name as your controller:

render_partial_form.js.erb

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

这篇关于轨道4渲染的部分使用Ajax，jQuery的，：远程=＆GT;真的，的respond_to的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！