The problem is the context of 'this' within the ajaxStart() and
ajaxStop() functions.
try this instead...
$("#contests ul li span a").toggle(
function(){
//store ref to toggling element for use in ajax callbacks...
var lnk = $(this);
var url_title = lnk.html();
lnk.ajaxStart(function(){
lnk.html("loading...");
}).ajaxStop(function(){
lnk.html(url_title);
});
$(".contest-form-" + this.name).load(this.href).show();
return false;
},
function(){
$(".contest-form-" + this.name).hide("fast");
return false;
}
);
On May 5, 2:26 pm, bobh <[EMAIL PROTECTED]> wrote:
> hi,
>
> I'm trying to change the innerHtml of an anchor to "loading" for the
> duration of an ajax load with this code:
>
> $("#contests ul li span a").toggle(
> function(){
> var url_title = $(this).html();
> $(this).ajaxStart(function(){$
> (this).html("loading...");}).ajaxStop(function(){$
> (this).html(url_title);});
> $(".contest-form-" + this.name).load(this.href).show();
> return false;
> },
> function(){
> $(".contest-form-" + this.name).hide("fast");
> return false;
> }
> );
>
> both the ajax load and the text replacing work fine. the problem
> however is that all links that have been clicked are getting the
> "loading" innerHtml. in stead of only the one that is clicked on. for
> clarification I've put an example page online here:http://allnighters.net/jq/.
> try clicking a few different links.
>
> thanks
