jQuery Dialog ASP.NET Overlap

So the problem first:

If you have managed to get yourself into a corner, where you are using jQuery dialog with

a) ASP.NET server controls

b) Loading a <div> from within the Page itself (that is no iframe etc)

c) You have attached the Dialog to the “form” as opposed to the standard of outside

// add to parent form
            dlg.parent().appendTo($("form:first"));

Then you are going to run into a problem in using it:

1) Upon closing your dialog box –

$(this).dialog("close");

An invisible box will remain behind though invisible to the user – this is the leftover UI-Effects-Wrapper (jQuery). Why is it left behind?

My theory is that because it has server-side controls attached to it, which are still in memory, it fails to completely clear the “dialog”, not to mention we added it to the ASP.NET FORM.

The problem with this, is that this left-over wrapper, will prevent interaction with controls directly behind it.

It doesn’t matter if you $(this).dialog(“destroy”) – this still doesn’t seem to get rid of the problem. The only solution that I found is:

            // Re-define
            dlg = $("#divUploadDocument").dialog({
                modal: true,
                autoOpen: false,
                show: "drop",
                hide: "drop",
                width: 550,
                height: 400,
                stack: true,
                buttons: {
                    "Close"function () {
                        $(this).dialog("close");
                        $(".ui-effects-wrapper").remove(); // SOLUTION IS HERE
                    }
                }
            });

This removes the left-over UI-Wrapper garbage, assuming you only have one window open at a time.

Don't be shellfish...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on TumblrEmail this to someone

Leave a Reply