jQuery UI Datepicker non funzionante

Question

jQuery UI Datepicker non funzionante

30 ott 2011, 23:09:17

Visualizzazioni: 64.5K

Voti: 4

Voglio aggiungere un datepicker su una pagina personalizzata ma non funziona. La versione di WP è 3.2.1. Queste sono le stringhe di inizializzazione che ho usato nel 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');

Questi enqueue generano 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 body della pagina, uso 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 datepicker non funziona. Non so come debuggare questo problema. Non fa nulla, come se jQuery non fosse presente.

AGGIORNAMENTO:

Con il vostro aiuto sono riuscito a debuggare il codice. Ho posizionato lo script dopo il div e l'ho modificato in:

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

Questo codice mi dà un errore quando chiama il metodo datepicker, l'errore indica:

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

Se digito jQuery('#datepicker') sulla console javascript, ottengo questo:

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

Non ottengo altri errori tranne quello, tutti i riferimenti a jQuery sembrano funzionare correttamente.

AGGIORNAMENTO 2:

Finalmente l'ho fatto funzionare! Ho dovuto usare 'wp_print_scripts' invece di 'init', e ho dovuto riposizionare del codice di inizializzazione di un altro plugin che era in conflitto. L'unico problema rimanente sono i temi... se uso il tema base dentro googlecode, funziona. Se uso altri temi (incorporati in wp o collegati con wp_enqueque_style) il tema non viene caricato.... se controllo l'html generato, non c'è traccia della riga che dovrebbe caricare il tema jQuery.

Terix

173

jquery javascript html jquery ui selettore data

Commenti

Sembra corretto a livello di WordPress (enqueue appropriati, output, chiamata jQuery non abbreviata) e quindi probabilmente non è specifico di WordPress. Ci sono altri dettagli relativi a WP? Altrimenti è meglio chiedere su StackOverflow.

Rarst

30 ott 2011 23:22:10

Se la tua "pagina personalizzata" è una pagina di amministrazione, allora devi fare l'enqueue in modo leggermente diverso. Vedi: http://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts

Tom Auger

31 ott 2011 00:24:34

Quali altri dettagli di WordPress ti servono? Chiedi e risponderò. La pagina non è specifica per l'amministrazione. È semplicemente una pagina WP, creata utilizzando un template di pagina personalizzato che contiene il codice che sto usando.

Terix

31 ott 2011 09:16:57

Inoltre, solo perché l'enqueue ha inserito i tag SCRIPT o STYLE necessari nell'header, non significa necessariamente che siano stati effettivamente caricati (gli URL potrebbero essere sbagliati - mi è successo decine di volte!). Ancora una volta, usa Firebug o Google Chrome e controlla le statistiche di rete - se vedi errori 404 in rosso, significa che lo script o il file CSS non viene trovato all'indirizzo specificato.

Tom Auger

31 ott 2011 14:58:37

script e stili sono tutti trovati, ricevo l'unico errore molto più in basso, sulla chiamata effettiva al metodo datepicker()

Terix

31 ott 2011 22:57:15

Mostra i restanti 1 commenti

Tutte le risposte alla domanda

Commenti

Ho seguito i tuoi consigli e ho fatto alcuni passi: ora ho l'errore che blocca il mio codice. Dice: Uncaught TypeError: Object [object Object] has no method 'datepicker' sulla riga jQuery('#datepicker').datepicker

Terix

31 ott 2011 22:33:05

Se è così, allora lo script datepicker non viene incluso correttamente, oppure è lo script sbagliato. Aggiornerò il mio post con il codice funzionante.

v0idless

31 ott 2011 23:14:13

Questo mi sta facendo impazzire... ho ancora lo stesso errore! Ho modificato il codice secondo i tuoi suggerimenti, quando scrivo jQuery('#datepicker') ottengo il div come prima, ma continuo a ricevere lo stesso identico errore! Ho testato con un file html vuoto, inserendo l'output html dei wp_enqueques, e con questa pagina di test funziona, quindi c'è qualcosa all'interno di wp che sta mandando in tilt datepicker(), ma non ho idea di come risolvere...

