is there a way to dynamically put a spinner next to a control instead of having divs all over the place

Question

i have a number of dropdown controls and on the change event it kicks off ajax getJSON() calls. I have a div next to each dropdown with a spinner image as i want to display "loading . . " as some of the ajax calls are expensive.

Is there anyway i can just have one spinner div on the page and have the spinner move right next to the dropdown control that i just changed at that point. this way i can reuse one div instead of having them over and over on the page.

Answer 1

You can create a spinner, or move it. It's easier to just destroy and create one on the ajax request I think...I have something like this when calling to a webservice to get something.

$(document.createElement("img"))
  .attr({ "src": "/Ajax/Spinner.gif" })
  .insertAfter(dropDownElementThatWasJustClicked);

In my case, I'm destroying everything inside that parent and replacing it when I get data back, so it destroys the spinner as part of that.