jQuery UI Datepicker ne fonctionne pas

Question

jQuery UI Datepicker ne fonctionne pas

4

60486 2011-10-30

Je souhaite ajouter un sélecteur de date sur unepagepersonnaliséemaisje nefonctionnepas. La version WPest 3.2.1. Voici la chaîne d'initialisation quej'ai utilisée 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');

Cesenquequesgé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 lapage,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 sélecteur de datene fonctionnepas. Jene saispas comment déboguer ceproblème. Ilne fait rien,comme lejQueryn'estmêmepas là.

< UPDATE:

Avec votre aide,j'ai réussi à déboguer le code. J'aiplacé le script après le divet je l'ai changéen:

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

Ce codeme donne uneerreur lors de l'appel de laméthode datepicker,l'erreur déclare:

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

Sije tapejQuery ('# datepicker') sur la consolejavascript,j'obtiens ceci:

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

Jen'obtiens aucune autreerreur àpart celle-là,toutes les références àjQuery semblentfonctionner correctement.

MISE À JOUR 2:

Enfinje l'aifaitfonctionner! J'ai dûplacer «wp_print_scripts» au lieu de «init»,et j'ai dû repositionner le code d'initialisation d'un autreplugin qui étaiten conflit. Le seulproblème restant concerne lesthèmes ... sij'utilise lethème debase dansgooglecode,celafonctionne. Sij'utilise d'autresthèmes (intégrés dans wp ou liés à wp_enqueque_style),lethèmene serapas chargé .... sije vérifie le htmlgénéré,iln'y a aucun signe de la ligne qui devrait charger lethèmejQuery.

i want to add a datepicker on a custom page but i doesn not work. WP version is 3.2.1. Those are the init string i used on wp code:

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');

Those enqueques generate this 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' />

On the page body, i use this 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>

The datepicker does not work. I do not know how to debug this issue. It does nothing, like the jQuery is not even there.

UPDATE:

With your help i managed to debug the code. I placed the script after the div and changed into:

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

This code give me error when calling the datepicker method, the error states:

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

If i type jQuery('#datepicker') on javascript console, i get this:

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

I get no other errors except for that one, all the references to jQuery seems to work fine.

UPDATE 2:

Finally i got it working! i had to place 'wp_print_scripts' instead of 'init', and i had to reposition some init code of another plugin that was conflicting. The only remaining issue are the themes... if i use the basic theme within googlecode, it works. If i use other themes (embedded in wp or linked with wp_enqueque_style) the theme will be not loaded.... if i check the generated html, there is no sign of the line that should load the jQuery theme.

- Cela semblebien auniveau WP (misesen file d'attente appropriées,sortie,appeljQUerynon abrégé)et,en tant quetel,n'estprobablementpas spécifique à WordPress.Plus de détails sur WP?Sinon,mieux vaut demander sur StackOverflow.
  
  This seems fine on WP level (proper enqueues, output, non-shorthand jQUery call) and as such is probably not WordPress-specific. Any more WP-related details? Otherwise best asked on StackOverflow.
  - 0
  - 2011-10-30
  - Rarst
- Si votre "pagepersonnalisée"est unepage d'administration,vous devez lamettreen file d'attente unpeu différemment.Voir: http://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts
  
  If your "custom page" is an admin page, then you need to enqueue it a little differently. See: http://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts
  - 0
  - 2011-10-30
  - Tom Auger
- De quels autres détails avez-vousbesoin?Demandezet je répondrai.lapagen'estpas spécifique à l'administrateur.C'estjuste unepage wp,créée à l'aide d'unmodèle depage spécialement conçu contenant le code quej'utilise.
  
  What other wp details do you need? Ask and i will answer. the page is not Admin specific. It is just a wp page, made using a crafted page template that contains the code i'm using.
  - 0
  - 2011-10-31
  - Terix
- Deplus,cen'estpasparce que lafile d'attente amis lesbalises SCRIPT ou STYLEnécessaires dans votretête qu'elle a été chargée (les URLpeuvent êtrefausses -m'est arrivé une douzaine defois!).Encore unefois,utilisez Firebug ou Google Chromeet vérifiez les statistiques de votre réseau - si vous voyez deserreurs 404 rouges,cela signifie que le script ou lefichier CSSn'estpastrouvé à l'adresse spécifiée.
  
  Also, just because the enqueue has put the necessary SCRIPT or STYLE tags into your head, doesn't necessarily mean that it has actually loaded (the URLs could be wrong - happened to me a dozen times!). Again, use Firebug or Google Chrome and check your network statistics - if you see red 404 errors, that means that the script or CSS file isn't being found at the address specified.
  - 0
  - 2011-10-31
  - Tom Auger
