Ошибка JQuery: не может вызывать методы в диалоге до инициализации; попытался вызвать метод "закрыть"

Я неожиданно получаю эту ошибку от jQuery:

Ошибка: невозможно вызвать методы в диалоговом окне до инициализации; попытался вызвать метод "закрыть"

Плагины

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

Код jQuery

Я получаю эти сообщения в следующей функции:

$(document).ready(function() {
  if ($('#results').html().length != 0) {
    alert('has information');

    $('#dialog').dialog({
      modal: true,
      buttons: {
        Ok: function() {
          // If I use $(this).dialog($(this)).dialog('close'), the UI is displayed,
          // however I do not see the OK button and no errors 
          $(this).dialog('close');
        }
      }
    });
  } else {
    alert('has no data');
  }
});

HTML

<div id="dialog" title="Server Response">
  <p><span class="${icon}" style="float: left; margin: 0 7px 50px 0;"></span>
    <label id="results">${results}</label>
  </p>      
</div>

ОТВЕТЫ

Ответ 1

Похоже, что ваши кнопки не объявлены правильно (в соответствии с последней версией jQuery UI).

попробуйте следующее:

$( ".selector" ).dialog({ 
   buttons: [{ 
      text: "Ok", 
      click: function() { 
         $( this ).dialog( "close" ); 
      }
   }]
});

Ответ 2

У меня была аналогичная проблема при открытии диалога с частичной компоновкой в ​​asp.net MVC. Я загружал библиотеку jquery на частичной странице, а также на главную страницу, которая вызывала эту ошибку.

Ответ 3

Попробуйте это - это работает для меня:

$(".editDialog").on("click", function (e) {
    var url = $(this).attr('href');
    $("#dialog-edit").dialog({
        title: 'Edit Office',
        autoOpen: false,
        resizable: false,
        height: 450,
        width: 380,
        show: { effect: 'drop', direction: "up" },
        modal: true,
        draggable: true,
        open: function (event, ui) {
            $(this).load(url);
        },
        close: function (event, ui) {
            $("#dialog-edit").dialog().dialog('close');
        }
    });

    $("#dialog-edit").dialog('open');
    return false;
});

Надеюсь, это поможет вам.

Ответ 4

Является ли ваш $(this).dialog("close") случайным вызовом из-за обратного вызова "успех" Ajax? Если да, попробуйте добавить context: this в качестве одного из вариантов вашего вызова $.ajax(), например:

$("#dialog").dialog({
    modal: true,
    buttons: {
        Ok: function() {
            $.ajax({
                url: '/path/to/request/url',
                context: this,
                success: function(data)
                {
                    /* Calls involving $(this) will now reference 
                       your "#dialog" element. */
                    $(this).dialog( "close" );
                }
            });
        }
    }
});

Ответ 5

Я также получил ту же ошибку: не могу вызывать методы в диалоге до инициализации; попытался вызвать метод "закрыть"

что я сделал, я вызвал событие кнопки закрытия, которое находится в заголовке диалога как

это отлично работает для закрытия диалогового окна

function btnClose() {
$(".ui-dialog-titlebar-close").trigger('click');
}

Ответ 6

По какой-то причине пользовательский интерфейс jQuery попытается запустить весь код, определенный в кнопках во время определения. Это сумасшествие, но у меня была такая же проблема, и она остановилась, как только я сделал это изменение.

if ($(this).dialog.isOpen === true) { 
    $(this).dialog("close");
}

Ответ 7

Я получил ту же ошибку в 1.10.2. В моем случае я хотел сделать щелчок по фону наложения скрытым видимым в данный момент диалогом, независимо от того, на каком элементе он был основан. Поэтому я имел это:

$('body').on("click", ".ui-widget-overlay", function () {
    $(".ui-dialog").dialog('destroy');
});

Это работало, поэтому я думаю, что они должны были удалить поддержку в JQUI для вызова .dialog() во всплывающем окне в какой-то момент.

Мое обходное решение выглядит так:

$('body').on("click", ".ui-widget-overlay", function () {
    $('#' + $(".ui-dialog").attr('aria-describedby')).dialog('destroy');
});

Ответ 8

Я наткнулся на то же самое и хотел поделиться своим решением:

<script type="text/javascript">
    $( "#dialog-confirm" ).dialog("option","buttons",
                {
                    "delete": function() {
                        $.ajax({
                            url: "delete.php"
                        }).done(function(msg) {
                         //here "this" is the ajax object                                       
                            $(this).dialog( "close" );
                        });

                    },
                    "cancel": function() {
                        //here, "this" is correctly the dialog object
                        $(this).dialog( "close" );
                    }
                });
</script>

потому что "this" ссылается на объект без диалога, я получил упомянутую ошибку.

Решение:

<script type="text/javascript">
    var theDialog = $( "#dialog-confirm" ).dialog("option","buttons",
                {
                    "delete": function() {
                        $.ajax({
                            url: "delete.php"
                        }).done(function(msg) {
                            $(theDialog).dialog( "close" );
                        });

                    },
                    "cancel": function() {
                        $(this).dialog( "close" );
                    }
                });
</script>

Ответ 9

У меня была эта проблема раньше, когда одно диалоговое окно выдавало эту ошибку, а все остальные работали отлично. Ответ был потому, что у меня был другой элемент с тем же id="dialogBox" else ware на странице. Я нашел эту нить во время поиска, так что, надеюсь, это поможет кому-то еще.

