调用 ajax:beforeSend 和 ajax:complete 在远程为 true 的任何 link_to 上 ruby on rails答案

【问题标题】：Calling ajax:beforeSend and ajax:complete on any link_to where remote is true ruby on rails调用 ajax:beforeSend 和 ajax:complete 在远程为 true 的任何 link_to 上 ruby on rails
【发布时间】：2018-03-12 04:34:50
【问题描述】：

我正在开发一个使用 Ruby on Rails 作为框架的 web 应用程序。对于所有部分渲染，我们使用了带有远程 true 的 link_to，如this 答案中所述。但是，我想将所有这些链接绑定到等效于 ajax:beforeSend 和 ajax:complete 的东西，以便在 jQuery 中调用页面时实现加载器。到目前为止，我尝试了以下方法，但它不起作用：

$('a').on('ajax:beforeSend', function() {
  alert("BEFORE");
});

$('a').bind('ajax:complete', function() {
  alert("AFTER");
});

因此，如果您有任何其他想法，如果您能告诉我，将不胜感激。提前致谢。

编辑：这是我如何使用 link_to 的示例：

<%= link_to({action: "show_card", controller: "pages", id: activ.id, method: :get, :remote => true}, class: "nav-link p-0") %>

【问题讨论】：

标签： javascript jquery ruby-on-rails ruby ajax

【解决方案1】：

如果您的 ajax 正在工作，那么 ajax 或 loader 不起作用，那么对于加载程序，它应该是这样的

<div id="mySpinner" style="displany:none;">
     <img src="loader.gif">
</div>

$(function () {
    $(document).ajaxStart(function() {
        //$("#mySpinner").show();
         alert("BEFORE");
    }).ajaxStop(function() {
        //$("#mySpinner").hide();
        alert("AFTER");
    });
});

【讨论】：

现在我只是在测试带有警报的 ajax 函数，所以我认为它是没有被调用的 ajax 事件。 @傻瓜开发
如果你的ajax在点击链接后运行，那么#mySpinner div会自动显示
我不认为 start 是由 link_to 触发的，尽管我猜这就是我要说的。

【解决方案2】：

如何在元素onclick 事件上显示加载器并在ajax:success 上隐藏它？

$('a').on('click', function() {
  alert("BEFORE");
});

$('a').ob('ajax:success', function() {
  alert("AFTER");
});

确保同时覆盖ajax:error

您也可以尝试订阅ajax:send 而不是ajax:beforeSend。因为ajax:beforeSend是本地事件，只能在Ajax请求对象as docs say内订阅

【讨论】：

【解决方案3】：

我发现它是什么，当我部分渲染新员工时，我需要将它重新绑定到事件，显然甚至使用

$( window ).load(function() {
  $('a').on('ajax:beforeSend', function() {
  alert("BEFORE");
});

$('a').bind('ajax:complete', function() {
  alert("AFTER");
});
});

在 application.js 文件中不起作用，所以基本上最初绑定它我必须在我的页面底部放置一个脚本标签，一旦它已经呈现了所有内容，它就会绑定所有内容。此外，每当我进行任何远程部分渲染时，我还需要重新绑定 .js.erb 文件中的所有内容，这样它才能真正起作用。我必须有更好的方法，因为这似乎是一个糟糕的解决方案；但是，它是目前的解决方案。

【讨论】：