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

Could you please add html (the header and the content should be in the same container), if you would like to separate header and content you could use jquerytools tabs — Atep
– Atep, Commented Mar 6, 2013 at 19:35

Community · Accepted Answer · 2017-05-23 12:27:15Z

2

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

edited May 23, 2017 at 12:27

CommunityBot

11 silver badge

answered Mar 6, 2013 at 19:30

Guilherme

1,99022 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bankin Over a year ago

It's not working .. that's what I'm saying .. I've tried this already .. and I don't know where is the problem. Even when the loading is showed when I click on any other tab it's hiding .. FOREVER .. :/

Guilherme Over a year ago

try to make some online demo, and I try to help you better - jsfiddle.net

Bankin Over a year ago

Found my mistake, I've put the loading div in one of the tabs and when I switch the tab it disappears .. I'm stupid :D Thanks for the help anyway : )

Collectives™ on Stack Overflow

jQuery UI Ajax Tabs Loading not showing

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related