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

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?

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.

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.

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

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.

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.

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
}

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();

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

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.

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

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