- le scriptet les styles sonttoustrouvés,j'obtiens la seuleerreurbien en dessous,sur l'appel réel à laméthode datepicker ()
  
  script and styles are all found,i get the only error far below, on the actual call to method datepicker()
  - 0
  - 2011-10-31
  - Terix
- fyi,init n'estpas lebonendroitpourfaire desfiles d'attente,ils devraient aller sur l'action `wp_enqueue_scripts` (c'estpour lesfiles d'attente).Vousn'avezpasnonplusbesoin des deuxpremières lignes demiseen file d'attente,car vous les définissez comme dépendancespour le sélecteur de date.
  
  fyi, init is not the right place to do enqueues, they should go onto the `wp_enqueue_scripts` action(it's for enqueues). You also don't need the first two enqueue lines because you're setting them as dependancies for the datepicker.
  - 0
  - 2011-10-31
  - t31os

4 réponses

votes

- 3
- 2013-04-27
Pour ceux qui déboguent le sélecteur de date "nefonctionnantpas" -pourmoi,c'était unproblème de réinitialisation du css,en particulier de ceci:

html, body { overflow: auto; }

Mon sélecteur de date était correct,mais continuait d'apparaîtretouten haut de l'écran.:)
For those who debug "not working" datepicker - for me it was an issue of my reset css, specifically of this:

html, body { overflow: auto; }

My datepicker was alright, but kept appearing on far top of the screen. :)
- 0
- 2011-10-30
Dans votreexemple,lajQueryestplacée avant la création du div 'datepicker'.Donc çane fera rien.Placez lebloc script après la 'ligne' div ou utilisezplutôt jQuery(document).ready().

In your example, the jQuery is placed before the 'datepicker' div is created. So it won't do anything. Either place the script block after the 'row' div, or use jQuery(document).ready() instead.
- J'aiplacé le script après le '
  'mais rienn'a changé.J'aifait unepage detest,html simple,avec seulement le HTMLgénéré àpartir de lapage wp,celane fonctionnetoujourspas,commentpuis-je le déboguer?
  
  I placed the script after the '
  ' but nothing changed. I have made a test page, plain html, with only the html generated from the wp page, it still does not work, how can i debug it?
  
  0
  
  2011-10-31
  
  Terix
- Assurez-vous que Firebug,Google Chrome ou utilisez l'Explorateur avec les outils de développement activés (F12).Vous souhaitez vérifier la console d'erreuret rechercher leserreurs JavaScript.N'hésitezpas àposter un lienet nous yjetterons un œil.
  
  Make sure you have Firebug, google Chrome, or use Explorer with Developer Tools turned on (F12). You want to check the error console and look for JavaScript errors. Feel free to post a link and we'll take a look.
  - 0
  - 2011-10-31
  - Tom Auger
- 0
- 2011-10-31
Incluez également votre scriptpersonnalisé via wp_enqueue_script ()et référencez les autresbibliothèqueset vousn'aurez aucunproblème avec la chronologie;votre scriptpersonnalisépour demander lesbibliothèques de chargement de datepicker unefois quetous les autres scripts sontprêts;fonctionnetrèsbien et aussi dans les versions defonctionnalités de WP.

Include your custom script also via wp_enqueue_script() and reference the other libs and you dont have no problems with the timeline; your custom script to ask for the libs of datepicker load after all other scripts is ready; works fine and also in feature releases of WP.
- voulez-vousmettre le codejquery dans unfichierjset l'appeler?
  
  do you mean to put the jquery code inside a js file and call it?
  - 0
  - 2011-10-31
  - Terix
- @bueltge quine résoudrait leproblème que si Terix l'appelait comme ceci: `wp_enqueue_script ('do-date','http://www.xxxxxxxx.it/wp-content/themes/greyzed/js/do_date.js',array ('jquery-ui-datepicker'),1,true) `- le dernier 'true' étantimportantpour qu'ilplace le script dans lepied depage,à savoir après la création du` div`.Jepréfèretoujours utiliser document.ready (),peuimporte.
  
  @bueltge that would only solve the problem if Terix called it like this: `wp_enqueue_script( 'do-date', 'http://www.xxxxxxxx.it/wp-content/themes/greyzed/js/do_date.js' , array('jquery-ui-datepicker'), 1, true )` - the last 'true' being important so that it puts the script in the footer, namely after the `div` has been created. I still prefer using document.ready(), regardless.
  - 0
  - 2011-10-31
  - Tom Auger

