2017-02-03 135 views
1

在我的Rails 5/5 Turbolinks应用程序,我想提出从一个表单提交到一个div产生的HTML。Turbolinks 5 AJAX POST

的形式是

= form_for(user) do |f| 

标准导轨形式。

成功提交后重定向被发送到浏览器

respond_to do |format| 
     if @user.save 
     format.html { redirect_to @user, notice: 'User was created.' } 

当我通过AJAX提交表单:

$(".dialog").on("submit", "form", function(e){ 
e.preventDefault(); 
$.ajax({ 
    url: $(this).attr("action"), 
    method: "POST", 
    data: $(this).serialize() 
}).done(function(data) { 
    $(".dialog .canvas").html(data); 
}); 
}); 

的距离被提交和服务器的redirect_to的声明重定向浏览器新用户的页面。

重定向使turbolinks与浏览器被重定向到页面的内容替换身体。而是我想要替换特定的div $(“。dialog .canvas”)。html(data)。我怎样才能防止turbolinks的这种行为。

+0

您可以将您的控制器代码?我的猜测是,你不应该重定向,而是提出对请求的响应。 –

+0

观看此视频,它会帮助你。 http://railscasts.com/episodes/205-unobtrusive-javascript – WaKeMaTTa

回答

0

如果我明白你正确地做什么,你可以使从服务器HTML和使用从服务器上生成的JavaScript更新div元素。

# HTML form 
<%= form_for @user, remote: true do |f| %> 
    ... 
<% end %> 

# app/controllers/users_controller.rb 
def create 
    @user = User.create(user_params) 
    # renders create.js.erb automatically with AJAX request (remote: true) 
end 

# app/views/users/create.js.erb 
$("#my-div").html("<%=j render(partial: 'users/user', locals: { user: @user }) %>"); 

请注意,在您的js.erb文件中,您可以使用Ruby以及JavaScript;我发现它非常适用于构建HTML和动态内容并将其传回客户端以作为JavaScript运行。

人们可以讨论服务器生成的JavaScript的优点/缺点,但我是完全没有意见的,而且运作良好。否则,你必须保持服务器/客户端模板同步,这真的很麻烦;或者您必须在客户端执行所有模板,并且只使用您的服务器进行JSON。

我只是不明白分手的客户机/服务器方式的未来,虽然有很多人声称谁这一切是怎么回事的方向。看看弹出的大量JavaScript MVC框架。

0

随着turbolinks 5.0.1,在控制器中添加选项turbolinks: false format.html { redirect_to @user, notice: 'User was created.', turbolinks: false }

其他解决方案(不太好,因为它不会让你更新到Rails的5.1)是坚持turbolinks 2.5.3 。

有可能是通过使用format.js甚至format.json其他解决方案,请检查:https://github.com/vtamara/turbolinks_prob50