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


102

У меня есть приложение на 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>

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

Ответы:


137

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

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

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

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

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


5
Это сработало для меня. Нужно ли инициализировать диалог каждый раз, когда я хочу открыть его таким образом, или только в первый раз? есть много диалогов. Нет ли возможности установить начальные параметры и затем открывать диалоги кнопками?
core-chain.io

6
Я обнаружил, что это решение также решает ошибку «Невозможно вызвать методы в диалоговом окне до инициализации; попытка вызвать метод open», которая возникает, когда диалоговое окно успешно открывается, закрывается, а затем пользователи пытаются открыть диалоговое окно во второй раз. . Спасибо @ZOD
spadelives 08

Я дал вам +1, потому что это тоже устранило мою проблему, но не могли бы вы объяснить, почему это работает?
Игорь Л.

2
@IgorLacik Я предполагаю, что .dialog () возвращает экземпляр самого себя, поэтому вы можете выполнить цепочку. Поэтому .dialog (opt) .dialog ('open') создает экземпляр объекта диалога (первый вызов), а затем выполняет для него 'open'. Я предполагаю, что вызов $ (obj) .dialog (opt), а затем $ (obj) .dialog ('open') впоследствии создаст экземпляры отдельных диалоговых объектов в объекте jquery, поэтому второй не увидит первый варианты конфигурации. Однако, не углубляясь в код диалога, трудно сказать наверняка, и у меня нет на это времени: D
nealio82

Я обновил вопрос, чтобы объяснить то, что вы пытались объяснить.
JotaBe

23

Если вы не можете обновить 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вызывает проблемы с производительностью. Вероятно, есть другие способы обойти это без глобального закрытия всех диалогов.


10

Я получил эту ошибку, когда обновил только библиотеку 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, я уверен, что у вас все будет хорошо, но когда вы начинаете использовать разные версии, вы сбиваетесь с проторенного пути и получаете подобные ошибки. Таким образом, эта ошибка связана с несовпадением версий (во всяком случае, в моем случае).


4
Я решил эту проблему, обновив мою версию jquery ui до 1.9.2, и тогда она сработала. Итак, jquery 1.9.1 с jquery ui 1.9.2 избавляется от указанной выше ошибки.
johntrepreneur

4

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

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

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

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

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

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

до встречи.


2

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

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

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

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


2

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

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



0

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

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

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


0

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

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

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

-1

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


1
И что именно это означает?
AaA

1
Это плохо объяснено, но верно. В MVC у меня был содержащий тег div для диалога в моем частичном представлении. Когда я переместил содержащий тег div на родительскую страницу, диалог заработал правильно.
Paulj
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.