Terix

1 nov 2011 09:34:20

Quello che farei è impostare il tuo tema su twentyeleven e disattivare tutti gli altri plugin. Attivali uno per uno fino a trovare quale sta causando l'interruzione di datepicker.

v0idless

1 nov 2011 14:32:08

Finalmente ho risolto! Ho dovuto inserire 'wp_print_scripts' invece di 'init', e ho dovuto riposizionare del codice di inizializzazione di un altro plugin che era in conflitto. L'unico problema rimasto sono i temi... se uso il tema base all'interno di googlecode, funziona. Se uso altri temi (incorporati o collegati con wp_enqueque_style) il tema non viene caricato.

Terix

2 nov 2011 09:20:47

Per chi sta eseguendo il debug di un datepicker che "non funziona" - nel mio caso era un problema del mio CSS di reset, in particolare di questo:

html, body { overflow: auto; }

Il mio datepicker funzionava correttamente, ma continuava ad apparire in alto rispetto alla posizione prevista. :)

Petr Cibulka

426

27 apr 2013 21:47:52

Nel tuo esempio, il codice jQuery è posizionato prima che il div del 'datepicker' venga creato. Quindi non avrà alcun effetto. Puoi posizionare il blocco script dopo il div 'row', oppure utilizzare jQuery(document).ready().

Tom Auger

7.1K

31 ott 2011 00:27:17

Commenti

Ho inserito lo script dopo il '<div>' ma non è cambiato nulla. Ho creato una pagina di test, html semplice, con solo l'html generato dalla pagina wp, ancora non funziona, come posso eseguire il debug?

Terix

31 ott 2011 09:22:08

Assicurati di avere Firebug, Google Chrome, o di utilizzare Explorer con gli Strumenti di sviluppo attivati (F12). Devi controllare la console degli errori e cercare errori JavaScript. Sentiti libero di postare un link e daremo un'occhiata.

Tom Auger

31 ott 2011 14:56:32

Includi il tuo script personalizzato anche tramite wp_enqueue_script() e fai riferimento alle altre librerie, così non avrai problemi con la timeline; il tuo script personalizzato per richiedere le librerie del datepicker verrà caricato dopo che tutti gli altri script sono pronti; funziona bene e anche nelle versioni future di WP.

bueltge

17.1K

31 ott 2011 03:08:16

Commenti

intendi inserire il codice jquery in un file js e chiamarlo?

Terix

31 ott 2011 09:23:20

@bueltge ciò risolverebbe il problema 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' è importante perché posiziona lo script nel footer, cioè dopo che il div è stato creato. Personalmente preferisco comunque usare document.ready().

Tom Auger

31 ott 2011 15:01:53

v0idless 802 · Accepted Answer · 2011-10-31T17:11:38Z

Spesso digito le cose in modo sbagliato. Quindi, inizierei a debuggarle copiando e incollando i link agli script JS nel tuo browser per assicurarti che si carichino.

Poi in Chrome vai nel Menu Chiave inglese -> Strumenti -> Console JavaScript. Qui potrai digitare/eseguire direttamente il tuo JavaScript. Comincerei digitando jQuery nella console per assicurarmi che jQuery sia effettivamente caricato. Poi prova a fare jQuery('#datepicker') se restituisce parentesi vuote [] allora il tuo selettore non funziona. Se funziona, prova ad aprire il datepicker - probabilmente vedrai un errore nella console JS.

Come hanno suggerito altri, penso che il problema sia che lo script viene eseguito prima che il sia effettivamente renderizzato. Suggerirei di fare quanto segue:

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

Questo costringerà lo script a essere eseguito dopo che l'intera pagina è 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
}