0

Using jQuery UI tabs() - with ajax, drawing the content from other pages.

Its working fine, but sometimes the content takes few seconds to load - I would like to have a 'loading...' message in the tab content area.

This is my code currently (used for applying colorbox() to relevant links within the ajax content):

$("#tabs").tabs().bind('tabsload',function(event, ui){
    $("#tabs .iframe").colorbox({iframe:true, width:"65%", height:"80%"});
});

I have seen the suggestions at JQuery UI Tabs - "Loading..." message but none of them seem to work. Maybe they are outdated.

Help appreciated! Thanks

Community
  • 1
  • 1
kneidels
  • 956
  • 6
  • 29
  • 55
  • The highest rated answer in you linked question depends on .is(':empty'). Perhaps there is an unexpected item in the tab causing that command not to trigger? – wedstrom Feb 04 '15 at 16:28
  • Thanks - i tried commenting out the `.is(":empty")` so that it always inserts the `loading...` but nothing actually happened when tested – kneidels Feb 04 '15 at 16:37

1 Answers1

0

Try to use onLoad callback function..

Sample

$("#tabs .iframe").colorbox({
    iframe:true, 
    width:"65%", 
    height:"80%",
    onLoad : function(){
        $("#cboxContent").before('<div class="tab-loading" style="z-indez:999999; position: absolute; background: white; height: 100%; width: 100%; padding: 35% 45%; ">Loading...</div>'); 
    },
    onComplete : function(){
        $(".tab-loading").remove(); 
    }
});
Anthony Carbon
  • 608
  • 1
  • 5
  • 18
  • Thanks. Maybe i wasn't clear - the `colorbox()` call is just for links that appear within the ajax-generated content. It doesn't have anything to do with the loading. i Just need it there so that its applied to the content thats generated via ajax. – kneidels Feb 04 '15 at 17:35