web-dev-qa-db-fra.com

boîte de dialogue jquery ui: impossible d'appeler des méthodes dans une boîte de dialogue avant l'initialisation

J'ai une application sur jquery 1.5 avec des dialogues qui ont bien fonctionné . Alors que j'ai 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 pourquoi cela pourrait se produire?

jquerydialogjquery-ui-dialog
91
core-chain.io

Essayez ceci à la place

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

Vous pouvez aussi faire:

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

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

123
Kneel-Before-ZOD

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 suit:

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

Ou, si vous contrôlez la vue et savez qu'aucun autre dialogue ne doit être utilisé sur la page entière, vous pouvez effectuer les opérations suivantes:

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

Je ne recommanderais cela que si l'utilisation de closest pose un problème de performances. Il existe probablement d'autres moyens de contourner le problème sans effectuer une fermeture globale de tous les dialogues.

18
Cymen

J'ai eu cette erreur quand j'ai seulement mis à jour 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 à 1.9.1, j'ai eu l'erreur ci-dessus. Lorsque j'ai commenté les lignes de méthode .close incriminées, il a ensuite émis une erreur indiquant de ne pas trouver .browser dans la bibliothèque jQuery qui était obsolète dans jQuery 1.8.3 et supprimé de jQuery 1.9.1. En gros, 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 indiquant que cela fonctionnait avec jquery 1.6+. Il existe essentiellement des bogues non signalés lorsque vous essayez d'utiliser des versions différentes des deux. Si vous utilisez la version de jquery fournie avec le téléchargement de 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 appariées (dans mon cas en tout cas).

9
johntrepreneur

Donc, vous utilisez ceci:

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 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 suit:

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

à plus.

2
Danilo Antonietto

Si vous souhaitez ouvrir le dialogue immédiatement lorsque le dialogue est initialisé ou que la page est prête, vous pouvez également définir le paramètre autoOpen sur true dans l'objet options de dialog

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

Ainsi, vous n’avez pas à appeler le `$ (" # divDialog "). Dialog (" open "); 

Lorsque l'objet de dialogue est initialisé, le dialogue s'ouvre automatiquement.

2
Gašper Sladič

La nouvelle version de l'interface utilisateur de jQuery ne vous permettra pas d'appeler des méthodes d'interface utilisateur dans des boîtes de dialogue non initialisées. Pour contourner le 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
}
1
Tomin

C'est aussi un travail autour de:

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

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

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

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

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

Cela m'a amené à effacer une structure de données nommée uiDialog, ce qui signifiait que le dialogue devait être réinitialisé.

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

0
AnthonyVO

Je devais simplement ajouter le ScriptManager à la page. Problème résolu.

0
gnardizzi