Ответ 10

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

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

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

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

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

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

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

см. ya.

Ответ 11

Это произошло для меня, когда мой аякс заменил содержимое на странице и в итоге появился два элемента того же класса для диалога, что означало, что когда моя строка закрывает диалог, выполненный на основе селектора классов CSS, он обнаружил два элемента: один и второй никогда не были инициализированы.

$(".dialogClass").dialog("close"); //This line was expecting to find one element but found two where the second had not been initialised.

Для любого из ASP.NET MVC это произошло из-за того, что действие моего контроллера возвращало полный вид, включая страницу общего размещения, в которой был элемент, когда он должен был возвращать частичный вид, поскольку javascript заменял только основную область содержимого.

Ответ 12

У меня была аналогичная проблема, которую я разрешил, определяя мой массив кнопок вне объявления диалога.

var buttonArray = {};
buttonArray["Ok"] = function() { $( this ).dialog( "close" );}

Ваши варианты:

modal: true,
autoOpen: false,
buttons: buttonArray

Ответ 13

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

Вот так:

var dd= $("#divDialog")
.dialog({
   height: 600,
   width: 600,
   modal: true,
   draggable: false,
   resizable: false
});

// . . .

dd.dialog('close');

Ответ 14

Я получал это сообщение об ошибке при попытке закрыть диалоговое окно с помощью кнопки внутри тела диалога. Я пытался использовать $('#myDialog').dialog('close');, который не работал.

В результате я нажал кнопку "x" в заголовке, используя:

$('.modal-header:first').find('button:first').click();

Ответ 15

Senguttuvan: ваше решение было единственным, что сработало для меня.

Функция btnClose() {
  $( "UI-диалог-Titlebar-близко." ) Триггер ('click').
}

Ответ 16

У меня такая же проблема, я открываю несколько диалоговых окон, и моя проблема заключалась в том, что содержимое должно быть удалено, чтобы данные формы остались с одинаковыми данными, тогда в диалоговом окне создаются эти параметры

var dialog = $("#dummy-1");

    dialog.html('<div style="position:absolute; top:15px; left:0px; right:0px; bottom:0px; text-align:center;"><img align="middle" src="cargando.gif"></div>');
    dialog.html(mensaje);
    dialog.dialog(
    {
        title:'Ventana de Confirmacion',
        width:400, 
        height:200, 
        modal:true,
        resizable: false,
        draggable:false,
        position: { my: "center center", at: "center center", of: window },
        buttons:
        [
            {
                text: "Eliminar",
                click: function() {
                    functionCall(dialog,var1,var2);
                }
            },
            {
                text: "Cerrar",
                click: function() {
                    dialog.dialog("close");
                }
            }
        ],
        close: function(event, ui)
        {
            dialog.dialog("close").dialog("destroy").remove();
        }
    });

и диалог передается как параметр функции для выполнения действия:

    function functionCall(dialogFormulario,var1,var2)
{
    //same action 
        dialogFormulario.dialog("close");

}

Здесь нужно только использовать .dialog( "закрыть" ) и нет .dialog( "destroy" ), потому что диалог вызовет его функцию close: и элемент не будет существовать

Ответ 17

У меня была аналогичная проблема, и в моем случае проблема была другой (я использую шаблоны Django).

Порядок JS был другим (я знаю, что первое, что вы проверяете, но я почти уверен, что это не так, но это было). Js, вызывающий диалог, вызывается до того, как была вызвана библиотека jqueryUI.

Я использую Django, поэтому наследовал шаблон и использовал {{super.block}} для наследования кода из блока и шаблона. Мне пришлось переместить {{super.block}} в конце блока, который решил проблему. Js, вызывающий диалог, был объявлен в классе Media в Django admin.py. Я потратил больше часа, чтобы понять это. Надеюсь, это поможет кому-то.

Ответ 18

Создайте отдельную функцию JavaScript, которую можно вызывать, чтобы закрыть диалоговое окно с помощью определенного идентификатора объекта, и поместите функцию за пределы $(document).ready() следующим образом:

function closeDialogWindow() { 
$('#dialogWindow').dialog('close');
}

ПРИМЕЧАНИЕ. Функция должна быть объявлена вне $(document).ready() поэтому jQuery не пытается вызвать событие закрытия в диалоговом окне перед его созданием в DOM.

Ответ 19

Вы можете объявить содержимое кнопки вне диалога, это работает для меня.

var closeFunction = function() {
    $(#dialog).dialog( "close" );
};

$('#dialog').dialog({
    modal: true,
    buttons: {
        Ok: closeFunction
    }
});

Ответ 20

Я знаю, что это очень старая проблема, но у меня возникла та же проблема, когда при навигации по угловому маршруту и при открытом диалоговом окне оно оставалось открытым. Итак, я нашел способ вызвать метод close в деструкторе контроллера маршрута. Но получил эту вышеупомянутую ошибку, если диалог не был открыт. Так что ответ таков: если вы закрываете диалоговое окно перед инициализацией, это произойдет из-за этой ошибки. Чтобы проверить, открыто ли диалоговое окно, закройте его, обернув ваше состояние закрытия в этом состоянии.

if($('#mydialog').dialog('isOpen')) { //close dialog code}