JQuery UI Tabs - "Loading..." message

Question

All,

I am using Jquery UI nested tabs. I was just wondering if there is any way to display an AJAX Spinner image next to the tab text, while the tab is loading. I do not want to change the tab text to "Loading..". Consider that when multiple tabs are loading at the same time or one after the other, the spinner image should be displayed next to each loading tab..

Any Suggestions?

Thanks

Answer 1

If you're using caching for your tabs, then this solution is propably a better fit, it only shows the ajax loading if the content isn't already on the page.

$(".tabs").tabs({    cache:true,    load: function (e, ui) {      $(ui.panel).find(".tab-loading").remove();    },    select: function (e, ui) {      var $panel = $(ui.panel);       if ($panel.is(":empty")) {          $panel.append("<div class='tab-loading'>Loading...</div>")      }     }  }) 

Answer 2

I used a different method to this myself. I wanted the tab titles to remain as they were, and have the 'loading' information in the tab itself.

The way I did it is as follows:

    $("#matchTabs").tabs({       spinner: "",       select: function(event, ui) {         var tabID = "#ui-tabs-" + (ui.index + 1);         $(tabID).html("<b>Fetching Data.... Please wait....</b>");       }     }); 

Like the previous poster, I used the spinner method to prevent the tab titles from being changed. The select event fires when a new tab is selected, so I got the ID of the currently selected tab and added one to create a variable that would reference the DIVs in which the ajax content is loaded by default.

Once you have the ID, all you need to do is replace the HTML inside the DIV with your loading message. When the Ajax completes, it will replace it again for you with the actual content.