Question

我正在使用jQuery UI Vertical Tabs，内容通过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

jQuery UI Ajax选项卡加载未显示

1 个答案: