jQuery UI Datepicker non funziona

Question

jQuery UI Datepicker non funziona

4

60486 2011-10-30

Voglio aggiungere un datepicker su unapaginapersonalizzatamanonfunziona. La versione WP è 3.2.1. Quelle sono le stringhe diinizializzazione che ho usato sul codice 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');

Quelleenquequesgenerano questo codice:

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

Nel corpo dellapagina,utilizzo questo codice:

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

Il datepickernonfunziona. Non so comeeseguireil debug di questoproblema. Nonfanulla,come sejQuerynonfossenemmeno lì.

<⇨UPDATE:

Coniltuo aiuto sono riuscito aeseguireil debug del codice. Hoinserito lo script dopoil dive l'homodificatoin:

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

Questo codicemi dà unerrore quando richiamoilmetodo datepicker,l'errore afferma:

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

Se digitojQuery ('# datepicker') sulla consolejavascript,ottengo questo:

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

Non ricevo altrierroritranne quello,tuttii riferimenti ajQuery sembranofunzionarebene.

AGGIORNAMENTO 2:

Finalmente hofunzionato! ho dovutoposizionare 'wp_print_scripts'invece di 'init',e ho dovuto riposizionare un codice diinizializzazione di un altroplugin cheerain conflitto. L'unicoproblema rimanente sonoi temi ... se usoiltema dibase all'interno digooglecode,funziona. Se utilizzo altritemi (incorporatiin wp o collegati con wp_enqueque_style)iltemanon verrà caricato .... se controllo l'htmlgenerato,non c'è segno della linea che dovrebbe caricareiltemajQuery.

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.

fonte
Terix

- Questo sembra aposto a livello di WP (accodamenti corretti,output,chiamatajQUerynon abbreviata)e cometaleprobabilmentenon è specifico di WordPress.Altri dettagli relativi al WP?Altrimenti èmeglio chiedere su 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
- Se latua "paginapersonalizzata" è unapagina di amministrazione,devi accodarlain modo leggermente diverso.Vedi: 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
- Di quali altri dettagli wp haibisogno?Chiedie ti risponderò.lapaginanon è specifica dell'amministratore.È solo unapagina wp,realizzata utilizzando unmodello dipagina creato appositamente che contieneil codice che sto utilizzando.
  
  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
- Inoltre,soloperché l'enqueue hainseritoi tag SCRIPT o STYLEnecessarinellatuatesta,non significanecessariamente che sia statoeffettivamente caricato (gli URLpotrebberoessere sbagliati -mi è successo una dozzina di volte!).Ancora una volta,utilizza Firebug o Google Chromee controlla le statistiche di rete: se vedierrori 404 rossi,significa che lo script oilfile CSSnon è statotrovato all'indirizzo specificato.
  
  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
- lo scripte gli stili sonotuttitrovati,ottengo l'unicoerroremolto sotto,sulla chiamataeffettiva almetodo 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
- Cordiali saluti,init non èilpostogiustoperfare accodamenti,dovrebberopassare all'azione `wp_enqueue_scripts` (èper accodamenti).Inoltre,non haibisogno delleprime due righe di accodamentoperché le staiimpostando come dipendenzeperil datepicker.
  
  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 risposta

voti

- 3
- 2013-04-27
Per coloro cheeseguonoil debug del datepicker "nonfunzionante",perme è stato unproblema delmio css di ripristino,in particolare di questo:

html, body { overflow: auto; }

Ilmio datepicker andavabene,ma continuava ad apparirenellaparte superiore dello schermo.:)
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
Neltuoesempio,jQuery vieneposizionato prima della creazione del div "datepicker".Quindinonfarànulla.Posizionailblocco script dopo la "riga" div oppure utilizza 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.
- Hoinserito lo script dopo "
  "manon è cambiatonulla.Ho creato unapagina ditest,semplice html,con solo l'htmlgenerato dallapagina wp,ancoranonfunziona,comepossoeseguirneil debug?
  
  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