v0idless · Accepted Answer · 2011-10-31

4

2011-10-31

Jetape souventmal les choses. Donc,je commencerais à vous débogueren copiantet collant les liens vers les scripts JS dans votrenavigateuret jem'assurerais qu'ils se chargent.

Ensuite,dans Chrome,accédez aumenu clé àmolette -> Outils -> Console JavaScript. Ici,vouspourreztaper/exécuter votre JavaScript directement. Je commenceraispartaper jQuery dans la consolepourm'assurer quejQueryest réellement chargé. Ensuite,essayez defaire jQuery('#datepicker') sielle renvoie des crochets vides [] alors votre sélecteur échoue. Si celafonctionne,essayez d'ouvrir le sélecteur de date - vous verrezprobablement uneerreur dans la console JS.

Comme d'autres l'ont suggéré,je pense que leproblèmeest que le script s'exécute avant que lene soit réellement rendu. Je suggérerais defaire ce qui suit:

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

Celaforcera le script à s'exécuter après le chargement de lapageentiè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
}

I often type things wrong. So, I would start debugging you copying and pasting the links to the JS scripts in your browser and make sure they load.

Then in Chrome go to the Wrench Menu -> Tools -> JavaScript Console. Here you will be able to type/execute your JavaScript directly. I would start off my typing jQuery into the console to make sure jQuery is actually loaded. Then try doing jQuery('#datepicker') if it returns empty brackets [] then your selector is failing. If it works, try opening up the datepicker - you will probably see an error in the JS console.

Like others have suggested, I think the problem is that the script is running before the is actually rendered. I would suggest doing the following:

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

This will force the script to run after the entire page has loaded.

== EXAMPLE ==

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
}

J'ai suivi vos conseils,et j'aifait quelques étapes:maintenantj'ai l'erreur quiempêchemon code defonctionner.Il dit: Uncaught TypeError: Object [object Object]n'apas deméthode 'datepicker' sur la lignejQuery ('# datepicker'). Datepicker

I've followed you advices, and i made some steps: now i have the error that is stopping my code from working. It say: Uncaught TypeError: Object [object Object] has no method 'datepicker' on the line jQuery('#datepicker').datepicker
- 0
- 2011-10-31
- Terix
Sitelest le cas,le script datepickern'estpasinclus correctement ouest lemauvais script.Jemettrai àjourmonmessage avec un code quifonctionne.

If thats the case, then the datepicker script is not being included properly, or is the wrong script. I'll update my post with code that works.
- 0
- 2011-10-31
- v0idless
Celame rendfou ...j'aitoujours lamêmeerreur!J'ai changé le code selon votre suggestion,quandj'écrisjQuery ('# datepicker')j'obtiens le div comme avant,maisj'obtienstoujours lamêmeerreurexacte!J'aitesté avec unfichier html vide,en mettant la sortie html de wp_enqueques,et avec cettepage detest,celafonctionne,doncil y a quelque chose à l'intérieur de wp quifausse datepicker (),maisje n'ai aucuneidée de comment résoudre ceproblème...

This is driving me crazy.... i still have the same error! I changed the code according to your suggestion, when i write jQuery('#datepicker') i get the div like before, but still i get also the same exact error! I've tested with an empty html file, putting the html output of the wp_enqueques, and with this test page it works, so there is something inside wp that is screwing up datepicker(), but i have no idea on how to solve this...
- 0
- 2011-11-01
- Terix
Ensuite,ce queje feraisest de définir votrethème sur vingt-onzeet de désactivertous les autresplugins.Allumez-les unpar unjusqu'à ce que voustrouviez celui quiprovoque la rupture du sélecteur de date.

Then what I would do is set your theme to twentyeleven, and deactivate all other plugins. Turn them on one by one until you find which one is causing datepicker to break.
- 0
- 2011-11-01
- v0idless
Enfinje l'aifaitfonctionner!J'ai dûplacer «wp_print_scripts» au lieu de «init»,et j'ai dû repositionner le code d'initialisation d'un autreplugin qui étaiten conflit.Le seulproblème restant concerne lesthèmes ... sij'utilise lethème debase dansgooglecode,celafonctionne.Sij'utilise d'autresthèmes (intégrés ou liés à wp_enqueque_style),lethèmene serapas chargé.

Finally i got it working! i had to place 'wp_print_scripts' instead of 'init', and i had to reposition some init code of another plugin that was conflicting. The only remaining issue are the themes... if i use the basic theme within googlecode, it works. If i use other themes (embedded or linked with wp_enqueque_style) the theme will be not loaded.
- 0
- 2011-11-02
- Terix