0

我想显示 ajax 加载器图像。在我的 rails 应用程序中，我在一个页面中有三种不同的表单。所有这些页面都是 ajaxified 并且它们正在执行相同的控制器操作。我添加了 ajax 加载器图像但是当我按下一个表单时图像以页面中的所有形式显示。

我的 js 文件： $("#loading-password").hide(); $("#loading-address").hide(); $("#loading").hide();

    $(document).bind("ajaxSend", function(){

      $("#loading").show();
      $("#loading-password").hide();
      $("#loading-address").hide();

      }).bind("ajaxComplete", function(){
       $("#loading").fadeOut("slow");

});


     $(document).bind("ajaxSend", function(){

       $("#loading-password").show();
       $("#loading-address").hide();
       $("#loading").hide();


     }).bind("ajaxComplete", function(){
       $("#loading-password").fadeOut("slow");


});



   $(document).bind("ajaxSend", function(){
    $("#loading-address").show();
    $("#loading-password").hide();
    $("#loading").hide();

    }).bind("ajaxComplete", function(){
     $("#loading-address").fadeOut("slow");

   });

我有三种不同的 div 三种形式。我不知道这里有什么问题。

请帮助伙计们。

4

2 回答 2

0

好的，然后我解决了这个问题。

   $(document).ready(function(){
$("#loading-password").hide();
$("#loading-address").hide();
$("#loading").hide();

});



$('#main-info').submit( function() {
$(this).children(".main-div").children("#loading").show();
});
$('#edit-password').submit( function() {
$(this).children(".main-div").children("#loading-password").show();
});
$('#edit-address').submit( function() {
$(this).children(".main-div").children("#loading-address").show();
});

在这里，我已经完全删除了 ajax 事件并选择表单提交事件。现在，当我提交将分别触发 ajax 加载器图像的表单时。请记住，每个表单下都有带有 main-div 类的 div 和我的 ajax 加载器 div在这个 div 里面。现在它在摇摆。

于 2013-11-14T10:54:50.090 回答
0

如jQuery 文档中所述，您将ajaxsend这些函数绑定到每个 AJAX 调用：

每当即将发送 Ajax 请求时，jQuery 都会触发 ajaxSend 事件。此时会执行已使用 .ajaxSend() 方法注册的所有处理程序。

基本上你为每个ajaxsend事件绑定了 3 个函数。为了做你想做的事，我建议如下：

$(document).bind("ajaxSend", function(){
    $("#loading").hide();
    $("#loading-password").hide();
    $("#loading-address").hide();

  if ( settings.data === "first_form_data" ) {
    $("#loading").show();

  } else if (settings.data === "second_form_data"){

    $("#loading-password").show();

  } else if( settings.data === "third_form_data"){

    $("#loading-address").show();
  }
});

$(document).bind("ajaxComplete", function(){
  if ( settings.data === "first_form_data" ) {
    $("#loading").fadeOut("slow");

  } else if (settings.data === "second_form_data"){

    $("#loading-password").fadeOut("slow");

  } else if( settings.data === "third_form_data"){

    $("#loading-address").fadeOut("slow");
  }
});

基本上我将单个函数绑定到事件并检查数据以了解已提交的表单。同样的事情也与ajaxComplete.

在ajaxSend文档页面中，他们使用 URL 来发现哪个调用正在发送数据，但在你的情况下，只要我理解它就不会起作用，因为它们都在同一条路线上。查看对象以settings获取更多信息以发现正确的形式。

于 2013-11-14T08:10:28.987 回答