Question

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

我的js文件： $（ “＃加载密码”），隐藏（）; $（ “＃加载地址”），隐藏（）; $（ “＃加载”）隐藏（）;

    $(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。我不知道这里有什么不对。

请帮助。

Answer 1

使用ajaxsend，您将这些函数绑定到每个AJAX调用，如in the jQuery documentation所述：

每当要发送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来发现哪个呼叫正在发送数据，但在您的情况下，只要我理解它就不会起作用，因为它们都是在同一条路线上。请查看at the settings object以获取更多信息，以找到正确的表单。

Answer 2

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

   $(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加载器图像。请记住每个表单下都有div类和我的div ajax loader div就在这个div里面。现在它摇摆不定。

Ajax加载程序映像无法正常工作

2 个答案: