How do I use Jquery UI Tabs constructor methods?

Question

Hi

I am using Asp.net MVC and I been trying to use Ajax UI tabs in jquery.

On the demo site: http://jqueryui.com/demos/tabs/#ajax

It has this

Fetch external content via Ajax for the tabs by setting an href value in the tab links. While the Ajax request is waiting for a response, the tab label changes to say "Loading...", then returns to the normal label once loaded.

I never see the tabs change to loading in their demo. So I decided to try to make my own example.In my asp.net mvc application I set a href to a action view that loads up a partial view. In this action view I put a sleep thread of "5000".

Yet I never see this "loading...." they talk about, even with me slowing down the request and checking.

I then was looking at the constructor methods and I don't get how to use them for instance I was looking at the spinner option it has

spinner

Type: String Default: 'Loading…'

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. Code examples

Initialize a tabs with the spinner option specified.

$('.selector').tabs({ spinner: 'Retrieving data...' });

Get or set the spinner option, after init.

//getter
var spinner = $('.selector').tabs('option',

'spinner'); //setter $('.selector').tabs('option', 'spinner', 'Retrieving data...');

So I did what was said and I put that line in my jquery and changed it to the real div that I have.

I don't see this spinner either so I don't know what I am missing. Do I have to do something else?

My JavaScript code:

<script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<link href="../../images/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />

<script src="../../Scripts/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>


    <script type="text/javascript">
        $(function() {

            // Tabs
        $('#tabs').tabs({ spinner: 'Retrieving data...' });


        });
     </script>

Edit

Thanks to "redSquares" post I now know why mine is not working but I use Html.ActionLink. So how can I form my Html.ActionLink to have the span tag? Or do I have to make my own Html helper?

Answer 1

You need to put a span within the anchor. Nice of the docs to explain this!

e.g

<ul>
  <li><span><a href="someUrl"><span>Spinner Needs this</span></a></li>
  <li><a href="shomeUrl1"><span>Spinner Needs this</span></a></li>   
</ul>

Demo here

Answer 2

You need to put that spinner part wherever you're first starting tabs, probably in your document ready function. Put { spinner: 'Retrieving data...' } inside of the tabs.tabs(x).

Most times it will load so fast you won't see it, and that's a good problem to have.

You can see an example of this in action at sneakyness.com, my current project