在全局的 ajaxForm 的每个实例中使用 beforeSend 和 complete
Using beforeSend and complete in every instance of ajaxForm globally
我正在尝试对项目中的所有 ajaxForms 使用 beforeSend 和 complete 函数。我想在不在整个项目中添加确切的代码的情况下执行此操作。
我已经能够在每个表单的基础上使用以下代码完成此操作。
beforeSend: function() {
$('.lightbox').append('<div id="page-loader" style="display:block"><div class="page-loader-overlay"></div><div class="page-loader-content-container"><div class="top-corners"><div></div></div><div class="middle"><div class="page-loader-content">Loading...</div></div><div class="bottom-corners"><div></div></div></div></div>');
},
complete: function(xhr) {
$('.lightbox#page-loader').remove()
},
我希望能够将该代码放在一个地方,每次提交 ajaxForm 时都会执行该代码。这可能吗?
如果有人遇到类似的困境,这就是我想出的办法,它似乎可以解决问题。到目前为止我还没有发现任何问题。
// add loading masks on form submits
$( document ).ajaxSend(function() {
$('.lightbox').append('<div id="page-loader" style="display:block; z-index: 999"><div class="page-loader-overlay"></div><div class="page-loader-content-container"><div class="top-corners"><div></div></div><div class="middle"><div class="page-loader-content">Loading...</div></div><div class="bottom-corners"><div></div></div></div></div>');
});
$(document).ajaxSuccess(function() {
$('#page-loader').remove()
});
$(function(){
$.ajaxSetup({
beforeSend: function() {
$('.lightbox').append('<div id="page-loader" style="display:block"><div class="page-loader-overlay"></div><div class="page-loader-content-container"><div class="top-corners"><div></div></div><div class="middle"><div class="page-loader-content">Loading...</div></div><div class="bottom-corners"><div></div></div></div></div>');
},
complete: function(xhr) {
$('.lightbox#page-loader').remove()
},
});
});
请使用ajax设置功能。当您这样做时,它将在所有 ajax 函数中有效。
我正在尝试对项目中的所有 ajaxForms 使用 beforeSend 和 complete 函数。我想在不在整个项目中添加确切的代码的情况下执行此操作。
我已经能够在每个表单的基础上使用以下代码完成此操作。
beforeSend: function() {
$('.lightbox').append('<div id="page-loader" style="display:block"><div class="page-loader-overlay"></div><div class="page-loader-content-container"><div class="top-corners"><div></div></div><div class="middle"><div class="page-loader-content">Loading...</div></div><div class="bottom-corners"><div></div></div></div></div>');
},
complete: function(xhr) {
$('.lightbox#page-loader').remove()
},
我希望能够将该代码放在一个地方,每次提交 ajaxForm 时都会执行该代码。这可能吗?
如果有人遇到类似的困境,这就是我想出的办法,它似乎可以解决问题。到目前为止我还没有发现任何问题。
// add loading masks on form submits
$( document ).ajaxSend(function() {
$('.lightbox').append('<div id="page-loader" style="display:block; z-index: 999"><div class="page-loader-overlay"></div><div class="page-loader-content-container"><div class="top-corners"><div></div></div><div class="middle"><div class="page-loader-content">Loading...</div></div><div class="bottom-corners"><div></div></div></div></div>');
});
$(document).ajaxSuccess(function() {
$('#page-loader').remove()
});
$(function(){
$.ajaxSetup({
beforeSend: function() {
$('.lightbox').append('<div id="page-loader" style="display:block"><div class="page-loader-overlay"></div><div class="page-loader-content-container"><div class="top-corners"><div></div></div><div class="middle"><div class="page-loader-content">Loading...</div></div><div class="bottom-corners"><div></div></div></div></div>');
},
complete: function(xhr) {
$('.lightbox#page-loader').remove()
},
});
});
请使用ajax设置功能。当您这样做时,它将在所有 ajax 函数中有效。