Search jQuery

jQuery Forum

Developing jQuery UI

pirraste

Modal dialogs and the overlayInstances bug (?)

in Developing jQuery UI • 9 years ago

Hi,
let me say that is very close to #9439

Imagine a modal dialog created inside an ASP.NET UpdatePanel:

modal: true,
autoOpen: false,
appendTo: myUpdatePanel

On every postback I'll re-create the dialog, then an openingCondition over a field ($('#popupState').val() == "1") makes to open (or to close) the dialog.

Let see what happens inside jQueryUI:
1. popup created but not visible: $.ui.dialog.overlayInstances == 0
2. (openingCondition == false) and the dialog stay closed: $.ui.dialog.overlayInstances == 0
3. a click opens the dialog: $.ui.dialog.overlayInstances == 1
4. a PostBack event generated inside the dialog raises a partial reload of myUpdatePanel
--reload--
1. popup created but not visible: $.ui.dialog.overlayInstances == 1 (!)
2. (openingCondition == true) the dialog will open: $.ui.dialog.overlayInstances == 2 (!)
4. a PostBack inside the dialog raises a reload
--reload--
1. popup created but not visible: $.ui.dialog.overlayInstances == 2 (!!)
2. (openingCondition == true) the dialog will open: $.ui.dialog.overlayInstances == 3 (!!)
4. a PostBack inside the dialog raises a reload

and so on...
I saw that $.ui.dialog.overlayInstances != $(".ui-widget-overlay").length ... is this a bug?

Replies(4)

scott.gon..

Re: Modal dialogs and the overlayInstances bug (?)

9 years ago

This actually sounds nothing like #9439, unless myUpdatePanel is actually in a different window. In which case, this is not supported.

Sounds very much like you're generating many instances of dialogs. Without code (that doesn't use postbacks), there's nothing for us to investigate. Please provide a reduced test case using jsbin or jsFiddle that shows the problem.

pirraste

Re: Modal dialogs and the overlayInstances bug (?)

9 years ago

Hi Scott,
I was referring to #9439 because of the
TypeError: $(...).data(...) is null
.data( widgetFullName )._focusTabbable(); jquery-ui.js (line 10343)
error on console. It is not the same case but technically is very similar: it is not an iframe but it is a partially loaded asp.net updatepanel.

I've done a reduced test case but I can't find any free ASP.NET free host. Maybe I'll try to register some limited free trial and will publish the code there.

I've to add that it is not a jQuery bug...it is something different....

pirraste

Re: Modal dialogs and the overlayInstances bug (?)

9 years ago

The mystery solved (and explained..maybe it will be useful to someone):

the $.ui.dialog.overlayInstances global variable keeps tracks of every overlay created (maybe from multiple modal dialogs). This variable is initializated during the inclusion of the jqueryui.js file and its initial value is 0.
It's a global, so you can access it from everywhere.

An opened modal dialog creates an overlay and increments that variable; when you close (or destroy) that dialog the variable will be decremented.

What happens if the dialog is inside an UpdatePanel?
In my test the dialog was built closed (autoOpen=false). Inside the dialog there's a postback button: it generate a partial reload of the page and only the UpdatePanel will be rendered again.

Some event somewhere calls the .dialog("open") and the dialog appears (overlayInstances = 1). Now if we click that postback button, the dialog will be flushed away (not destroyed nor closed!) and the UpdatePanel will be rendered with a new copy of the dialog.
The dialog (again) starts closed but now it will be opened: the .dialog("open") is called and overlayInstances++ will be executed.
The $.ui.dialog.overlayInstances isn't reinitialized, and now its value is (wrongly) 2!.

One final note:
I created another test case: the same page in HTML / javascript, with a postback emulation.
I saw that everything was running clear....until I noticed that I was replacing the UpdatePanel content with a $("#updatePanel").html(remoteData);
The .html() funtion is SAFE!! It destroys the inner elements and detach their events.

Using a document.getElementById("updatePanel").innerHTML = remoteData; I saw the overlayInstances problem again.

pirraste

Re: Modal dialogs and the overlayInstances bug (?)

9 years ago

The fix:

I need to keep the balance between "open" and "close" calls to avoid the extra overlay: on every postback button I need to add a js click event that close the dialog. This will forces a _destroyOverlay event that keeps aligned the overlayInstances global value.
Here's the code:

$('input[type="submit"]', $popup)
.add('input[type="image"]', $popup)
.click(function () {
$popup.dialog('close');
});

If the dialog was opened it is closed before the page load. On page load it will be (re)opened.
If the dialog was closed, it is safe to call an extra close on it.

The dialog is modal, so only inner buttons can raise a postback.

Top Reply

Response title

Attachments

jQuery Forum

Modal dialogs and the overlayInstances bug (?)

Replies(4)

Re: Modal dialogs and the overlayInstances bug (?)

Re: Modal dialogs and the overlayInstances bug (?)

Re: Modal dialogs and the overlayInstances bug (?)

Re: Modal dialogs and the overlayInstances bug (?)

Statistics

Tags

Actions