Add Loading Graphic To JQuery UI Ajax Tabs?

Question

Hello,

How can I add a loading graphic to the JQuery UI ajax tabs? So it pauses for half a second, displays the graphic then loads the content?

Here's the code I have:

<script type="text/javascript">
$(function() {
    $("#tabs").tabs({
        ajaxOptions: {
            error: function(xhr, status, index, anchor) {
                $(anchor.hash).html("I tried to load this, but couldn't. Try one of the other links?");
            }


        }
    });
});

This is the type of graphic I want to use in case you aren't sure:

Thanks!

Answer 1

From the UI examples@ http://jqueryui.com/demos/tabs/#option-spinner

The HTML content of this string is shown in a tab title while remote content is loading. Pass in empty string to deactivate that behavior. An span element must be present in the A tag of the title, for the spinner content to be visible.

Get or set the spinner option, after init.

    //getter
    var spinner = $( ".selector" ).tabs( "option", "spinner" );
    //setter
    $( ".selector" ).tabs( "option", "spinner", 'Retrieving data...' );

SO your code would be:

$(function() {
    $("#tabs").tabs({
        ajaxOptions: {
            error: function(xhr, status, index, anchor) {
                $(anchor.hash).html("I tried to load this, but couldn't. Try one of the other links?");
            },
spinner: '<img src="http://i.imgur.com/Pi5r5.gif" />'


        }
    });
});