Button with image and loading element id when clicked

Question

I've made an application that makes full use of ajax, and what I need to do is: I want a button with a description + image that when clicked is disabled and instead of the original image in the button, appears the ajax loading element id inside the button. And when the ajax loading is complete, the original image of the button returns to the normal.

Is there any good source on how to do something like this? What do you guys suggest?

Answer 1

if your button is image you can just change it's source like this

function call_my_method(el)
{
  //ajax call and stuff
 el.setAttribute('src', 'loading.gif');
}

and all you have to do is return old image once you get response from server, same way as you put the loading.gif