- Assicurati di avere Firebug,Google Chrome o utilizza Explorer congli Strumentiper sviluppatori attivati (F12).Vuoi controllare la console deglierrorie cercareglierrori JavaScript.Sentiti libero dipubblicare un linke daremo un'occhiata.
  
  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
Includiiltuo scriptpersonalizzato anchetramite wp_enqueue_script ()e fai riferimento alle altre libreriee non avraiproblemi con latimeline;iltuo scriptpersonalizzatoper chiedereil caricamento delle librerie di datepicker dopo chetuttigli altri script sonopronti;funzionabene e anchenelle versioni difunzionalità di 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.
- intendimettereil codicejquery all'interno di unfilejse chiamarlo?
  
  do you mean to put the jquery code inside a js file and call it?
  - 0
  - 2011-10-31
  - Terix
- @bueltge che risolverebbeilproblema solo se Terix lo chiamasse così: `wp_enqueue_script ('do-date','http://www.xxxxxxxx.it/wp-content/themes/greyzed/js/do_date.js',array ('jquery-ui-datepicker'),1,true) `- l'ultimo 'true' èimportantein modo chemetta lo script apiè dipagina,cioè dopo cheil` div` è stato creato.Preferisco ancora usare document.ready (),aprescindere.
  
  @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

Spesso digito le cosein modo sbagliato. Quindi,iniziereiil debugging copiandoe incollandoi collegamenti agli script JSneltuobrowsere assicurandomi che vengano caricati.

Quindi,in Chrome,vai almenu Strumenti -> Strumenti -> Console JavaScript. Qui saraiin grado di digitare/eseguire direttamenteiltuo JavaScript. Vorreiiniziare a digitare jQuerynella consoleper assicurarmi chejQuery siaeffettivamente caricato. Quindiprova aeseguire jQuery('#datepicker') se restituisceparentesi vuote [],il selettorenonfunziona. Sefunziona,prova ad aprireil datepicker:probabilmente vedrai unerrorenella console JS.

Come altri hanno suggerito,penso cheilproblema sia che lo script vieneeseguitoprima che vengaeffettivamente visualizzato. Suggerirei difare quanto segue:

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

Questoforzerà l'esecuzione dello script dopo che l'interapagina è stata caricata.

==ESEMPIO==

 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
}

Ho seguitoi tuoi consiglie hofatto alcunipassaggi: ora ho l'errore cheimpedisce almio codice difunzionare.Dice: Uncaught TypeError: Object [object Object]non hailmetodo 'datepicker' sulla rigajQuery ('# 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
Intal caso,lo script datepickernon è statoincluso correttamente o è lo script sbagliato.Aggiorneròilmiopost con un codice chefunziona.

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
Questomi stafacendoimpazzire .... ho ancora lo stessoerrore!Ho cambiatoil codice secondoiltuo suggerimento,quando scrivojQuery ('# datepicker') ottengoil div comeprima,ma ricevo comunque lo stessoidenticoerrore!Hotestato con unfile html vuoto,inserendo l'output html di wp_enqueques,e con questapagina ditestfunziona,quindi c'è qualcosa all'interno di wp che sta rovinando datepicker (),manon hoidea di come risolverlo...

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
Quindi quello chefarei èimpostareiltuotema su ventiduee disattivaretuttigli altriplugin.Accendili uno alla voltafinchénontrovi quale causa l'interruzione del datepicker.

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
Finalmente hofunzionato!ho dovutoposizionare 'wp_print_scripts'invece di 'init',e ho dovuto riposizionare un codice diinizializzazione di un altroplugin cheerain conflitto.L'unicoproblema rimanente sonoi temi ... se usoiltema dibase all'interno digooglecode,funziona.Se utilizzo altritemi (incorporati o collegati con wp_enqueque_style)iltemanon verrà caricato.

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