Question

I am using jQuery 1.6.2 and jQuery UI. I would like to show a custom message on tab AJAX loading. I have two tabs (as in the official documentation) and I like to display a “spinner” message inside the HTML div being loaded instead of near the tab title.

The problem with the following code is that I have enabled the cache so it doesn’t work as expected.

$jQ(function() {
  $jQ( 'tabs' ).tabs({
    cache: true,
    select: function(event, ui) {
      var currentId = ui.index + 1;
      $jQ('#' + currentId).html('Loading tab content...');
    }
  });
});

Here is what happens:

• The first time I click on the second tab I don’t get any loading message but the tab content is loaded.
• The second time I click on the second tab I get the loading message and no more the tab content (that is, the tab content is not displayed and it persists on the loading message).

How can I make it to work?

Answer 1

First, your ajax might be loading so quickly that you aren’t seeing the loading message. Second, You can add a check to see if the page has been loaded already, and if it has, then don’t change to the loading message.

$(function() {
   var cached = {};
   ( "#tabs" ).tabs({
      cache : true,
      select: function(event, ui) {
         if ( typeof ui.index === "undefined" ) {
            $(ui.panel).html('Loading tab content...');
            cached[ui.index] = true;
         }
      }
   });
});