1

我的项目有很多 ajax 链接，我可能会为每个 ajax 请求实现微调器。我在我的 application.js 中全局使用了 ajaxStart 和 ajaxStop 回调来处理所有 ajax 请求。

我的 application.js

$(document).ready(function() {

   $(this).ajaxStart(function(){
     $("#ajax_loader").modal('show');
   })
   .ajaxStop(function(){
     $("#ajax_loader").modal("hide");
   });

});

但是有些页面有很多快速的小型 ajax 调用，并且某些具有属性的 ajax 链接不需要微调器 。data-spinner = false

我在网上旅行并找到了一些不符合我要求的解决方案（解除绑定）。例如

index.html.erb

<script type="text/javascript" charset="utf-8">
   $(document).ready(function() {
     $(this).unbind("ajaxStart ajaxStop")
   });
</script>

<%= link_to "show", xxx, :remote => true, "data-spinner" => true %>

<%= link_to "update", xxx, :remote => true, "data-spinner" => false %>

<%= link_to "remove", xxx, :remote => true, "data-spinner" => false %>

unbind将禁用页面中所有可用的 ajax 调用的微调器。

appriciate 任何想法或解决方案？

提前致谢。

4

1 回答 1

2

您可以在jquery-ujs中将 ajax:before 绑定到所需的元素。看这篇文章

您可以像这样定位具有数据微调器的元素

$('a[data-remote=true][data-spinner=true]').on('ajax:before', function(){
  $("#ajax_loader").modal('show');
})

$('a[data-remote=true][data-spinner=true]').on('ajax:complete', function(){
  $("#ajax_loader").modal("hide");
})

希望这可以帮助。

更新：

如果它具有该属性，您可以检查所有remote => 'true'链接。data-spinner

$('a[data-remote=true]').on('ajax:before', function(){

   var nospinner = false;

   if($(this).attr('data-spinner') != undefined && $(this).attr('data-spinner') == "false"){
      nospinner = true;
    }

    if(nospinner==false) {
      $("#ajax_loader").modal('show');
    }

})
于 2013-05-22T14:51:41.533 回答