显示微调，当我们做一个AJAX调用并等待响应，阻断网页 [英] displaying a spinner when we make an ajax call and waiting for the response and blocking the page

问题描述

我有多个Ajax调用的页面从响应负载的一部分......现在，我必须表明从哪个我想提出一个Ajax调用等内容的部分微调器，以便得到加载...如何我能有这将需要一个参数作为选择的一部分，从中我想提出一个Ajax调用，并阻止页面背景的常用方法

I have a page with multiple ajax call to load a part from the response ...Now I have to show a spinner on the part from which I am making an ajax call waiting for the content to get loaded...How can I have a common method which will take a parameter as a selector for the part from which I am making an ajax call and blocking the page background

感谢的任何建议和帮助。

thank for any suggestion and help.

推荐答案

我的code为：

$.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 本身或完全其它元素）

it adds class spinner (which in css is described with a background spinner image) to parent element (but can be easly changed to alter a itself or completely other element)

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

执行：

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

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

这篇关于显示微调，当我们做一个AJAX调用并等待响应，阻断网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！