1

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.

Community
  • 1
  • 1
Tom Hamming
  • 10,577
  • 11
  • 71
  • 145
  • This probably isn't the answer you're looking for ... but just don't use `UpdatePanel`. It attempts to simplify ajax but complicates so much more. – jrummell Jul 10 '12 at 16:34
  • I disagree with @jrummell... UpdatePanels may not be a 100% AJAX replacement, but they are a great tool to have when the situation calls for them. – Jaime Torres Jul 10 '12 at 16:40

1 Answers1

2

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.

Jaime Torres
  • 10,365
  • 1
  • 48
  • 56
  • So what you're saying is that the client-side operation of a partial postback is nothing more than receiving a bunch of HTML from the server and setting the `UpdatePanel`'s `innerHtml` property to that new HTML? – Tom Hamming Jul 16 '12 at 15:29
  • Correct. If you use tamperdata/firebug/fiddler it's pretty easy to see. The response is simply a pipe delimited string denoting a response, what update panel to update, and the raw HTML to update the panel with. – Jaime Torres Jul 16 '12 at 16:41