How can I replace image inside a TD with loading image during Ajax call

Question

I have an HTML table. In each cell there is an image followed by some text. Something like this:

  This is a test
         


        

Answer 1

To change the image is relatively easy:

$('img[src="image.gif"]').attr('src','path/to/new/image.png');

The selector could be improved if your image had an id ($('#imageIDname'), which would apply only to that one image element) or class ($('.imageClassName') though that would apply to all images of that class-name). I don't know if you want to apply this to all images in all tds or just to one particular img element.

Coupling that to your ajax call is a little trickier, since I have no idea what your ajax call looks like.

Also, and this might be just my obsessiveness, your element should look like:

This is a test

Note the trailing / in the img tag.