Rails 4使用ajax,jquery,:remote => true和respond_to呈现部分
看起来像使用AJAX动态渲染页面以响应提交的表单很常见。 其他类似问题都没有集中在如何以一般方式执行此操作。
我能找到的关于这个主题的最好的博客文章是: http : //www.gotealeaf.com/blog/the-detailed-guide-on-how-ajax-works-with-ruby-on-rails
问题:我如何对rails应用程序进行编码,以便在提交表单或单击链接时通过AJAX触发部分视图加载?
为此,必须要做好几件事,包括:触发元素上的: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
的选择列表选项@array_from_controller
。
3)将http动词路由到控制器的方法
因为我想要一个POSTed表单来触发AJAX调用,所以我将我的控制器的post动词路由到了render_partial_form视图。
post 'someajax' => 'someajax#render_partial_form
def render_partial_form
定义的控制器方法与视图名称def render_partial_form
匹配,因此无需从控制器调用渲染操作。
4)创建局部视图
部分视图应与控制器方法具有相同的名称,并以下划线开头: _render_partial_form.html.erb
Here is the partial form
<%= 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);
您应该使用JS视图(具有“js.erb”扩展名),例如“create.js.erb”用于创建控制器操作。 然后,将format.js
添加到respond_to do |format| ... end
respond_to do |format| ... end
。 并将remote:true参数添加到表单中。 注意:js.erb应包含您需要包含的Javascript代码,例如:
$("tbody#items").append("<%= j render(partial: 'your_partial_path') %>")
对于它的价值(因为我在从Rails 2到3的应用程序升级中绊倒了它):你也可以通过添加一个附加返回HTML的事件处理程序来完成它,就像旧的Rails 2原型库一样。
例如,如果你想尝试这个(准备一个runon句子):
form_remote_tag url: {...}, update: ...
响应以HTMLforms出现并自动附加,并将其替换为:
form_tag {...}, remote: true
通过向application.js
文件添加一个事件处理程序来完成同样的事情,将内容附加到特定元素,如下所示:
$("#myform").on('ajax:success', function(e, data, status, xhr) { $("#container").append(data); )};
然后……你可能会遇到同样的问题,那就是它永远不会激发ajax:success
事件! 问题是它在响应中期望JS或文本,但它正在获取HTML。 解决这个问题的方法是告诉它响应将是使用form标签上的属性的HTML:
form_tag {...}, remote: true, data: {type: :html}
小菜一碟!