Cancelling Event Bubble Interferes With MS AJAX On Postback

Yesterday, all of a sudden, the following JavaScript error started popping up on postback:

this._postbackSettings.async is null or not an object.

My JavaScript debugger tripped inside MicrosoftAjaxWebForms.js. A quick search on the net turned up this forum post about a similar problem with a PopupControlExtender. However, I had no AJAX Toolkit components on my page at all, only a ScriptManager! I noticed among comments that an ImageButton was the culprit. Why would an image button throw off MS AJAX on a posback?

To put this discussion in proper context, here’s a sample page where I reproduced the error. The page has an image button with a client-side confirmation. I have a cancelEvent function there to prevent message bubbling. In my real-life scenario, this image button is sitting on a hand-made expandable/collapsible strip, therefore it’s necessary to prevent its toggling when the user wants to delete it.

Tweaking the code further, I figured out that if I didn’t manipulate e.cancelBubble everything worked fine. So e.cancelBubble trips MS AJAX. Hhhmmm. Replacing the ImageButton with a LinkButton alleviates the problem (see sample page 2). What’s up with that?

As I compared the output of both pages, I added an explicit call to __doPostBack (see sample page 3) to the image button. Now everything worked fine again. Adding __doPostBack by hand is my least favorite hack.

Conclusion

I don’t feel like going through hundreds of lines of JavaScript in MicrosoftAjaxWebForms.js to get to the bottom of this, so I’m not 100% sure why this is happening. Switching from ImageButton to LinkButton is not pretty, but works.

Here’s another workaround: set EnablePartialRendering="false" on the ScriptManager. This won’t work, though, if you actually perform async calls.