显示Jquery装载Jquery

Question

在加载AJAX内容时，我试图在选项卡显示的区域内显示一个旋转器gif。但是，我的Ajax调用并不发生在选项卡代码中。它通过下面所示的外部ajax调用来实现，然后在ajax调用的.done()方法中，我将json数据放置在位于选项卡内的div中。

在ajax调用发生时，我想在选项卡中显示一个旋转器。我在网上看过几个教程，但是没有什么能满足我的需求。任何帮助都很感激谢谢。

                          $('#tabs').tabs({
                                    selected: 1,
                                    beforeLoad: function(event, ui) {
                                        $('#imageSpinner').show();
                                        /* if ajax call to retrieve tab content failed */
                                        ui.jqXHR.error(function() {
                                           // $('#imageSpinner').hide();
                                            ui.panel.html("An error occured.");
                                        });
                                    },

                                    /* Called when tab is loaded */
                                    load: function(event, ui) {
                                      //  $('#imageSpinner').hide();

                                    }
                                });


<div id="tabs">
                                <ul>
                                    <li><a href="#tabs-1">PL Message Viewer</a>
                                    </li>
                                    <li><a href="#tabs-2">File Message Viewer</a>
                                    </li>
                                </ul>

                                <div id="tabs-1" style="height:535px; overflow-y:scroll; float:left; z-index:1;">
                                    <div style="margin-left:32px;">
                                        <div id="buttonContent" class="buttonContente">
                                         <img id="imageSpinner" src="images/image_623941.gif" style="vertical-align:middle; z-index:200;'">
                                        </div>
                                    </div>
                                </div>

                                <div id="tabs-2" style="height:535px; overflow-y:scroll; float:left;">
                                    <div style="margin-left:32px;">
                                        <div id="buttonContentFile" class="buttonContente"></div>
                                    </div>
                                </div>

                            </div>




function getFilters() {
                    return $.ajax({
                        type: "GET",
                        url: "InsertMessage",
                        data: "term=PLM",
                        cache: false,
                        success: function (data) {},
                        error: function (xhr, status, error) {
                            alert(xhr.responseText);
                        }
                    });
                }
                getFilters().done(function (r) {
                    if (r) {
                        gridValsstr = r;
                        gridvals = JSON.parse(gridValsstr);
                        $.each(gridvals.messagetypes, function (key, value) {
                            $("#buttonContent").append('<div id="ck-button"> <label> <input type="checkbox" value="' + value.id + '"><span>' + value.messagetype + '</span>  </label></div>');
                        });

                    }
                })
                    .fail(function (x) {
                        alert("Asynchronous call failed.");
                    });

Answer 1

在加载页面时，图像看起来是默认显示的。要删除图像并显示内容，请在done函数中使用html()而不是append()。

这将用加载的内容替换图像。

$("#buttonContent").html('<div id="ck-button"> <label> <input type="checkbox" value="' + value.id + '"><span>' + value.messagetype + '</span>  </label></div>');

由于您似乎知道要加载ajax调用的结果的元素，所以在调用getFilters()函数时，可以将内容设置为自旋器。

function getFilters()
{
    $("#buttonContent").html('<img id="imageSpinner" src="images/image_623941.gif" style="vertical-align:middle; z-index:200;'">';
    // your ajax call
});

Answer 2

尝试更改beforeLoad函数以包含一个函数来处理ajax调用的已完成事件.

beforeLoad: function(event, ui) {
    $('#imageSpinner').show();

    // when ajax call to retrieve tab content is complete
    ui.jqXHT.done(function() {
        $('#imageSpinner').hide();
    });

    // if ajax call to retrieve tab content failed
    ui.jqXHR.error(function() {
        ui.panel.html("An error occured.");
    });
},

Answer 3

// Tabs
$("#tabs").tabs({
// This enables caching as well
beforeLoad: function( event, ui ) {
    if (ui.tab.data("loaded")) {
        event.preventDefault();
        return;
    }
    ui.jqXHR.success(function() {
        ui.tab.data("loaded", true);
        $(".spinner").hide();
    }),
    ui.jqXHR.error(function( jqXHR, textStatus, errorThrown ) { 
        alert(lang.tabErrorMsg);
    })
},
beforeActivate: function( event, ui ) {
    if (ui.newPanel.html()=="") ui.newPanel.html('<img class="spinner" src="spinner.gif">);
        }
});