I found a better solution that solves my problemo. You see the whole
idea of programming well is doing every thing once. DRY is the
principal that describes this. If I were to do it the way you
suggested Wizzud, it would mean having $(this).replaceWith('<img
src="path/to/img.gif">');
I used jQuery.fn.extend() to solve this: Basically just wrapped the
load method.
jQuery.fn.extend({
loadWait: function(url) { // @see
http://docs.jquery.com/Ajax/load#urldatacallback
$(this).empty();
$(this).append('<img src="images/wait.gif">');
$(this).load(url, arguments[1], arguments[2]);
}
});
On Oct 11, 4:23 am, Wizzud <[EMAIL PROTECTED]> wrote:
> ajaxSend is a global event that *every* bound listener will pick up.
> You're binding listeners to all the elements that you *could* click on
> to initiate the ajax call, but the ajax call does not know (or care)
> what was clicked on, it just knows it has something to send.
>
> You must have click event handlers bound to the .control elements in
> order to initiate the ajax call, so why not simply replace the image
> on the clicked element prior to making the ajax call?
>
> eg.
> $('.control').click(function(e){
> $(this)......// replace image with 'waiting' image
> $.ajax(....); // make ajax call
> });
>
> On Oct 10, 3:38 pm, Mark <[EMAIL PROTECTED]> wrote:
>
> > Let's say I have 10 icons on a web page. Clicking an icon will change
> > it from it's colored version to it's gray scale version. Changing
> > flag states if you will. Lets say, just for example, it takes 3 - 5
> > seconds for the icon to change because it has to wait on the server to
> > process the request and return the icon that represents the result
> > (special icon for failures). I want a wait image to replace the icon
> > that was clicked while waiting on the server.
>
> > I have tried something like this
>
> > $('.control').ajaxSend(
> > function() {
> > $(this).replaceWith('images/wait.gif');
> > });
>
> > This:
> > $('.control').ajaxSend(
> > function(evt) {
> > $(evt.target).replaceWith('images/wait.gif');
> > });
>
> > and This:
> > $('.control').each(
> > function() {
> > $(this).ajaxSend(
> > function() {
> > $(this).replaceWith('images/wait.gif')
> > }
> > )
> > });
>
> > They all give me the same result... all the objects with the class
> > 'control' are replaced with the wait image and not just the one that
> > was clicked. I thought for sure the last one would work ;(.
>
> > <strong>Plain Text Test</strong>
