jQuery UI Ajax Tabs Loading not showing

Question

I'm using jQuery UI Vertical Tabs and the content is loaded via AJAX. I tried almost everything from posts around here, and nothing helped me so far .. :/

I want to display a css3 loading animation placed in <div id="loading-image">...</div>. So far almost nothing is happening.

My code

$(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 [email protected] "  );
            });
            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();
    });
});

The only thing I get is the AJAX alert. I tried removing $('#loading-image').hide(); and the loading was always there.

Please help ....

Thank you in advance

Answer 1

I recommend to use a global ajax loading..

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

but, if you want personalize for multiple events, see this questions:

How to call .ajaxStart() on specific ajax calls

jQuery should I use multiple ajaxStart/ajaxStop handling