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

Ishmaelite

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>")
     }
    }
 })

Association

That's a really helpful post, thanks. I find it bizarre that jQ UI 1.8 trims any HTML content inside the function, but I only really need a message anyway. – Predator

it's cool, but somehow it does not work for the first tab which is automatically selected. I worked it around by inserting div manually and than, your code removes it. – Feverwort

newer version of jQ UI (as for now i'm using 1.11) doesn't have select event. use beforeLoad instead. this also answering what's @Feverwort facing (doesn't work on first tab) because AFAIK select are equal to activate in the newer version and the first tab are automatically activated – Dixon

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.

Tumble

Answer 3

Balu, I recently needed to something similar. In my project, I wanted the tabs to retain the tab title, but append an ajax-loading type animation. Here is what I used:

$(".tabs").tabs({ spinner: '',
                select: function(event, ui) { 
                    $(".tabs li a .loader").remove();
                    $(".tabs li a").eq(ui.index).append("<span class='loader'><img src='images/ajax-loader.gif'/></span>"); 
                    },
                load: function(event, ui) { $(".tabs li a").eq(ui.index).find(".loader").remove(); }
                });

The "spinner" option removes the "Loading..." effect on click of the tab. The "select" event allows us to get the selected tab and append a new span containing the animation. Once the content has loaded we use the "load" event to remove the animation. To prevent multiple user clicks from destroying the tabs, we remove() all animations on any tab select.

Did you already solve this issue? If so, please share the solution.

Angelicangelica

hello.... it didn't work for me, though ur logic is sound.. may be something wrong with the selector.. the below sol worked .. thanks for sharing – Dryfoos

Answer 4

In jQuery UI v1.12 you can use the beforeLoad Handler:

$('#tabs').tabs({                
beforeLoad: function(event, ui) {
    ui.panel.html('Loading')
}
});

Horseshit