[jQuery] Re: jQuery Tabs with AJAX and href=javascript:...

2007-06-18 Thread Klaus Hartl 


[EMAIL PROTECTED] wrote:

Hi,

I am using the jquery tabs with dynamically generated divs (the AJAX
variant):

div
  ul
lia href=somefile.htmlink/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

[jQuery] Re: jQuery Tabs with AJAX and href=javascript:...

2007-06-18 Thread [EMAIL PROTECTED] 

Thank you Klaus! That was exactly the solution I was looking for :).

Matthias

On 18 Jun., 13:15, Klaus Hartl [EMAIL PROTECTED] wrote:
 [EMAIL PROTECTED] wrote:
  Hi,

  I am using the jquery tabs with dynamically generated divs (the AJAX
  variant):

  div
ul
  lia href=somefile.htmlink/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