4

I need an ajax animation while the remote page is loaded in tabs.

I am using

$('#tabs2').tabs({ spinner: ''<img src="../../Content/images/Jquery/spinner.gi'' });

Even $('#tabs2').tabs({ spinner: 'Loading..' }); also doesn't works ...

Though the tab functionality is working but the animation is not working ...

I am using JQuery theme roller files. Your help is much appreciated. Many Thanks

1
  • is this the actual code? what is this: ''
    – mkoryak
    Jun 17, 2009 at 16:27

6 Answers 6

5

Sorry problem solved. I Put a <span> tag in the tabs. Found the solution in Jquery support discussions. http://docs.jquery.com/Discussion

e.g.

<li><a href="../URL">**<span>Text to display in Tabs</span></a></li>
<li><a href="tabdiv">**<span>Text to display in Tabs</span></a></li>
2
  • 1
    Why do you need those asterisks?
    – Nirmal
    Sep 7, 2010 at 5:18
  • yeah, what's up with the asterisks?
    – Neo
    Sep 13, 2010 at 2:13
3

If spinner doesn't work for you (it doesn't for me), try this:

$("#tabs").tabs({ 
                beforeLoad: function (event, ui) {
                    ui.panel.text('Retrieving data...');
                }
            });
1
2

This first code snippet as posted, looks incorrect. It should be:

$('#tabs2').tabs({ spinner: '<img src="../../Content/images/Jquery/spinner.gif"/>' });

The second snippet should work just fine assuming that "#tabs2" refers to the container tab and not one of the individual tabs.

Please edit your question and post the associated HTML for the tabs.

1

The spinner option of the jquery.ui tabs is only used when loading remote content with ajax. Are you sure you're using ajax mode and not simply showing and hiding existing content on your page with tabs ?

1

I couldn't figure out what is the answer, so once again, if somebody couldn't figure out as well.

Not the content of the tab is being replaced during load but the tab title. All you need to do is putting tab title into span tags

before:

<ul >
 <li><a href="link.html" >Users</a></li>
</ul>

after

<ul >
 <li><a href="link.html" ><span>Users</span></a></li>
</ul>

The tab header must be surrounded with span, as you can see Users becomes <span>Users</span>

0

Adding a around the text of the tab links fixes the problem. Sumanta's solution is correct, but I'm not sure you need the two asterisk symbols that are in there.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.