отображение блесны, когда мы делаем вызов ajax, ожидание ответа и блокирование страницы

Question

У меня есть страница с несколькими вызовами ajax для загрузки части из ответа ... Теперь мне нужно показать счетчик на той части, с которой я выполняю вызов ajax, ожидая загрузки контента ... Как могу ли я иметь общий метод, который будет принимать параметр в качестве селектора для части, из которой я делаю ajax-вызов и блокирую фон страницы

спасибо за любые предложения и помощь.

Answer 1

мой код для этого:

$.fn.ajaxConvertLink = function() {
    $(this).click(function() {
        var wrap = $(this).parent();
        if (!wrap.hasClass('spinner')) {
            wrap.addClass('spinner');
            $.ajax({
                type: 'GET',
                url: $(this).attr('href'),
                success: function(data) {
                    $('#content_for_layout').html(data);
                },
                complete: function() {
                    wrap.removeClass('spinner');
                }
            });
        }
        return false;
    });
};

добавляет класс-спиннер (который в css описан с фоновым изображением спиннера) к родительскому элементу (но его можно легко изменить, чтобы изменить a сам или полностью другой элемент)

<a href="/foo/bar" id="xxx'>YYY</a>

выполнить

$('#xxx').ajaxConvertLink();

http://jsfiddle.net/Jacek_FH/2dAyf/

Answer 2

Вы можете написать прокси вокруг метода jQuery.ajax. Мы добавим простую разметку (которую можно стилизовать в другом месте) к элементам, содержимое которых загружается, а затем заменим эту разметку responseText после завершения запроса:

jQuery.fn.extend({

    // usage: $(<selector>).spinnerload(); 
    spinnerload: function(url, options)
    {   
        var self = this;
        var options = options || {};
        var success = options.success || function() {};

        options.success = function(responseText, status, jqXHR)
        {
            self.html(responseText);
            success(responseText, status, jqXHR);
        }

        self.html('<div class="loading"></div>');
        jQuery.ajax(url, options);
    }

});