无法绑定 ajax:success 到使用 form_for 创建的表单 .... :remote => true

Posted 2023-02-22

【中文标题】无法绑定 ajax:success 到使用 form_for 创建的表单 .... :remote => true

【英文标题】：Unable to bind ajax:success to form created with form_for .... :remote => true

【发布时间】：2012-04-02 03:45:26

【问题描述】：

我正在使用 Rails 3.1.1

我在 haml 视图中有以下内容：

= form_for booking.notes.build, :remote => true do |f|
  = f.text_area(:content)
  = f.hidden_field(:noteable_id)
  = f.hidden_field(:noteable_type)
  = f.submit('Add note')

这会在提交时创建新注释。我的控制器的响应也正确显示在 Chrome 控制台（网络选项卡）中。但我似乎无法抓住回应。

我想在提交后更新页面上的笔记列表。我一直在尝试绑定到 ajax 响应，以便我可以获取响应，但我失败了。例如，我认为这应该有效，但无效：

$('#new_note').bind('ajax:success', function() 
  alert('Hi');
);

但是没有触发警报。我认为这解释了为什么这也不起作用。

 $('#new_note').bind("ajax:success", function(evt, data, status, xhr)
  // Insert response partial into page below the form.
  $(this).parent.append(xhr.responseText);

)

你能告诉我可能出了什么问题吗？

【问题讨论】：

我通过使用带有更新必要对象的代码的 create.js.erb 解决了这个问题。但我宁愿能够获取 ajax 调用，以便在必要时使用 ajax 错误对象。

【参考方案1】：

你试过'ajax:complete'吗？

这里可能出错的其他事情：

状态码并不是真正的“成功”。这会在 jQuery 中触发成功

if ( status >= 200 && status < 300 || status === 304 ) 

或者在呈现表单之前评估事件处理程序。尝试事件委托：

$("body").on('ajax:success', '#new_note', function()...)

（注意，这是新的jQuery语法。如果使用旧的jQuery，请相应调整）

【讨论】：

从 jQuery 1.8 开始，.ajaxSuccess() 方法只能附加到文档。

这不是 ajaxSuccess()。 Rails 仍然会在 data-remote='true' 的元素上触发 'ajax:success' 事件。

这就是“UJS”的东西，对吧？对不起！你的回答很好。

【参考方案2】：

如果你愿意，你可以把你的javascript放在create.js.erb中（这个文件中的代码会在你的浏览器得到响应后执行） 在这个文件中你可以使用 if 语句，比如

<% if @ok %>
  //your code
<% end %>

如果在控制器的操作中将 @ok 设置为 false，则响应将为空！

【参考方案3】：

这通常通过在控制器的视图部分（如果还没有这样做）中创建一个create.js.erb 文件来完成，您可以在其中访问来自创建操作的任何变量，然后您可以在其中呈现您的 html

在您的 create.js.erb 文件中，您可以编写类似的内容

$("#new_note").html('<%= escape_javascript(render partial: "path/to/partial") %>');

在this post阅读更多内容我前段时间写的，它几乎解释了整个流程

【讨论】：

这是“一般情况下”是有争议的。我个人认为这是一种不好的做法，会使您的代码难以维护。 JS 应该转到它所属的资产文件夹。

这与资产无关，这是在 Rails 中默认处理 javascript 处理程序的方式

我要说的是——仅仅因为你可以从控制器返回javascript——并不意味着它是最好的解决方案。我猜是口味问题，我不喜欢这种方法。