web-dev-qa-db-fra.com

Erreur: TypeError: $ (...). Le dialogue n'est pas une fonction

J'ai un problème à faire en sorte qu'une boîte de dialogue fonctionne comme une fonctionnalité de base. Voici mes importations de sources jQuery:

<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.11.1.js"></script>
<script type="text/javascript" src="scripts/json.debug.js"></script>

Html:

<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>

<script type="text/javascript">
    $("#opener").click(function() {
            $("#dialog1").dialog('open');
    });
</script>

D'après les publications, cela ressemble à un problème d'importation de bibliothèque. J'ai téléchargé les dépendances JQuery UI Core, Widget, Mouse et Position.

Des idées?

javascriptjqueryjquery-ui-dialog
49
mzereba

Assurez-vous d’insérer la version complète de jQuery UI. Aussi, vous devriez commencer par ouvrir le dialogue:

$(function () {
  $( "#dialog1" ).dialog({
    autoOpen: false
  });
  
  $("#opener").click(function() {
    $("#dialog1").dialog('open');
  });
});
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
 
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />

<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>
80
dashtinejad

Si vous commentez le code suivant depuis la page _Layout.cshtml, la fenêtre contextuelle modale commencera à fonctionner:

    </footer>

    @*@Scripts.Render("~/bundles/jquery")*@
    @RenderSection("scripts", required: false)
    </body>
</html>
8
Rocky Royalson

si, pour une raison quelconque, deux versions de jQuery sont chargées (ce qui n'est pas recommandé), appeler $.noConflict(true) à partir de la deuxième version ramènera les variables globales jQuery à celles de la première version.

Parfois, il peut s'agir d'un problème avec l'ancienne version (ou une version non stable) de fichiers JQuery

Solution use $.noConflict();

<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
   $("#opener").click(function() {
            $("#dialog1").dialog('open');
    });
});
// Code that uses other library's $ can follow here.
</script>
7
Manoj Patil

Changez jQueryUI en version 1.11.4 et assurez-vous que jQuery n'est pas ajouté deux fois.

1
crazysj

J'ai eu un problème similaire et dans mon cas, le problème était différent (j'utilise Django modèles).

L'ordre de JS était incorrect (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 la boîte de dialogue était appelé avant l'appel de la bibliothèque jqueryUI.

J'utilise Django, donc hériter d'un modèle et utiliser {{super.block}} pour hériter du code du bloc ainsi que du modèle. J'ai dû déplacer {{super.block}} à la fin du bloc, ce qui a résolu le problème. Le js appelant la boîte de dialogue 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 ça aide quelqu'un.

0
Anupam

Voici la liste complète des scripts nécessaires pour résoudre ce problème. (Assurez-vous que le fichier existe dans le chemin indiqué)

   <script src="@Url.Content("~/Scripts/jquery-1.8.2.js")" type="text/javascript">
    </script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.24.js")" type="text/javascript">
    </script>
    <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript">
    </script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript">
    </script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript">
    </script>

et également inclure le lien css ci-dessous dans _Layout.cshtml pour un popup élégant.

<link rel="stylesheet" type="text/css" href="../../Content/themes/base/jquery-ui.css" />
0
josepainumkal

Je viens de vivre cela avec la ligne:

$('<div id="editor" />').dialogelfinder({

J'ai eu l'erreur "dialogelfinder n'est pas une fonction" car un autre composant insérait un appel pour charger une ancienne version de JQuery (1.7.2) après le chargement de la version la plus récente.

Dès que j'ai commenté le deuxième chargement, l'erreur a disparu.

0
Bob Ray