jQuery UI Ajax选项卡加载未显示

Question

我使用jQuery UI垂直选项卡，内容是通过AJAX加载的。我在这里尝试了几乎所有的帖子，到目前为止都没有帮助到我。:/

我想显示一个放置在<div id="loading-image">...</div>中的css3加载动画。到目前为止，几乎什么都没有发生。

我的代码

$(function() {
    $( "#messages_tabs_div" ).tabs({
        beforeLoad: function( event, ui ) {
            console.log(ui);
            ui.jqXHR.error(function() {
                ui.panel.html("Couldn't load your messages. Try refreshing your page."+
                    " If you think this is bug you can help us by submitting it at bugs@go-out-sport.com "  );
            });
            ui.jqXHR.complete(function(response){                
                console.log(response);                    
            });
        },
        disabled: [6],
        select: function(event, ui) {
            alert('ASDAD');
        }
    }).addClass( "ui-tabs-vertical ui-helper-clearfix" );
    $( "#messages_tabs_div li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
});

//jQuery MINE
$(document).ready(function(){
    $('#loading-image').hide();
    //Set loading bar for all ajax requests
    $('#loading-image').bind('ajaxStart', function(){
        alert('AJAXXX');
        $(this).show();
    }).bind('ajaxStop', function(){
        $(this).hide();
    });    

    $('#loading-image').bind('tabsselect', function(event, ui) {
        alert('TABSSSSS');
        $(this).show();
    }).bind('tabsload', function(event, ui) {
        $(this).hide();
    });
});

我唯一能得到的就是AJAX alert。我尝试删除$('#loading-image').hide();，加载总是在那里。

请帮帮忙..。

提前谢谢你

Answer 1

我建议使用全局ajax加载。

$(document).ajaxStart(function() {
    $("#loading").fadeIn(200);
}).ajaxStop(function() {
    $("#loading").fadeOut(300);
}).ajaxSuccess(function() {
});

但是，如果您希望针对多个事件进行个性化，请参阅以下问题：

How to call .ajaxStart() on specific ajax calls

jQuery should I use multiple ajaxStart/ajaxStop handling