web-dev-qa-db-fra.com

Boîte de dialogue de l'interface utilisateur JQuery - * La boîte de dialogue n'est pas une fonction * Erreur

Je développe un site en utilisant pinax. Dans l'un de mes modèles, j'essaie d'ouvrir une boîte de dialogue JQuery simple. Cependant, je continue à avoir l'erreur javascript "Dialog not a function". J'utilise jquery 1.2.6 et jquery-ui 1.6. Mon javascript et HTML sont les suivants: 

<html>
<head>
<link type="text/css" href="/site_media/smoothness/ui.all.css" rel="stylesheet" />
<script src="/site_media/jquery.js" type="text/javascript"></script>
<script src="/site_media/ui/ui.core.js" type="text/javascript"></script>
<script src="/site_media/ui/ui.draggable.js" type="text/javascript"></script>
<script src="/site_media/ui/ui.resizeable.js" type="text/javascript"></script>
<script src="/site_media/ui/ui.dialog.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
                    $('#dialogbox').dialog();
            });
 </script>
 </head>
 <body>
   <div id="dialogbox" title="dialog title">
     <p>Test dialog</p>
   </div>
 </body>
 </html>

Quelqu'un peut-il s'il vous plaît expliquer pourquoi cela se produit?

jqueryjquery-uijquery-ui-dialog
17
kartikq

J'ai essayé de dupliquer votre erreur à la fois en utilisant les versions publiques de Google et en téléchargeant l'ancienne version (1.6) à partir du site de l'interface utilisateur de jQuery et en incluant manuellement les fichiers. Ni l'un ni l'autre n'a posé de problème ( http://jsbin.com/uloqi pour le voir fonctionner). 

Cela signifie donc que l’un des problèmes suivants pourrait résoudre votre problème:

  1. Utilisez un outil tel que Firebug pour Firefox pour vérifier que chaque fichier JS est inclus.
  2. Assurez-vous qu'il n'y a pas d'autre JS sur la page qui pourrait causer une erreur.
  3. Vérifiez que vous avez les versions correctes des fichiers téléchargés.

Je ne sais pas quoi vous dire d'autre puisque le code que vous avez collé, lorsqu'il est associé aux bons fichiers, fonctionne parfaitement.

36
Doug Neiner

J'ai eu exactement le même problème que celui décrit ci-dessus (boîte de message ne s'ouvre qu'une fois). Le problème que j’avais, c’est que le code HTML dans la boîte de message charge également jquery. Comme je n'en avais pas besoin, je pouvais l'enlever sans problèmes. Sinon, vous pourriez avoir à cerner le problème un peu plus loin.

4
Sander

Dans certaines circonstances, vous pouvez obtenir cette erreur si une version de JQuery multible et différente sont chargées en même temps.

Dans mon cas, j'ai une page ASP qui utilisait un maître . Mon maître incluait JQuery 1.4.2.minMon page aspx que j'avais inclus JQuery 1.7.2.min

Lorsque des fonctions JQuery ont été appelées à partir d’un contrôle, la question concernant le choix de JQuery a été perdue. Même si ce script pouvait indiquer que JQuery était chargé (il pouvait afficher la version de JQuery), aucune fonction JQuery n’était trouvée.

Lorsque j'ai supprimé mon inclusion JQuery 1.7.2.min locale de mon fichier aspx et mis à jour mon matériel de 1.4.2.min à 1.7.2.min, le problème a disparu.

2
Paul Gorbas

La réponse de Doug Neiner a vraiment aidé. Mon cas était un peu plus compliqué, mais arrive toujours au même point:

J'ai ouvert une boîte de dialogue depuis la page A qui charge la page B comme ceci:

$('#MyDiv').dialog({
    autoOpen: false
})
$("#MyDiv").load("PageB.aspx", function () {
    $("#MyDiv").dialog("open");
});

Le problème est que jQuery était inclus dans les pages A et B. Attention: si vous chargez une autre page dans une boîte de dialogue, il n'est pas nécessaire d'inclure le même js.

2
user1575422

J'ai juste ce problème aussi et la seule solution qui a fonctionné pour moi était de sauvegarder la référence de dialogue telle que:

var confirmDialog = $( "#dialog-confirm" ).dialog({
    autoOpen: false
});
$("#test").click(function () {
    confirmDialog.dialog('open');
});

Sinon, tout ce que j'ai essayé a échoué 

.dialog () n'est pas une erreur de fonction
J'espère que cette aide.

0
Striped

Comme déjà expliqué, vous remplacez probablement les bibliothèques existantes.

Une solution consiste à s'assurer que les fichiers corrects sont chargés.

Une autre méthode consiste à insérer un iframe entre la boîte de dialogue et le contenu de la boîte de dialogue. Les iframes sont traités par le navigateur comme une page séparée avec ses propres scripts. Ainsi, les scripts du contenu "au-dessus" de l'iframe seront séparés des scripts du dialogue "sous" l'iframe. 

0
Gerhard Liebenberg

J'ai eu le même problème. Le mien a été auto-infligé par une mise à jour de l'interface utilisateur jQuery du 1.11.4 au 1.12.1. J'ai installé la mise à niveau à l'aide de NuGet et NuGet a supprimé l'ancienne référence 1.11.4 de mon projet mais n'a jamais ajouté la nouvelle référence de projet. 

L'exécution locale de l'application a bien fonctionné, mais lors de son déploiement, le nouveau fichier 1.12.1 n'a jamais été créé avec la publication. J'espère que ça aidera quelqu'un d'autre.

0
Rafiki