Question

I’m a complete JavaScript noob. I am using this right now:

$(function() {
   $("#tabs").tabs({
      ajaxOptions: {
         error: function(xhr, status, index, anchor) {
            $(anchor.hash).html(
               "Couldn't load this tab. We'll try to fix this as soon as possible.");
         }
      }
   });
});

Can someone tell me how to also add this option to it:

spinner: 'Loading...'

Source: http://jqueryui.com/demos/tabs/#option-spinner

Answer 1

You have to wrap every single tab with <span>

<li><a href="#tabs-1"><span>Test 1</span></a></li>
<li><a href="#tabs-2"><span>Test 2</span></a></li>
<li><a href="#tabs-3"><span>Test 3</span></a></li>
<li><a href="Home/About"><span>Test Ajax</span></a></li>    

and use the script like this:

$("#tabs").tabs({
    ajaxOptions: {
        error: function(xhr, status, index, anchor) {
            $(anchor.hash).html(
                    "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                    "If this wouldn't be a demo.");
        }
    }
});

$("#tabs").tabs("option", "spinner", 'Retrieving data...');

to test it you should make an ajax call with some delay. I’ve called an MVC action putting the thread in sleep for 2 seconds.