it-swarm.com.ru

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

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

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

Плагины

 <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>
50
devdar

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

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

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

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

24
Behr

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

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

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

14
EdsonF

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

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

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

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

Ваш $(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" );
                }
            });
        }
    }
});
8
Adrian Lopez

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

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

Я получил ту же ошибку в 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');
});
3
Peter Herdenborg

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

<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>
1
osh

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

1
Andrew Fox

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

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

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

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

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

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

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

до встречи.

1
Danilo Antonietto

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

1
Alan Macdonald

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

Я закончил тем, что запустил действие нажатия кнопки 'x' в заголовке, используя:

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

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

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

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

0
John Verco

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

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

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

modal: true,
autoOpen: false,
buttons: buttonArray
0
stead

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

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 ("close") и no .dialog ("destroy"), потому что диалог вызовет свою функцию close: и элемент не будет существовать

0
KristKing

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

Как это:

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

// . . .

dd.dialog('close');
0
Hamed Khatami

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

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

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

function btnClose () { 
$ ( "UI-диалог-Titlebar-близко") триггер (до щелчка). 
}

0
user1229595

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

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

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

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

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

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

0
Anupam