Updatepanel refresh messing up JqueryUI in IE7

Question

Hey everyone, This is a bit of a long shot as I don't have access to the code at the moment. However, there's nothing 'special' about the code. I'm using a combination of JqueryUI and ASP.NET UpdatePanels. If I click any of the trigger controls (asp.net button), the partial-postbacks are fine. However, if I click on a trigger control after clicking on a JQueryUI button, then the entire layout messes up and a lot of the content moves upwards. I can just about reach a JQueryUI button, and when I click that, the layout returns to normal and everything's fine until I click the trigger control again. The page works fine in all latest browsers, but this problem appears in IE 7.

I hope maybe someone has come across a similar problem in IE 7 and found a workaround/solution. I've been trying to fix it for a couple of days, but no luck.

Thanks for any advice.

Answer 1

When an UpdatePanel refreshes, it destroys the DOM objects inside its bounds and replaces it with new objects (even if that content may be the same or similar markup). Any JavaScript which was attached to the old DOM elements is now holding references to non-existent objects. If the jQuery code handles this gracefully, things would simply stop working; or worse (as you are seeing) unpredictable and unstable behavior.

The solution I have found to this is to get on the UpdatePanel's beginRequest event and call destroy() on all the jQueryUI objects; and on the endRequest event recreate them by re-running all the selectors and recreating the jQueryUI objects.

<script type="text/javascript">

    function createJQueryObjects() {
        //setup
    }

    function destroyJQueryObjects() {
        //destroy
    }
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(destroyJQueryObjects);
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(createJQueryObjects);
</script>