Проверяется диалог IsOpen бросков «не может вызывать методы в диалоговом окне предварительной инициализации» ошибка

Question

Я использую диалог и проверки его с помощью кода, который я нашел в документации

var isOpen = $("#dialogName").dialog("isOpen"); 
$("#here").on("click", function(e){ 
    if(isOpen){ 
     $("#dialogName").dialog("close"); 
    } 
}); 

Иногда я получаю ошибку:

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

И иногда он не может найти isOpen. То, что я хочу сделать, это:

При щелчке #here он должен проверить, жив ли диалог, тогда close в противном случае ничего не делать.

Answer 1

isOpen - это метод, вызываемый в существующем диалоговом окне, в то время как диалог еще не инициализирован.

Сначала вы должны сначала инициализировать диалог, затем внутри обработчик события click проверить, есть ли в настоящее время диалоговое окно isOpen.

// initialize the dialog: 
var myDialog = $("#dialogName").dialog({ 
    // dialog settings: 
    autoOpen : false, 
    // ... 
}); 

$("#here").on("click", function(e){ 
    // on click, check if is opened: 
    var isOpen = myDialog.dialog("isOpen"); 
    if(isOpen){ 
     myDialog.dialog("close"); 
    } 
}); 

DEMO

Answer 2

Похоже, вы также должны проверить, если #dialogNameбыл dialogified. Один из возможных способов проверить это посмотреть на имена классов, присвоенных диалогового элемента:

$("#dialog").hasClass("ui-dialog-content") && $("#dialog").dialog("isOpen") 

Демо

$(function() { 
 
    $("#init").one("click", function() { 
 
    $("#dialog").dialog(); 
 
    $(this).val("Click to open dialog").on("click", function() { 
 
     $("#dialog").dialog("open"); 
 
    }); 
 
    }); 
 
    $("#here").on("click", function(e) { 
 
    if ($("#dialog").hasClass("ui-dialog-content") && $("#dialog").dialog("isOpen")) { 
 
     $("#dialog").dialog("close"); 
 
    } else { 
 
     alert("Dialog not initialized or dialog not open"); 
 
    } 
 
    }); 
 
});

@import url("//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/redmond/jquery-ui.min.css");

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script> 
 

 
<div id="dialog" title="Dialog title" style="display: none;">Dialog content</div> 
 

 
<input type="button" id="init" value="Click to create dialog"> 
 
<input type="button" id="here" value="Click to close dialog">