Question

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

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

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

Answer 1

必须提供以下几项工作，包括：remote =＆gt;触发元素上的true标志，控制器类定义中的respond_to：js标志，路由，局部视图，最后实际呈现动态部分的jquery必须包含在单独的.html.js文件中。

以下示例适用于虚构的＆＃34; render_partial_form＆＃34; ＆＃34; someajax＆＃34;的方法控制器。

1）添加：remote =＆gt;触发元素的真正标志
放：remote =＆gt; .html.erb文件（视图）中链接或表单标记上的true标志，表示要触发AJAX调用的元素，如

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

with：remote =＆gt;是的，rails不会自动切换视图，这样就可以运行JQuery。这可以与form_tag，link_tag或其他类型的标记一起使用。

2）添加＆＃34; respond_to：html，：js＆＃34;位于控制器顶部

在控制器的类定义的顶部，您现在必须指定控制器可以响应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语句触发表单的呈现。替换＆＃34; render_partial_form＆＃34;使用控制器方法和部分视图的实际名称。 slideDown效果是可选的＆＃34; eye candy＆＃34;。创建一个扩展名为.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') %>")

Answer 3

它的价值（因为我在从Rails 2到3的应用程序升级中绊倒了它）：你也可以通过添加一个附加返回HTML的事件处理程序来完成它，就像旧的Rails一样用来做2个原型库。

例如，如果你试图接受这个（准备一个runon句子）：

form_remote_tag url: {...}, update: ...

响应以HTML形式出现并自动附加，并将其替换为：

form_tag {...}, remote: true

通过向application.js文件添加一个事件处理程序来完成同样的事情，将内容附加到特定元素，如下所示：

$("#myform").on('ajax:success', function(e, data, status, xhr) {
  $("#container").append(data);
)};

然后......你可能会遇到我遇到的同样的问题，那就是它永远不会触发ajax:success事件！问题在于它在响应中期望JS或文本，但它正在获取HTML。解决这个问题的方法是告诉它响应将是使用表单标记上的属性的HTML：

form_tag {...}, remote: true, data: {type: :html}

一块蛋糕！

Rails 4使用ajax，jquery，：remote =＆gt;呈现部分是，并且respond_to

3 个答案: