Использование beforeSend и завершение в каждом экземпляре ajaxForm глобально - PullRequest
Новая
       16

Использование beforeSend и завершение в каждом экземпляре ajaxForm глобально

0 голосов
/ 21 октября 2019

Я пытаюсь использовать функции beforeSend и complete для всех ajaxForms в проекте. Я хотел бы сделать это, не добавляя точный битовый код во всем проекте.

Я смог сделать это с помощью приведенного ниже кода для каждой формы. 

           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. Это возможно?

Ответы [ 2 ]

0 голосов
/ 22 октября 2019 
$(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()
        },  
    });
});

Пожалуйста, используйте функцию ajaxsetup. Когда вы сделаете это таким образом, он будет действителен во всех функциях AJAX.

Referrer: https://api.jquery.com/jQuery.ajaxSetup/

0 голосов
/ 21 октября 2019

Если кто-то сталкивается с подобной дилеммой, это то, что я придумал, и, похоже, сработало. До сих пор я не нашел никаких проблем с этим. 

// 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()
});
...