web-dev-qa-db-fra.com

JS/jQuery TypeError: jQuery (...). Datepicker n'est pas une fonction

Cela fait deux jours que je me gratte la tête, je suis presque sûr qu'il me manque quelque chose de simple, mais je ne peux pas comprendre pourquoi cela ne fonctionne pas.

J'essaie d'utiliser le script ci-dessous sur mon site WordPress pour désactiver des dates spécifiques dans un champ datepicker dans un formulaire ContactForm7.

Je peux charger le script dans jsfiddle avec un simple champ de saisie utilisant le même identifiant et tout fonctionne parfaitement ... mais lorsque je l'ajoute à mon site, les dates ne sont pas désactivées et il y a une erreur dans la console d'erreur JS qui indique " jQuery (...). datepicker n'est pas une fonction "

Je l'ai ajouté dans mon fichier header.php, juste en dessous de l'appel wp_head() et juste au-dessus de la balise </head>. J'ai attribué à mon champ datepicker l'id dpick comme le script l'utilise.

J'ai lu que cette erreur est généralement causée par l'utilisation du symbole $ car elle peut entrer en conflit avec d'autres scripts jQuery dans WordPress ... ils ont donc suggéré de remplacer $ par jQuery (ce que j'ai fait dans le script ci-dessous) ... mais je reçois toujours l'erreur

var unavailableDates = ["1-9-2013", "2-9-2013", "3-9-2013", "4-9-2013", "5-9-2013"];

    function unavailable(date) {
            dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
            if (jQuery.inArray(dmy, unavailableDates) == -1) {
                return [true, ""];
            } else {
                return [false, "", "Unavailable"];
        }
    }

        jQuery(function() {
            jQuery( '#dpick' ).datepicker({
                dateFormat: 'dd MM yy',
                beforeShowDay: unavailable
        });

    });

Je ne peux pas vous remercier assez pour l’aide que vous pouvez offrir ... c’est une chose si simple, mais je n'arrive pas à comprendre.

javascriptjquerywordpressjquery-uidatepicker
13
Iconoclast

Il y a plusieurs raisons à cette erreur:

  1. Le fichier jquery.ui est utilisé avant jquery.
  2. Le $ est utilisé par une autre bibliothèque.
  3. La bibliothèque jQuery référencée localement (wordpress) a une version différente de celle qui utilise jquery.ui.
  4. Lorsque la bibliothèque et la version correctes sont référencées, le cache du navigateur doit être effacé.
21
napoleonss

J'avais le même problème. Dans mon cas, j'avais deux références de script jQuery sur ma page principale (_Layout.cshtml dans ASP.NET MVC). J'ai ajouté 1 référence à jQuery en haut, mais il y en a une en bas de page que je n'ai pas remarquée ... Dans Firebug, c'est ce que j'ai vu:

enter image description here

Comme vous pouvez le constater, jQuery UI était au milieu du conflit! : D Cela m'a pris du temps à comprendre.

6
Leniel Maccaferri

Cela a fonctionné pour moi, pour les codes JQuery en conflit -

  <script>  
  $.noConflict();  //Not to conflict with other scripts
jQuery(document).ready(function($) {
$( "#datepicker" ).datepicker({
  dateFormat:"yyyy-mm-dd",
  changeMonth: true,
  changeYear: true,
  maxDate: "+0D"
});

});
</script>
3
cookiesncream

vérifie si tous les fichiers sont chargés. Doit avoir 200 statut ok.

3
Pratswinz

Je n'ai pas beaucoup d'expérience avec WordPress alors je pourrais être hors de propos d'essayer d'aider. J'ai utilisé le pickadate cependant.

Dans le passé, j'ai eu cette erreur avant

Uncaught TypeError: Object [objet Object] n'a pas de méthode 'datepicker' 

Cela se produit généralement parce que je n'ai pas chargé les fichiers js dans le bon ordre. En regardant dans les outils de développement sur votre site, je ne vois pas où le plugin pickadate est même chargé. Je vérifierais (si vous ne l'avez pas encore fait) que le plugin est chargé et chargé dans le bon ordre. 

1
H0miet

D'accord, j'ai le même problème il y a quelque temps et la solution à ce problème consiste simplement à ajouter pour inclure le jquery.ui.datepicker.js qui est inclus dans le paquet jquery. Cependant, je me demande toujours pourquoi je dois l'inclure parce que je me sers de jquery.ui avant et du jquery.ui.custom ou simplement du fichier jquery js qui remplira pour moi la fonction .datepicker(). 

Quoi qu'il en soit, c'est encore bien que ça marche maintenant. J'espère que cela t'aides.

0
Juno Paulo De Guzman

J'ai déplacé tous les scripts du pied de page à la tête, puis tout a commencé à fonctionner correctement

0
Vidmantas Norkus

Je sais que cette question est ancienne mais peut-être qu'elle peut aider d'autres personnes:

La meilleure pratique pour inclure js dans wordpress est de le faire en utilisant sa fonction de mise en file d'attente dans le modèle php:

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

(vu ici )

Cela permet de déclarer les dépendances de votre script, dans ce cas le jquery datepicker. Vous pouvez vérifier les scripts intégrés que wordpress peut fournir dans:

https://developer.wordpress.org/themes/basics/including-css-javascript/#default-scripts-included-and-registered-by-wordpress

Wordpress fournit des dépendances spécifiquement pour jquery datepicker afin que vous puissiez inclure votre script avec quelque chose comme:

wp_enqueue_script( 'script', 'mypath' . '/js/script.js', array ( 'jquery', 'jquery-ui-datepicker' ), 1.7, true);

Notez que si vous ne déclarez que la dépendance jquery, vous obtiendrez une erreur comme 

'jQuery.datepicker (...) n'est pas une fonction'

puisque les fonctions datepicker ne sont pas incluses dans la base wordpres jquery.

0
Miquel Correa Casablanca

J'ai eu un problème similaire, mais uniquement sur le navigateur Firefox. Nous utilisons besoin de charger les fichiers js. J'ai eu les lignes suivantes dans mon javascript.

require(['jquery', 'jqueryui'], function ($) {
    $(document).ready(function () {
        $("#form1").validationEngine({ bindButtons: $(".bindButton") });

        $("#txtBidDate").datepicker({dateFormat: 'mm-dd-yy'});
        $("#txtInstDate").datepicker({dateFormat: 'mm-dd-yy'});
    });

Require charge les fichiers js de manière asynchrone et l'ordre n'est pas garanti sauf si vous définissez la configuration de shim ou si vos fichiers js sont tous chargés au format AMD. Dans notre cas, jquery a été chargé après jquery-ui. Nous avons défini dans main.js pour requérir que jquery-ui dépende de jquery. Cela a résolu le problème pour nous

0
Web Application Developer

Je sais que c'est un vieux problème. J'avais le même problème et c'était à cause de l'inclusion de jquery.min.js avec jquery-1.10.2.js et jquery-ui.js. Donc, en supprimant jquery.min.js, mon problème de TypeError: $ (...). Datepicker n’est pas une fonction résolue. J'espère que ça aide à quelqu'un.

0
Vishal T