web-dev-qa-db-fra.com

jQuery UI Datepicker ne fonctionne pas

je veux ajouter un datepicker sur une page personnalisée, mais je ne fonctionne pas. WP version est 3.2.1. Ce sont les init string que j'ai utilisé sur le code wp:

wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-datepicker', get_bloginfo('template_url') . '/js/jquery-ui-datepicker.min.js', array('jquery','jquery-ui-core'));
wp_enqueue_style('jquery.ui.theme', get_bloginfo('template_url') . '/js/smoothness/jquery-ui-1.8.16.custom.css');

Ces enqueques génèrent ce code:

<script type='text/javascript' src='http://www.xxxxxxxx.it/wp-includes/js/jquery/jquery.js?ver=1.6.1'></script>
<script type='text/javascript' src='http://www.xxxxxxxx.it/wp-includes/js/jquery/ui.core.js?ver=1.8.12'></script>
<script type='text/javascript' src='http://www.xxxxxxxx.it/wp-content/themes/greyzed/js/jquery-ui-datepicker.min.js?ver=3.2.1'></script>
<link rel='stylesheet' id='jquery.ui.theme-css'  href='http://www.xxxxxxxx.it/wp-content/themes/greyzed/js/smoothness/jquery-ui-1.8.16.custom.css?ver=3.2.1' type='text/css' media='all' />

Sur le corps de la page, j'utilise ce code:

<script type="text/javascript">
    jQuery('#datepicker').datepicker({
        dateFormat : 'yy-mm-dd'
    });
</script>
<div class="row"><label for="day">Data</label><input type="text" id="datepicker" name="day" class="text" /></div>

Le datepicker ne fonctionne pas. Je ne sais pas comment déboguer ce problème. Il ne fait rien, comme le jQuery n'est même pas là.

METTRE À JOUR:

Avec votre aide, j'ai réussi à déboguer le code. J'ai placé le script après la div et transformé en:

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#datepicker').datepicker({
        dateFormat : 'yy-mm-dd'
    });
});
</script>

Ce code me donne une erreur lors de l'appel de la méthode datepicker, le message d'erreur est le suivant:

Uncaught TypeError: Object [object Object] has no method 'datepicker'

Si je tape jQuery ('# datepicker') sur la console javascript, j'obtiens ceci:

[<input type=​"text" id=​"datepicker" name=​"day" class=​"text">​]

Je ne reçois aucune autre erreur que celle-là, toutes les références à jQuery semblent fonctionner correctement.

MISE À JOUR 2:

Enfin je l'ai fait travailler! Je devais placer 'wp_print_scripts' au lieu de 'init', et je devais repositionner le code init d'un autre plugin en conflit. Le seul problème qui reste concerne les thèmes ... si j'utilise le thème de base dans googlecode, cela fonctionne. Si j'utilise d'autres thèmes (intégrés dans wp ou liés à wp_enqueque_style), le thème ne sera pas chargé .... si je vérifie le code HTML généré, il n'y a aucun signe de la ligne devant charger le thème jQuery.

jqueryjavascripthtmljquery-uidatepicker
4
Terix

Je tape souvent les choses mal. Donc, je commencerais à vous déboguer en copiant et collant les liens vers les scripts JS dans votre navigateur et en veillant à ce qu'ils soient chargés.

Ensuite, dans Chrome, accédez au menu Clé -> Outils -> Console JavaScript. Ici, vous pourrez taper/exécuter votre JavaScript directement. Je commencerais par taper jQuery dans la console pour m'assurer que jQuery est réellement chargé. Ensuite, essayez de faire jQuery('#datepicker') s'il renvoie des crochets vides [] alors votre sélecteur échoue. Si cela fonctionne, essayez d’ouvrir le sélecteur de date - vous verrez probablement une erreur dans la console JS.

Comme d'autres l'ont suggéré, je pense que le problème est que le script s'exécute avant que le rendu ne soit réellement rendu. Je suggérerais de faire ce qui suit:

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#datepicker').datepicker({
        dateFormat : 'yy-mm-dd'
    });
});
</script>

Cela forcera le script à s'exécuter après le chargement de la page entière.

== EXEMPLE ==

add_action( 'init', 'wp29r01_date_picker' );
function wp29r01_date_picker() {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery-ui-core' );
    wp_enqueue_script( 'jquery-datepicker', 'http://jquery-ui.googlecode.com/svn/trunk/ui/jquery.ui.datepicker.js', array('jquery', 'jquery-ui-core' ) );
}

add_action( 'wp_footer', 'wp29r01_print_scripts');
function wp29r01_print_scripts() {
    ?>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('#datepicker').datepicker();
    })
</script>
    <?php
}
4
v0idless

Pour ceux qui déboguent le datepicker "ne fonctionnant pas" - pour moi, c'était un problème lié à la réinitialisation de mon css, plus précisément à ceci:

html, body { overflow: auto; }

Mon datepicker était correct, mais a continué à apparaître sur le haut de l'écran. :)

2
Petr Cibulka

Dans votre exemple, jQuery est placé before le 'datepicker' div est créé. Donc ça ne fera rien. Placez le bloc script après la 'rangée' div ou utilisez plutôt jQuery(document).ready().

0
Tom Auger

Incluez également votre script personnalisé via wp_enqueue_script () et référencez les autres bibliothèques et vous n’aurez aucun problème avec la timeline; votre script personnalisé pour demander les bibliothèques du chargement de datepicker lorsque tous les autres scripts sont prêts; fonctionne bien et aussi dans les versions de WP.

0
bueltge