jquery ui Dialog: невозможно вызвать методы в диалоговом окне до инициализации

У меня есть приложение на jquery 1.5 с диалогами, работающими нормально. Хотя у меня много обработчиков .live, я изменил это на .on. Для этого мне нужно обновить jquery (теперь 1.8.3 jquerui 1.9.1).

Теперь у меня есть: Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

Ниже приведен код:

Javascript

var opt = {
        autoOpen: false,
        modal: true,
        width: 550,
        height:650,
        title: 'Details'
};

$(document).ready(function() {
$("#divDialog").dialog(opt);
    $("#divDialog").dialog("open");
...    

HTML-код

<div id="divDialog">
<div id="divInDialog"></div>
</div>

Есть идеи, почему это может происходить?

Попробуйте вместо этого

$(document).ready(function() {
  $("#divDialog").dialog(opt).dialog("open");
});

Вы также можете:

var theDialog = $("#divDialog").dialog(opt);
theDialog.dialog("open");

Это потому, что диалог хранится не в $('#divDialog'), а в новом div, который создается на лету и возвращается .dialog(opt)функцией.

Если вы не можете обновить jQuery и получаете:

Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

Вы можете обойти это так:

$(selector).closest('.ui-dialog-content').dialog('close');

Или, если вы управляете представлением и знаете, что никакие другие диалоги не должны использоваться на всей странице, вы можете сделать:

$('.ui-dialog-content').dialog('close');

Я бы рекомендовал делать это только в том случае, если использование closestвызывает проблемы с производительностью. Вероятно, есть другие способы обойти это без глобального закрытия всех диалогов.

Я получил эту ошибку, когда обновил только библиотеку jquery, не обновляя библиотеку jqueryui параллельно. Я использовал jquery 1.8.3 с jqueryui 1.9.0. Однако, когда я обновил jquery 1.8.3 до 1.9.1, я получил указанную выше ошибку. Когда я закомментировал оскорбительные .closeстроки метода, он выдал ошибку о том, что не нашел.browserв библиотеке jquery, которая устарела в jquery 1.8.3 и удалена из jquery 1.9.1. Итак, в основном библиотека jquery 1.9.1 была несовместима с библиотекой jquery ui 1.9.0, несмотря на то, что на странице загрузки jquery ui говорилось, что она работает с jquery 1.6+. По сути, при попытке использовать разные версии этих двух ошибок возникают незарегистрированные ошибки. Если вы используете версию jquery, которая поставляется вместе с загрузкой jqueryui, я уверен, что у вас все будет хорошо, но когда вы начинаете использовать разные версии, вы сбиваетесь с проторенного пути и получаете подобные ошибки. Таким образом, эта ошибка связана с несовпадением версий (во всяком случае, в моем случае).

Итак, вы используете это:

var theDialog = $("#divDialog").dialog(opt);
theDialog.dialog("open");

и если вы откроете частичное представление MVC в диалоге, вы можете создать в индексе скрытую кнопку и событие щелчка JQUERY:

$("#YourButton").click(function()
{
   theDialog.dialog("open");
   OR
   theDialog.dialog("close");
});

затем внутри частичного представления html вы вызываете триггер кнопки, например:

$("#YouButton").trigger("click")

до встречи.

Если вы хотите открыть диалоговое окно сразу после инициализации диалогового окна или когда страница готова, вы также можете установить для параметра autoOpenзначение trueв объекте параметров диалогового окна:

var opt = {
        autoOpen: true,
        modal: true,
        width: 550,
        height:650,
        title: 'Details'
};

Таким образом, вам не нужно вызывать диалог `$ (" # divDialog "). (" Open ");

Когда объект диалога инициализируется, диалог открывается автоматически.

Новая версия пользовательского интерфейса jQuery не позволит вам вызывать методы пользовательского интерфейса в диалоге, который не инициализирован. В качестве обходного пути вы можете использовать приведенную ниже проверку, чтобы увидеть, жив ли диалог.

if (modalDialogObj.hasClass('ui-dialog-content')) {
    // call UI methods like modalDialogObj.dialog('isOpen')
} else {
    // it is not initialized yet
}

Это также некоторая работа:

$("div[aria-describedby='divDialog'] .ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close").click();

Мне просто пришлось добавить на страницу ScriptManager. Проблема решена.

В моем случае проблема заключалась в том, что я позвонил $("#divDialog").removeData();как часть сброса данных моей формы в диалоговом окне.

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

Я заменил .removeData()более конкретные удаления, и все снова заработало.

Мой случай другой, он терпит неудачу из-за объема ' this ':

//this fails:
$("#My-Dialog").dialog({
  ...
  close: ()=>{
    $(this).dialog("close");
  }
});

//this works:
$("#My-Dialog").dialog({
  ...
  close: function(){
    $(this).dialog("close");
  }
});

Я получил это сообщение об ошибке, потому что у меня был тег div в частичном представлении вместо родительского представления