web-dev-qa-db-fra.com

jQuery UI "$ (" # datepicker "). datepicker n'est pas une fonction"

Lorsque j'utilise DatePicker, le plug-in d'interface utilisateur de jQuery, dans une page .aspx existante, des erreurs se produisent:

$("#datepicker").datepicker is not a function

Cependant, lorsque je copie et colle le même code qui crée et utilise datePicker dans un fichier HTML se trouvant également dans le même répertoire que la page aspx, cela fonctionne parfaitement. Cela m'amène à supposer que certains fichiers JS dans la page aspx empêchent le chargement correct des fichiers JS de l'interface utilisateur de datePicker ou peut-être de jQuery.

Quelqu'un peut-il confirmer mes convictions ou donner des conseils pour trouver le coupable qui interfère avec les plugins d'interface utilisateur de jQuery? 

asp.netjavascriptjquerydatepicker
103
burnt1ce

J'ai lutté avec un problème similaire pendant des heures. Il s'est ensuite avéré que jQuery a été inclus deux fois, une par le programme auquel j'ajoutais une fonction jQuery et une fois par notre débogueur interne.

183
Eugene van der Merwe

Si une autre bibliothèque utilise la variable $, vous pouvez le faire:

var $j = jQuery.noConflict();
$j("#datepicker").datepicker();

Assurez-vous également que vos scripts javascript sont dans le bon ordre afin que la bibliothèque principale jquery soit définie avant le fichier jquery.ui. J'ai eu des problèmes de cause.

31
MacAnthony

Cette erreur apparaît généralement lorsque vous manquez un fichier de l'ensemble d'interface utilisateur jQuery. 

Vérifiez à nouveau que vous avez tous les fichiers, les fichiers de l'interface utilisateur jQuery, ainsi que les fichiers CSS et les images, et qu'ils se trouvent à l'emplacement de fichier/répertoire correctement lié sur votre serveur.

18
random

Si vous pensez qu'il y a un conflit, vous pouvez utiliser jQuery.noConflict() dans votre code. Les détails sont dans les docs .

MAGIE DE RÉFÉRENCE - RACCOURCIS POUR JQUERY

Si vous n'aimez pas taper le texte complet "jQuery" tout le temps, il y en a raccourcis alternatifs:

Réaffectez jQuery à un autre raccourci var $j = jQuery; (Ceci pourrait être la meilleure approche pour les bibliothèques différentes.) technique, qui vous permet d’utiliser $ à l'intérieur d'un bloc de code sans écrasement permanent $:

(function($) { /* some code that uses $ */ })(jQuery)

Remarque: Si vous utilisez ceci technique, vous ne pourrez pas utiliser Méthodes prototypes à l'intérieur de cette capsule fonction qui s'attend à ce que $ soit Le prototype de $, alors vous faites un choix d’utiliser uniquement jQuery dans ce domaine bloc. Utilisez l'argument du DOM événement prêt: 

jQuery(function($) { /*some code that uses $ */ });

Remarque: Encore une fois, à l'intérieur de ce bloc, vous ne pouvez pas utiliser Méthodes de prototype

C'est à la fin de la documentation et pourrait vous être utile

8
AutomatedTester

jQuery “$ (” # datepicker “). datepicker n'est pas une fonction”

J'ai résolu le problème en plaçant les trois fichiers ci-dessous dans la section corps du formulaire à la fin. 

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
6
Krishna

Commencez par l'évidence: faites-vous bien référence au fichier jquery-ui.js? 

Essayez d’utiliser l’onglet réseau de firebug pour savoir s’il est chargé ou le code javascript Information\View de la barre d’outils Web Developer.

5
eKek0

Avez-vous essayé d’utiliser Firebug pour 1) déterminer qu’il n’ya pas d’erreur Javascript et 2) que l’élément #datepicker existe sur la page?

Il est fort probable qu’une erreur antérieure à l’appel DatePicker empêche son exécution.

3
1kevgriff

Je sais que cet article est assez ancien, mais pour référence, j'ai résolu ce problème en mettant à jour la version de datepicker

Cela vaut également la peine d’éviter des heures de débogage.

https://cdnjs.com/libraries/bootstrap-datepicker

2
Yannickv

Vérifiez également les autorisations pour le répertoire dans lequel vous téléchargez les fichiers. Pour une raison quelconque, lorsque j'ai téléchargé ceci, il a été enregistré par défaut dans un dossier sans accès autorisé! C'était le problème qui prenait une éternité, mais il me suffisait de modifier les droits d'accès au répertoire et à son contenu. Fonctionne très bien maintenant.

1
Matthew Fries

J'ai rencontré ce problème récemment - le problème était que j'avais inclus les fichiers de l'interface utilisateur jQuery dans la balise head, mais la bibliothèque Telerik que j'utilisais incluait jQuery au bas de la balise body (donc apparemment, réinitialiser jQuery et décharger l'interface plugins précédemment chargés).

La solution consistait à déterminer où jQuery était réellement inclus et à inclure les scripts de l'interface utilisateur jQuery par la suite.

1
user15486

Je viens d'avoir ce problème, et déplacer les références JS et le code vers le bas de la page avant que la balise </body> ne le corrige pour moi.

1
Banjer

Certains fichiers ne charge pas avant d'appeler.

Par exemple: Votre code:

<%= javascript_include_tag "distpicker.min" %>
<%= javascript_include_tag "distpicker.data.min" %>

Changer à ceci:

<%= javascript_include_tag "distpicker.data.min" %>
<%= javascript_include_tag "distpicker.min" %>
0
David tsang

Avez-vous essayé d’utiliser $ ("# <% = TxtDateElementId.ClientID%>"). Datepicker (); au lieu de $ ("# txtDateElementId"). datepicker (); lors de la sélection d’un élément par ID à l’aide de JQuery.

0
Emil Filip

Je pourrais résoudre ce problème en supprimant le paquet jquery sur le _Layout.cshtml

Entête

    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/kendo/2015.2.902/kendo.all.min.js"></script>
    ...

Bas de page

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

Changer le pied de page en

    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
0
jaimenino

Je viens de rencontrer un problème similaire. Lorsque j'ai changé ma référence de script de balises à fermeture automatique (c.-à-d. <script src=".." />) en nœuds vides (c.-à-d. <script src=".."></script>), mes erreurs ont disparu et je pouvais soudainement faire référence aux fonctions de l'interface utilisateur jQuery.

À ce moment-là, je n'avais pas réalisé que c'était juste une farce cérébrale de ma part que je ne la ferme pas correctement. (Je poste ceci simplement sur la possibilité que quelqu'un d'autre rencontrant le fil ait un problème similaire.)

0
Peter Bernier