RAILS 6 Ajax 事件和 Ajax Spinner

Posted 2023-02-19

【中文标题】RAILS 6 Ajax 事件和 Ajax Spinner

【英文标题】：RAILS 6 Ajax events and Ajax Spinner

【发布时间】：2020-11-27 14:11:03

【问题描述】：

我正在尝试在每个 Ajax 请求上显示加载动画/微调器

我的应用程序.js

$(document).on("turbolinks:load", function() 
  window.addAjaxLoaderHandler();
);

window.addAjaxLoaderHandler = function() 
  $(document).on('ajax:send', function() 
    $('#ajax-loader').show();
  );

  $(document).on('ajax:complete', function()
    setTimeout(() => $('#ajax-loader').hide();, 100);
  );

这非常有效，直到我通过 AJAX 加载远程表单。如果我提交新加载的表单，ajax:send 会触发，但在完成后（没有任何错误）ajax:complete 不会（微调器不会被隐藏）。

问题似乎是我使用 ajax 调用删除了加载的表单。

我可以做些什么来完成这项工作？

我只是想在发送信息后点击链接、加载表单并删除表单。

更新

我的 application.html.haml（我使用 HAML，因此语法是相应的，所以 #... 表示 <div id="...">#all indented code lines#</div>）

#main
  = yield

#ajax-loader

表单将像这样加载：

$('#main').append('<%= j(render(:partial => 'new', :locals => :model => @model)) %>');

问题是#ajax-loader没有隐藏，提交表单后仍然显示。

我认为问题在于，我删除了 AJAX 调用触发元素。但我希望，因为我将监听器绑定到document，它仍然会触发。

当然，在这种情况下我只能做$('#ajax-loader').hide();，但我想了解为什么ajax:complete 没有被解雇。

【问题讨论】：

#ajax-loader 是表单的一部分吗？您能否提供 HTML 部分的 sn-p 或表单删除代码？

嗨@PedroLudovicoBozzini，我更新了我的问题。我的问题是，不是加载器消失了，而是它仍在显示

【参考方案1】：

我猜你回答了你自己的问题：问题是当你删除表单时，事件监听器也会这样做。

您可以使用以下方法检查哪些事件侦听器仍适用于您的文档对象 getEventListeners(document)。在微调器被触发并拒绝隐藏后在您的控制台上尝试此操作。

*edit：这是一个 Google Chrome 功能，可能无法在其他浏览器中使用，尽管它们中的大多数都有方法来检查节点上的侦听器

我想到了这些解决方法：

a) 每次删除表单时重新绑定侦听器；

b) 将侦听器附加到 window 对象而不是 document

c) 如果您使用 jQuery Ajax，您可以使用 beforeSend 和 complete 属性来显示和隐藏微调器而不是事件。如果不是 jQuery Ajax，可能有类似的方法可以实现相同的行为。

【讨论】：

感谢您的回复。 a）这似乎不是一个好的解决方案，手动隐藏加载器更容易 b）我也尝试过，但仍然是同样的问题。 c) 对于 Rails 6.0，不鼓励使用 jQuery 处理程序。并且建议使用 Ajax-events

我尝试了 getEventListeners。并且监听器仍然存在，即使在表单被移除之后。

也许这会有所帮助：github.com/rails/jquery-ujs/issues/223