[英]Rails 4 rendering a partial with ajax, jquery, :remote => true, and respond_to
用AJAX响应提交的表单动态呈现页面似乎很常见。 其他类似问题都没有集中于如何以一般方式进行此操作。
我可以找到的关于该主题的最佳博客文章在这里: http : //www.gotealeaf.com/blog/the-detailed-guide-on-how-ajax-works-with-ruby-on-rails
问题:如何编写Rails应用程序的代码,以便在提交表单或单击链接时可以触发通过AJAX加载的局部视图?
要使此功能起作用,必须存在一些东西,包括触发元素上的: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调用,所以我将控制器的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);
您应该使用JS视图(具有“ js.erb”扩展名),例如“ create.js.erb”之类的内容来创建控制器动作。 然后,将format.js
添加到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升级到Rails 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。 解决该问题的方法是使用form标记上的属性告诉它响应将是HTML:
form_tag {...}, remote: true, data: {type: :html}
小菜一碟!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.