Jon's Blog

The jQuery UI Dialog does not seem to play nicely with the ASP.NET AJAX UpdatePanel.  After doing a partial page postback using an UpdatePanel the jQuery UI Dialog div would no longer function.  Thanks to Stack Overflow and some blog posts I discovered that you need to add some code to hook into the ASP.NET AJAX JavaScript pageLoaded event and this will reinitialize the jQuery UI Dialog div every time.  We also need to append the div to the form element so that any ASP.NET buttons on the div will post back to our page.  In the following JavaScript snippet my jQuery modal dialog div has an ID of "myDiv". Also, in this example we are setting up the dialog to be modal and autoOpen equal to false.

<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function (evt, args) {

    var myDiv = $("#myDiv").dialog({ autoOpen: false, modal: true, open: function (type, data) {
         $(this).parent().appendTo("form");
        }
    });
});
</script>