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

Lorsque j'utilise DatePicker, le plugin d'interface utilisateur de jQuery, dans une page .aspx existante, j'obtiens des erreurs qui:

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

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

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

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

S'il existe une autre bibliothèque qui utilise la variable $, vous pouvez le faire:

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

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

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

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

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" />

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

REFERENCING MAGIC - RACCOURCIS POUR JQUERY

Si vous n'aimez pas taper le "jQuery" complet tout le temps, il existe quelques raccourcis alternatifs:

Réaffectez jQuery à un autre raccourci var $j = jQuery;(cela peut être la meilleure approche si vous souhaitez utiliser différentes bibliothèques) Utilisez la technique suivante, qui vous permet d'utiliser $ à l'intérieur d'un bloc de code sans écraser définitivement $:

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

Remarque: Si vous utilisez cette technique, vous ne pourrez pas utiliser les méthodes Prototype dans cette fonction encapsulée qui s'attendent à ce que $ soit le $ de Prototype, vous faites donc le choix d'utiliser uniquement jQuery dans ce bloc. Utilisez l'argument de l'événement DOM ready:

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

Remarque: encore une fois, à l'intérieur de ce bloc, vous ne pouvez pas utiliser les méthodes Prototype

Cela vient de la fin de la documentation et pourrait vous être utile

Commencez par l'évidence: référencez-vous bien le 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.

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

Il y a probablement une erreur avant l'appel de datepicker qui empêche l'exécution de l'appel de datepicker.

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 la peine d'essayer cela aussi pour éviter des heures de débogage.

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

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 </body>balise ne le corrige pour moi.

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, par défaut, il a été enregistré dans un dossier sans accès autorisé! Il a fallu une éternité pour comprendre que c'était le problème, mais je devais juste changer l'autorisation pour le répertoire et son contenu - en le définissant ainsi TOUT LE MONDE = LIRE UNIQUEMENT. Fonctionne très bien maintenant.

J'ai récemment rencontré ce problème - 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 (ré-initialisant apparemment jQuery et déchargeant l'interface utilisateur plugins précédemment chargés).

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

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

À l'époque, je n'avais pas réalisé que c'était juste un pet de cerveau de ne pas le fermer correctement pour commencer. (Je publie ceci simplement au cas où quelqu'un d'autre rencontrant le fil aurait un problème similaire.)

Certains fichiers ne sont pas chargés avant d'appeler.

Par exemple: Votre code:

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

Changez pour ceci:

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

Je pourrais résoudre ce problème en supprimant le bundle 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)

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.

Dans mon cas, cela a été résolu en modifiant l'ordre d'importation des scripts suivants: Avant (ne fonctionne pas):

Après le travail):