jquery ui Dialog: impossible d'appeler des méthodes sur la boîte de dialogue avant l'initialisation

101

J'ai une application sur jquery 1.5 avec des dialogues qui fonctionnait bien. Bien que j'aie beaucoup de gestionnaires .live, j'ai changé cela en .on. Pour cela, je dois mettre à jour jquery (maintenant 1.8.3 et jquerui 1.9.1).

Maintenant, j'ai: Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

Voici le code:

Javascript

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

$(document).ready(function() {
$("#divDialog").dialog(opt);
    $("#divDialog").dialog("open");
...    

Code HTML

<div id="divDialog">
<div id="divInDialog"></div>
</div>

Une idée de pourquoi cela pourrait se produire?

core-chain.io
la source

Réponses:

136

Essayez plutôt ceci

$(document).ready(function() {
  $("#divDialog").dialog(opt).dialog("open");
});

Vous pouvez également faire:

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

C'est parce que la boîte de dialogue n'est pas stockée dans $('#divDialog'), mais sur un nouveau div qui est créé à la volée et renvoyé par la .dialog(opt)fonction.

Agenouillez-vous devant zod
la source
5
Cela a fonctionné pour moi. Dois-je initialiser la boîte de dialogue chaque fois que je veux l'ouvrir comme ça ou seulement la première fois? il existe de nombreux dialogues. N'existe-t-il aucun moyen de définir les options initiali puis d'ouvrir les boîtes de dialogue par des boutons?
core-chain.io
6
J'ai trouvé que cette solution résolvait également l'erreur "Impossible d'appeler les méthodes sur la boîte de dialogue avant l'initialisation; tentative d'appel de la méthode 'ouvrir'" erreur qui se produit lorsqu'une boîte de dialogue est ouverte, fermée avec succès, puis les utilisateurs essaient d'ouvrir la boîte de dialogue une deuxième fois . Merci @ZOD
spadelives
Vous a donné +1, car cela a également résolu mon problème, mais pourriez-vous s'il vous plaît expliquer pourquoi cela fonctionne?
Igor L.
2
@IgorLacik Je suppose que .dialog () renvoie une instance de lui-même afin que vous puissiez effectuer un chaînage. Par conséquent .dialog (opt) .dialog ('open') instancie un objet de dialogue (le premier appel) et effectue ensuite 'open' dessus. Je suppose alors qu'appeler $ (obj) .dialog (opt) puis $ (obj) .dialog ('open') par la suite instanciera des objets de dialogue séparés sur l'objet jquery, de sorte que le deuxième ne voit pas le premier options de configuration. Sans approfondir le code de la boîte de dialogue, c'est difficile à dire avec certitude, et je n'ai pas le temps pour ça: D
nealio82
J'ai mis à jour la question pour expliquer ce que vous avez essayé d'expliquer.
JotaBe
23

Si vous ne pouvez pas mettre à niveau jQuery et que vous obtenez:

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

Vous pouvez le contourner comme ceci:

$(selector).closest('.ui-dialog-content').dialog('close');

Ou si vous contrôlez la vue et savez qu'aucune autre boîte de dialogue ne devrait être utilisée sur toute la page, vous pouvez faire:

$('.ui-dialog-content').dialog('close');

Je ne recommanderais de le faire que si l'utilisation closestcause un problème de performances. Il existe probablement d'autres moyens de contourner ce problème sans effectuer de fermeture globale sur toutes les boîtes de dialogue.

Cymen
la source
10

J'ai eu cette erreur lorsque je n'ai mis à jour que la bibliothèque jquery sans mettre à jour la bibliothèque jqueryui en parallèle. J'utilisais jquery 1.8.3 avec jqueryui 1.9.0. Cependant, lorsque j'ai mis à jour jquery 1.8.3 vers 1.9.1, j'ai eu l'erreur ci-dessus. Quand j'ai commenté l'infraction.close lignes de méthode , cela a ensuite généré une erreur de non-recherche.browserdans la bibliothèque jquery qui était obsolète dans jquery 1.8.3 et supprimée de jquery 1.9.1. Donc, fondamentalement, la bibliothèque jquery 1.9.1 n'était pas compatible avec la bibliothèque jquery ui 1.9.0 malgré la page de téléchargement de jquery ui disant qu'elle fonctionne avec jquery 1.6+. Essentiellement, il y a des bogues non signalés lorsque vous essayez d'utiliser des versions différentes des deux. Si vous utilisez la version jquery fournie avec le téléchargement jqueryui, je suis sûr que tout ira bien, mais c'est lorsque vous commencez à utiliser différentes versions que vous sortez des sentiers battus et que vous obtenez des erreurs comme celle-ci. Donc, en résumé, cette erreur provient de versions mal adaptées (dans mon cas en tout cas).

johntrepreneur
la source
4
J'ai résolu ce problème en mettant également à jour ma version jquery ui vers la 1.9.2, puis cela a fonctionné. Ainsi, jquery 1.9.1 avec jquery ui 1.9.2 supprime l'erreur ci-dessus.
johntrepreneur
4

Donc, vous utilisez ceci:

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

et si vous ouvrez une vue partielle MVC dans Dialog, vous pouvez créer dans l'index un bouton caché et un é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:

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

à plus.

Danilo Antonietto
la source
2

Si vous souhaitez ouvrir la boîte de dialogue immédiatement lorsque la boîte de dialogue est initialisée ou que la page est prête, vous pouvez également définir le paramètre autoOpensur truedans l'objet d'options de la boîte de dialogue:

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

Ainsi, vous n'avez pas besoin d'appeler le dialogue `$ (" # divDialog "). (" Open ");

Lorsque l'objet de dialogue est initialisé, la boîte de dialogue s'ouvre automatiquement.

Gašper Sladič
la source
2

La nouvelle version de l'interface utilisateur de jQuery ne vous permettra pas d'appeler des méthodes d'interface utilisateur sur une boîte de dialogue qui n'est pas initialisée. Pour contourner ce problème, vous pouvez utiliser la vérification ci-dessous pour voir si la boîte de dialogue est active.

if (modalDialogObj.hasClass('ui-dialog-content')) {
    // call UI methods like modalDialogObj.dialog('isOpen')
} else {
    // it is not initialized yet
}
Tomin
la source
0

C'est aussi un travail autour:

$("div[aria-describedby='divDialog'] .ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close").click();
Damian Królikowski
la source
0

J'ai simplement dû ajouter le ScriptManager à la page. Problème résolu.

gnardizzi
la source
0

Dans mon cas, le problème était que j'avais appelé $("#divDialog").removeData(); dans le cadre de la réinitialisation des données de mes formulaires dans la boîte de dialogue.

Cela m'a amené à effacer une structure de données nommée, uiDialogce qui signifiait que la boîte de dialogue devait se réinitialiser.

J'ai remplacé .removeData()par des suppressions plus spécifiques et tout a recommencé à fonctionner.

AnthonyVO
la source
0

Mon cas est différent, il échoue à cause de la portée de `` ceci '':

//this fails:
$("#My-Dialog").dialog({
  ...
  close: ()=>{
    $(this).dialog("close");
  }
});

//this works:
$("#My-Dialog").dialog({
  ...
  close: function(){
    $(this).dialog("close");
  }
});
datdinhquoc
la source
-1

J'ai reçu ce message d'erreur car j'avais la balise div sur la vue partielle au lieu de la vue parent

user1152145
la source
1
Et qu'est-ce que cela signifie exactement?
AaA
1
Ceci est mal expliqué, mais valable. Dans MVC, j'avais la balise div contenant pour la boîte de dialogue sur ma vue partielle. Lorsque j'ai déplacé la balise div contenant vers la page parent, la boîte de dialogue fonctionnait correctement.
Paulj