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

尝试更改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 2

在加载页面时，默认显示图像。要删除图像并显示内容，请在完成函数中使用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 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">);
        }
});

显示Jquery GIF onload Jquery Tabs

3 个答案: