Turbolinks 5 ajax帖子

Question

在我的Rails5/ Turbolinks 5应用程序中，我希望将表单提交产生的html放入div。

该表单是一个

= form_for(user) do |f|

标准rails表单。

成功提交后，会向浏览器发送一个重定向

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);
 });
});

from被提交，服务器的redirect_to语句将浏览器重定向到新用户的页面。

重定向会导致turbolinks用浏览器重定向到的页面内容替换正文。相反，我想替换一个特定的div $(".dialog .canvas“)数据(.html)。我怎样才能防止turbolink的这种行为。

Answer 1

如果我正确理解您要做的事情，您可以从服务器呈现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；我发现它对于构建超文本标记语言和动态内容并将其传递回客户机以作为JavaScript运行非常有用。

人们可以讨论服务器生成的JavaScript的优缺点，但我认为它完全没有问题，而且工作得很好。否则，您必须保持服务器/客户端模板的同步，这真的很混乱；或者您必须在客户端完成所有模板，并且只将服务器用于JSON。

我只是不认为未来会以这种方式拆分客户机/服务器，尽管有很多人声称这是一切发展的方向。只要看看大量的JavaScript MVC框架就知道了。

Answer 2

对于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