Erreur JQuery: impossible d’appeler des méthodes dans un dialog avant l’initialisation; tenté d’appeler la méthode ‘close’

Je reçois soudainement cette erreur de jQuery:

Erreur: impossible d’appeler des méthodes sur un dialog avant l’initialisation; tenté d’appeler la méthode ‘close’

Plugins

  

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

 

On dirait que vos boutons ne sont pas déclarés correctement (selon la dernière documentation de l’interface utilisateur jQuery ).

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’une boîte de dialog 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 qui provoquait cette erreur.

Essayez ceci – ça marche 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

Im a également eu la même erreur: impossible d’appeler des méthodes sur le dialog avant l’initialisation; tenté d’appeler la méthode ‘close’

ce que j’ai fait est que j’ai déclenché l’événement bouton de fermeture qui se trouve dans l’en-tête de la boîte de dialog comme

cela fonctionne très bien pour moi pour fermer la boîte de dialog

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

Votre $(this).dialog("close") par hasard appelé depuis un callback “succès” Ajax? Si c’est le cas, essayez d’append context: this comme l’une des options de votre $.ajax() , comme ceci:

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

pour une raison quelconque, l’interface utilisateur de jQuery essaiera 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 ça s’est arrêté une fois que j’ai fait ce changement.

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

J’ai eu la même erreur dans 1.10.2. Dans mon cas, je voulais que le clic sur la superposition d’arrière-plan masque la boîte de dialog actuellement visible, quel que soit l’élément sur lequel elle était basée. J’ai donc eu ceci:

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

Cela fonctionnait, donc je pense qu’ils ont dû supprimer le support de JQUI pour appeler .dialog () sur le popup lui-même.

Ma solution de contournement ressemble à ceci:

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

J’ai eu ce problème une fois auparavant où une boîte de dialog jetait cette erreur, alors que tous 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 MVC dans Dialog, vous pouvez créer dans index un bouton masqué et un événement click JQUERY:

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

alors à l’intérieur de la vue partielle html vous appelez le déclencheur du bouton cliquez sur comme:

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

à plus.

Cela m’est arrivé lorsque mon ajax remplaçait le contenu de la page et finissait avec deux éléments de la même classe pour le dialog, ce qui signifiait que lorsque ma ligne fermait le dialog basé sur le sélecteur de classe CSS, il trouvait deux éléments non le second n’avait jamais été initialisé.

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

Pour toute personne sur ASP.NET MVC, cela était dû au fait que mon action de contrôleur renvoyait une vue complète, y compris la page de disposition partagée qui contenait l’élément alors qu’elle devrait renvoyer une vue partielle car le javascript remplaçait uniquement la zone de contenu principale.

Au bout d’une heure, j’ai trouvé la meilleure approche. nous devrions enregistrer le résultat du dialog dans la variable, après cette méthode d’appel de variable.

Comme ça:

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

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 dialog.

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

Vos options deviendraient:

 modal: true, autoOpen: false, buttons: buttonArray 

Je suis tombé sur la même chose et je voulais partager ma solution:

  

Parce que “this” fait référence à un object non-dialogué, j’ai eu l’erreur mentionnée.

Solution:

  

Je recevais ce message d’erreur lorsque j’essayais de fermer la boîte de dialog en utilisant un bouton à l’intérieur du corps du dialog. J’ai essayé d’utiliser $('#myDialog').dialog('close'); qui n’a pas fonctionné.

J’ai fini par déclencher l’action clic du bouton ‘x’ sur l’en-tête en utilisant:

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

Senguttuvan: votre solution était la seule chose qui fonctionnait pour moi.

function btnClose () {
$ (“. ui-dialog-titlebar-close”). sortinggger (‘clic’);
}

J’ai le même problème, j’ouvre plusieurs boîtes de dialog mon problème était ce que le contenu devrait être supprimé pour empêcher les données de formulaire de restr avec les mêmes données, alors la boîte de dialog est créée ces parameters

 var dialog = $("#dummy-1"); dialog.html('
'); 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 la boîte de dialog est transmise en tant que paramètre à la fonction pour effectuer l’action:

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

}

Ici, il suffit d’utiliser .dialog (“close”) et pas de .dialog (“destroy”) car le dialog appellera sa fonction close: et l’élément n’existera pas

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 que vous vérifiez, mais j’étais presque sûr que ce n’était pas le cas, mais c’était le cas). Le js appelant le dialog a été appelé avant l’appel de la bibliothèque jqueryUI.

J’utilise Django, héritant ainsi d’un template et utilisant {{super.block}} pour hériter aussi bien du code du bloc que du template. J’ai dû déplacer {{super.block}} à la fin du bloc qui a résolu le problème. Le js appelant le dialog 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 cela aide quelqu’un.