jQuery-UI .dialog ("moveToTop") выдает ошибку, даже если она работала успешно

Question

У меня возникают проблемы с вызовом диалогового окна ("moveToTop") в моем диалоговом окне Jquery после его открытия. Причина, по которой я это называю, заключается в том, что мои модальные диалоги появляются под оверлеем (они должны быть добавлены к определенной форме, которая не в том же контексте стека, что и наложение), и все попытки вручную принудительно заставить z-индекс различных элементов не сработали. Делать наложение невидимым нельзя.

Я хочу, чтобы .dialog ("moveToTop") вызывался в любом открытом диалоговом окне jquery-ui:

    $(document).on("dialogopen", ".ui-front", function (event, ui) {

        $(document).dialog("moveToTop");

    });

И это похоже на работу. Мои диалоги теперь поверх оверлея. Но я получаю эту ошибку в консоли:

  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

Следующий код вообще не перемещает диалоговое окно над оверлеем:

$("#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;
    });

Я пытался подключить прослушиватель событий только к определенному диалогу, и ничего не происходит вообще. Диалог появляется только над оверлеем, когда я использую код в начале этого поста. Кто-нибудь может объяснить, что означает ошибка? Мой код зацикливается на диалогах, которые не инициализированы? Если так, как я могу сделать это более конкретным и при этом получить желаемый результат?

Я использую jquery-ui 1.10.2 с jquery 3.3.1. Я также попытался перейти на более низкую версию jquery, но ошибка не исчезла.

Answer 1

Рекомендовал бы проверить это:

$("#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"));
});

На основании ошибки кажется, что jQuery не знает, что он уже инициализирован как диалог.Это может быть связано с выполнением кода слишком быстро.Создание цепочки кода может помочь организовать его.

Если вы планируете выполнить его на объекте jQuery, который включает в себя множество объектов ($(".ui-front")), вы можете столкнуться с некоторыми проблемами, приводящими их все к «вершине»:

moveToTop ()

Перемещает диалоговое окно в верхнюю часть стека диалогов.

Также будет полезно искать объекты, которыеинициализируются, используя что-то вроде ".ui-front.ui-dialog".

. Лучше всего обновить вашу публикацию и включить пример содержимого HTML.Неясно, сколько диалогов вы можете иметь.

Answer 2

Спасибо за все предложения.Я заметил, что когда moveToTop () действительно перемещал диалог вперед (но с ошибкой js), казалось, что он отделяет диалог от формы, к которой он был добавлен, поэтому кнопки отправки больше не работают.Оказалось также, что CSS для навигационного меню, которое я использовал, также имеет оверлейный элемент div, который мешает стековому контексту.

Моя работа заключается в том, чтобы поместить #contentform вне #contentdiv, и тогда добавленные диалоговые окна находятся в том же контексте стека, что и оверлей, означающий, что необходимость вызова MoveToTop () исчезает.Неудобно помещать #contentdiv в каждый вид бритвы вместо того, чтобы помещать его в основной файл макета, но это кажется необходимым.

Я предполагаю, что MoveToTop () не понравился тот факт, что диалоги не были в правильном контексте стека для начала, поэтому я использовал его неправильно.

Answer 3

Может быть, проблема только в порядке ...

В сообщении об ошибке написано «невозможно вызвать методы в диалоговом окне до инициализации» ...
Так что если вы откроетево-первых, все должно быть в порядке.

Попробуйте, что ниже:

$("#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;
});