Erreur JQuery: impossible d'appeler des méthodes dans la boîte de dialogue avant l'initialisation; a tenté d'appeler la méthode 'close'
Je reçois soudain cette erreur de jQuery:
Erreur: impossible d'appeler des méthodes dans la boîte de dialogue avant l'initialisation; a tenté d'appeler la méthode 'close'
Plugins
<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>
Code jQuery
Je reçois ces messages dans la fonction suivante:
$(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>
On dirait que vos boutons ne sont pas déclarés correctement (selon la dernière documentation de l'interface utilisateur de jQuery de toute façon).
essayez ce qui suit:
$( ".selector" ).dialog({
buttons: [{
text: "Ok",
click: function() {
$( this ).dialog( "close" );
}
}]
});
J'ai eu un problème similaire lors de l'ouverture d'un dialogue avec une mise en page partielle dans asp.net MVC. Je chargeais la bibliothèque jQuery sur la page partielle ainsi que la page principale à l'origine de cette erreur.
Essayez ceci - cela fonctionne pour moi:
$(".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;
});
J'espère que cela vous aidera
J'ai aussi la même erreur: impossible d'appeler des méthodes dans la boîte de dialogue avant l'initialisation; a tenté d'appeler la méthode 'close'
ce que j’ai fait c’est que j’ai déclenché l’événement du bouton de fermeture qui se trouve dans l’en-tête du dialogue
cela fonctionne très bien pour moi de fermer le dialogue
function btnClose() {
$(".ui-dialog-titlebar-close").trigger('click');
}
Votre $(this).dialog("close") est-il appelé par hasard de l'intérieur d'un rappel "succès" d'Ajax? Si c'est le cas, essayez d'ajouter context: this parmi les options de votre appel $.ajax(), comme suit:
$("#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" );
}
});
}
}
});
il semble que pour une raison quelconque, jQuery UI tente d'exécuter tout le code défini dans les boutons au moment de la définition. C'est fou mais j'ai eu le même problème et il s'est arrêté une fois que j'ai fait ce changement.
if ($(this).dialog.isOpen === true) {
$(this).dialog("close");
}
J'ai la même erreur en 1.10.2. Dans mon cas, je voulais faire en cliquant sur la superposition d'arrière-plan masquer la boîte de dialogue actuellement visible, quel que soit l'élément sur lequel elle était basée. Donc j'ai eu ceci:
$('body').on("click", ".ui-widget-overlay", function () {
$(".ui-dialog").dialog('destroy');
});
Auparavant, cela fonctionnait, donc je pense qu'ils ont dû supprimer le support dans JQUI pour appeler .dialog () sur le popup lui-même à un moment donné.
Ma solution de contournement ressemble à ceci:
$('body').on("click", ".ui-widget-overlay", function () {
$('#' + $(".ui-dialog").attr('aria-describedby')).dialog('destroy');
});
Je suis tombé sur la même chose et je voulais partager ma solution:
<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>
parce que "ceci" fait référence à un objet non dialogué, j'ai eu l'erreur mentionnée.
Solution:
<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>
J'ai eu ce problème une fois auparavant où une boîte de dialogue lançait cette erreur, alors que toutes les autres fonctionnaient parfaitement. La réponse était parce que j'avais un autre élément avec le même id="dialogBox" else ware sur la page. J'ai trouvé ce fil lors d'une recherche, alors j'espère que cela aidera quelqu'un d'autre.
Donc, vous utilisez ceci:
var opt = {
autoOpen: false,
modal: true,
width: 550,
height:650,
title: 'Details'
};
var theDialog = $("#divDialog").dialog(opt);
theDialog.dialog("open");
et si vous ouvrez une vue partielle de MVC dans la boîte de dialogue, vous pouvez créer dans l'index un bouton caché et l'événement de clic JQUERY
$("#YourButton").click(function()
{
theDialog.dialog("open");
OR
theDialog.dialog("close");
});
puis à l'intérieur de la vue partielle html vous appelez le bouton déclencheur cliquez comme suit:
$("#YouButton").trigger("click")
à plus.
Cela m’était arrivé lorsque mon ajax remplaçait le contenu de la page et se terminait par deux éléments de la même classe pour le dialogue. Lorsque ma ligne fermait le dialogue exécuté en fonction du sélecteur de classe CSS, elle retrouvait deux éléments, pas un et le le second n’a jamais été initialisé.
$(".dialogClass").dialog("close"); //This line was expecting to find one element but found two where the second had not been initialised.
Cela se produisait pour tous les utilisateurs d'ASP.NET MVC, car l'action de mon contrôleur renvoyait une vue complète, y compris la page de disposition partagée contenant l'élément alors qu'elle aurait dû renvoyer une vue partielle, car javascript ne remplaçait que la zone de contenu principale.
Je recevais ce message d'erreur lorsque j'essayais de fermer la boîte de dialogue en utilisant un bouton à l'intérieur du corps de la boîte de dialogue. J'ai essayé d'utiliser $('#myDialog').dialog('close'); qui n'a pas fonctionné.
J'ai fini par déclencher l'action de clic du bouton 'x' sur l'en-tête en utilisant:
$('.modal-header:first').find('button:first').click();
Créez une fonction JavaScript distincte pouvant être appelée pour fermer la boîte de dialogue à l'aide de l'ID d'objet spécifique et placez la fonction en dehors de $(document).ready() comme ceci:
function closeDialogWindow() {
$('#dialogWindow').dialog('close');
}
REMARQUE: La fonction doit être déclarée en dehors de $(document).ready() pour que jQuery ne tente pas de déclencher l'événement close dans la boîte de dialogue avant sa création dans le DOM.
J'ai eu un problème similaire que j'ai résolu en définissant mon tableau de boutons en dehors de la déclaration de dialogue.
var buttonArray = {};
buttonArray["Ok"] = function() { $( this ).dialog( "close" );}
Vos options deviendraient:
modal: true,
autoOpen: false,
buttons: buttonArray
j'ai le même problème, j'ouvre plusieurs dialogues mon problème était ce que le contenu devait être supprimé pour éviter que les données de formulaire restent avec les mêmes données, alors le dialogue est créé ces paramètres
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();
}
});
et le dialogue est passé en paramètre à la fonction pour effectuer l'action:
function functionCall(dialogFormulario,var1,var2)
{
//same action
dialogFormulario.dialog("close");
}
Ici, il faut seulement utiliser .dialog ("fermer") et non .dialog ("détruire") car le dialogue appellera sa fonction close: et l'élément n'existera pas
Après une heure, j’ai trouvé la meilleure approche . Nous devrions enregistrer le résultat du dialogue dans une variable, après cette méthode de fermeture d’appel de la variable.
Comme ça:
var dd= $("#divDialog")
.dialog({
height: 600,
width: 600,
modal: true,
draggable: false,
resizable: false
});
// . . .
dd.dialog('close');
Je sais que c'est très vieux, mais j'ai eu le même problème quand je devais naviguer dans une route angulaire et que le dialogue était ouvert, il restait ouvert. J'ai donc eu une solution de contournement pour appeler la méthode close dans le destructeur de contrôleur de route. Mais obtenu cette erreur mentionnée ci-dessus si la boîte de dialogue n'était pas ouverte. Donc, la réponse est que si vous fermez la boîte de dialogue avant l'initialisation, cette erreur surviendra. Pour vérifier si la boîte de dialogue est ouverte, fermez-la en enveloppant votre état de fermeture dans ces conditions.
if($('#mydialog').dialog('isOpen')) { //close dialog code}
Senguttuvan: votre solution était la seule chose qui a fonctionné pour moi.
fonction btnClose () {
$ (". ui-dialog-titlebar-close"). trigger ('clic');
}
Vous voudrez peut-être déclarer le contenu du bouton en dehors de la boîte de dialogue, cela fonctionne pour moi.
var closeFunction = function() {
$(#dialog).dialog( "close" );
};
$('#dialog').dialog({
modal: true,
buttons: {
Ok: closeFunction
}
});
J'ai eu un problème similaire et dans mon cas, le problème était différent (j'utilise des modèles Django).
L'ordre de JS était différent (je sais que c'est la première chose à vérifier, mais j'étais presque sûr que ce n'était pas le cas, mais c'était le cas). Le js appelant la boîte de dialogue était appelé avant l'appel de la bibliothèque jqueryUI.
J'utilise Django, donc hériterais d'un modèle et utiliser {{super.block}} pour hériter du code du bloc ainsi que du modèle. J'ai dû déplacer {{super.block}} à la fin du bloc, ce qui a résolu le problème. Le js appelant la boîte de dialogue a été déclaré dans la classe Media dans le fichier admin.py de Django. J'ai passé plus d'une heure à le comprendre. J'espère que ça aide quelqu'un.