[EMAIL PROTECTED] wrote:
Hi,
I am using the jquery tabs with dynamically generated divs (the AJAX
variant):
<div>
<ul>
<li><a href="somefile.htm">link</a></li>
...
</ul>
</div>
When the user clicks on the tab nav, I want to display a loading image
in the content area (=the dynamically generated div). I tried to bind
an onclick function ("$('tablink').click(...)) to the a-tag, but it
doesn't work correctly: there is no defined order in which my onclick
and jquery tab's onclick are called (sometimes the loader is displayed
AFTER the content was loaded!).
My solution would be to simply use a href="javascript:loadMyContent()"
instead of the "somefile.htm" above. My JS function would then call
the loader and the AJAX reload in the correct order. Unfortunately
this does not work. Can you help me?
That is not the way to go and won't work, because Ajax tabs rely on the
proper URL in the href attribute. Otherwise it won't degrade gracefully
and the links would be inaccessible without JavaScript ("Hijax"). You
need to use the onClick and onHide handlers:
$('#whatever').tabs({
onClick: function (clicked, show, hide) {
$(hide).html('...'); // append element that shows spinner
}
onHide: function(clicked, show, hide) {
$(hide).empty(); // remove spinner
}
});
--Klaus
