Question

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

<td>
  <img src='image.gif'>This is a test
</td>

I have to run a jQuery Ajax call and during this call I want to change the image to a loading image that I have (loading.gif) and then return it to the regular image (image.gif in this case) after the Ajax is complete.

What is the correct jQuery syntax to change the image to the loading image and back again?

Answer 1

I believe your question is regarding how to change an image before an AJAX Request and then change it back when the AJAX request is finished.

Well below is a sample…and here is some reference to the jQuery ajax() method. Note: the ajax() method contains options to declare success, error and complete function that can be executed when the AJAX call is successful, errors out, or is completed (ie after either success or error).

<td>
  <img id="loadingImg" src='image.gif'>This is a test
</td>

---

$("#loadingImg").attr("src", "loading.gif");
$.ajax({ //other options here
  complete: function () {
  $("#loadingImg").attr("src", "image.gif");  // change image back when ajax request is complete
} });