27

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

Ikke
  • 99,403
  • 23
  • 97
  • 120
Balu
  • 331
  • 1
  • 4
  • 5

4 Answers4

41

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>")
     }
    }
 })
jeroen.verhoest
  • 5,173
  • 2
  • 27
  • 27
  • 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. – Echilon Sep 27 '11 at 14:35
  • 1
    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. – m1k3y3 Nov 12 '11 at 10:23
  • 1
    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 @m1k3y3 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 – blackbiron Apr 02 '16 at 06:59
8

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.

Kipper
  • 81
  • 1
  • 2
5

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.

shanabus
  • 12,989
  • 6
  • 52
  • 78
  • 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 – bsr Jun 17 '10 at 14:57
3

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

$('#tabs').tabs({                
beforeLoad: function(event, ui) {
    ui.panel.html('Loading')
}
});
Andreas Zwerger
  • 713
  • 5
  • 6