1

我正在使用 jQuery UI 垂直选项卡，内容是通过 AJAX 加载的。我几乎从这里的帖子中尝试了所有东西，到目前为止没有任何帮助..：/

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

我的代码

$(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();并且加载始终存在。

请帮忙 ....

先感谢您

4

1 回答 1

2

我建议使用全局 ajax 加载..

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

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

如何在特定的 ajax 调用中调用 .ajaxStart()

jQuery 我应该使用多个 ajaxStart/ajaxStop 处理

于 2013-03-06T19:30:43.133 回答