Question

What exactly happens when an UpdatePanel‘s response is received by the client and it renders on the page?

The motivation for this question is finding a proper solution for the problem brought up in this question and this jQueryUI ticket. Essentially, weird things happen when a jQueryUI datepicker is attached to a TextBox in an UpdatePanel and is open when that UpdatePanel updates.

This question and its linked article suggest that it’s nothing more than this:

document.getElementById('updatePanelContainer').innerHTML = responseHtml;

But I’ve tried that in this jsfiddle and the datepicker just completely stops working except for the Done button; the behavior I’m seeing with the partial postback is that the datepicker still works, but its state is taken out from under it. When I debug it with the jQueryUI non-minified code, I see that the drawYear and drawMonth properties lose their values (become 0).

In playing around with Firebug and watching as a partial postback occurs, I’ve noticed the following changes in the page:

• Some of the input’s properties in the DOM tab of Firebug go away, such as:
  • accessKeyLabel
  • parentElement
  • clientHeight
  • clientLeft
  • clientTop
  • clientWidth
  • form
  • nextSibling
  • offsetHeight
  • offsetLeft
  • offsetParent
  • offsetTop
  • offsetWidth
  • parentNode
  • previousElementSibling
  • previousSibling
  • scrollHeight
  • scrollWidth
• A bunch of hidden span elements get added to the bottom of the page that contain hidden fields with ASP.NET info in them (seems similar to __VIEWSTATE)
• The content of the update element changes in small ways (spaces vs tabs, maybe)

UPDATE: I managed to get the repro working; they key is to reinitialize the datepicker after recreating the input it’s bound to. See the latest revision of the jsfiddle mentioned above. I’d still like to know, though, if there’s anything special that the partial postback does.

Answer 1

A partial postback simply sends back the appropriate HTML for the div within the UpdatePanel, and that html is replaced with the response. The full postback lifecycle still occurs on the server, so you must be careful when updating controls outside of your UpdatePanel as those changes will not reflect on the client but can have unintended side effects.