AJAX UpdateProgress not working on server?

Question

I am trying to show an animated image while data is loading into a gridview after a button click. It works great on localhost, but when I deploy it, it doesn't. I have searched through posts, and I have not made any of what seem to be the most common mistakes ... ie. putting the updateprogress inside the updatepanel, etc. However, I am using a masterpage - but the masterpage doesn't have a scriptmanager on it. I noticed the following difference in my view source pages when I compare production to localhost .. Can anyone help me understand why the JavaScript to make this work might not be showing up in production?

On localhost (where it works) I see this at the bottom of the page:

[CDATA[
Sys.Application.initialize();
Sys.Application.add_init(function() {
    $create(Sys.UI._UpdateProgress, {"associatedUpdatePanelId":null,"displayAfter":500,"dynamicLayout":true}, null, null, $get("ctl00_ContentPlaceHolder1_UpdateProgress1"));
});

In production (where it does NOT work), this is all I see:

Sys.Application.initialize();

Answer 1

I was having really hard time after converting my project from VS2008 to VS2010. The UpdateProgress stopped working suddenly, which was fine in VS2008. Spending a whole afternoon to search the answer and experimenting this and that, finally I found what went wrong from Scott Gu's posting.

It was an automatically generated web.config entry 'xhtmlConformance mode="Legacy"'.

After disabling this, it started to work again. May be not the case for you but just for guys struggling with the same problem.

Happy coding

Answer 2

This may not be your ideal solution, but you could show() or hide() your animated image just using javascript. Using the following javascript functions (and getting rid of the UpdateProgress control) should do the trick.

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest); 
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest); 

 function beginRequest(sender, args) {
  document.getElementById('myImageElement').style.display = 'block';  
}

 function endRequest(sender, args) {
  document.getElementById('myImageElement').style.display = 'none';  
}

Keep in mind this will happen for every postback, you may need to use the sender parameter to deduce which element called the postback and only perform the display when the correct updatepanel is hit. These events are fired at the beginning and end (respectively) of each UpdatePanel postback. Good luck.