我想显示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。我不知道这里出了什么问题。
请帮助大家。
最佳答案
使用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，以获取更多信息以查找正确的表单。关于javascript - Ajax加载程序镜像不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19972087/