Question

我正在使用Ruby on Rails作为框架开发webapp。对于所有部分渲染，我们使用了link_to和remote true，如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") %>

Answer 1

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

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

Answer 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

中订阅

Answer 3

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

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

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

在application.js文件中没有工作，所以基本上最初绑定它我必须在我的页面底部放置一个脚本标记，一旦它已经呈现了所有内容，就会绑定所有内容。此外，任何时候我做任何远程部分渲染，我还需要重新绑定.js.erb文件中的所有内容，这样它实际上是有效的。我必须有一个更好的方法，因为这似乎是一个糟糕的解决方案;然而，它现在是一个解决方案。

调用ajax：beforeSend和ajax：在任何link_to上完成，其中remote是真正的ruby on rails

3 个答案: