jQuery-UI .dialog("moveToTop") is throwing an error even though it worked successfully

Question

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.

Answer 1

Maybe the problem only is about the order...

The error message says «cannot call methods on dialog prior to initialization»...
So if you open it first, it should be ok.

Try what's below:

$("#btnOpenDialog").click(function () {

  var tmpdlg = $("#popDialog").dialog({
      modal: true,
      autoOpen: false,
      width: 530,
      height: 520,
      title: "Template Picker"

  });

  // Append
  tmpdlg.parent().appendTo(jQuery("form#contentform"));

  // Open
  $('#popDialog').dialog('open');

  // Mov to top
  $('#popDialog').dialog('moveToTop');

  // prevent the default button action
  return false;
});

Answer 2

Would advise testing this:

$("#btnOpenDialog").click(function (e) {
  e.preventDefault();
  var tmpdlg = $("#popDialog").dialog({
    modal: true,
    autoOpen: false,
    width: 530,
    height: 520,
    title: "Template Picker"
  }).dialog('open').dialog('moveToTop');

  tmpdlg.parent().appendTo($("form#contentform"));
});

Based on the error, it appears that jQuery is not aware that it is initialized as dialog already. This may be related to execution of code too quickly. Chaining the code may help organize it.

If you plan to execute it on jQuery Object that encompasses many objects ($(".ui-front")), you may encounter some issues bringing them all to the "top":

moveToTop()

Moves the dialog to the top of the dialog stack.

Would also be mindful to look for objects that are initialized, usng something like ".ui-front.ui-dialog".

It might be best to update your post and include an example of the HTML Content as well. It's unclear how many dialogs you may have.

Answer 3

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.