I'm having trouble calling dialog("moveToTop") on my Jquery dialog after I've opened it. The reason I'm calling it is because my modal dialogs are appearing under the overlay (They need to be appended to a particular form which is not in the same stacking context as the overlay) and all attempts to manually force the z-index of various elements haven't worked. Making the overlay invisible isn't acceptable.
I want .dialog("moveToTop") to be called on any jquery-ui dialog that is opened:
$(document).on("dialogopen", ".ui-front", function (event, ui) {
$(document).dialog("moveToTop");
});
And this seems to work. My dialogs are now on top of the overlay. But I get this error in the console:
Uncaught Error: cannot call methods on dialog prior to initialization;
attempted to call method 'moveToTop'
at Function.error (jquery-1.10.2.min.js:21)
at HTMLDocument.<anonymous> (jquery-ui.min.js:6)
at Function.each (jquery-1.10.2.min.js:21)
at init.each (jquery-1.10.2.min.js:21)
at init.t.fn.(:52727/anonymous function) [as dialog] (http://localhost:52727/scripts/jquery-ui/jquery-ui.min.js:6:5357)
at HTMLDivElement.<anonymous> (cmsfunctions.js:79)
at HTMLDocument.dispatch (jquery-1.10.2.min.js:22)
at HTMLDocument.v.handle (jquery-1.10.2.min.js:22)
at Object.trigger (jquery-1.10.2.min.js:22)
at HTMLDivElement.<anonymous> (jquery-1.10.2.min.js:22)
error @ jquery-1.10.2.min.js:21
(anonymous) @ jquery-ui.min.js:6
each @ jquery-1.10.2.min.js:21
each @ jquery-1.10.2.min.js:21
t.fn.(anonymous function) @ jquery-ui.min.js:6
(anonymous) @ cmsfunctions.js:79
dispatch @ jquery-1.10.2.min.js:22
v.handle @ jquery-1.10.2.min.js:22
trigger @ jquery-1.10.2.min.js:22
(anonymous) @ jquery-1.10.2.min.js:22
each @ jquery-1.10.2.min.js:21
each @ jquery-1.10.2.min.js:21
trigger @ jquery-1.10.2.min.js:22
_trigger @ jquery-ui.min.js:6
open @ jquery-ui.min.js:10
(anonymous) @ jquery-ui.min.js:6
(anonymous) @ jquery-ui.min.js:6
each @ jquery-1.10.2.min.js:21
each @ jquery-1.10.2.min.js:21
t.fn.(anonymous function) @ jquery-ui.min.js:6
(anonymous) @ cmsfunctions.js:110
dispatch @ jquery-1.10.2.min.js:22
v.handle @ jquery-1.10.2.min.js:22
The following code doesn't move the dialog above the overlay at all:
$("#btnOpenDialog").click(function () {
var tmpdlg = $("#popDialog").dialog({
modal: true,
autoOpen: false,
width: 530,
height: 520,
title: "Template Picker"
});
$('#popDialog').dialog('moveToTop');
$('#popDialog').dialog('open');
tmpdlg.parent().appendTo(jQuery("form#contentform"));
// prevent the default button action
return false;
});
I have tried attaching the event listener only to a specific dialog and nothing happens at all. The dialog only appears above the overlay when I use the code at the beginning of this post. Can anyone explain what the error means? Is my code looping over dialogs that aren't initialized? If so how can I make it more specific and still get the desired result?
I'm using jquery-ui 1.10.2 with jquery 3.3.1. I also tried swapping to a lower jquery version but the error persists.
Thanks for all the suggestions. I noticed that when moveToTop() actually did move the dialog to the front (but with the js error) it seemed to detach the dialog from the form it was appended to so submit buttons no longer worked anyway. It also turned out the css for a navigation menu I was using also had an overlay div that was interfering with the stacking context.
My work around is to put the #contentform outside the #contentdiv and then the appended dialogs are in the same stacking context as the overlay meaning the need to call MoveToTop() disappears. It's a nuisance having to put the #contentdiv into every razor view instead of having it in the main layout file but it seems to be necessary.
My guess is that MoveToTop() wasn't liking the fact that the dialogs weren't in the correct stacking context to begin with, so my usage of it was incorrect.