jQuery UI Datepicker funktioniert nicht

Question

jQuery UI Datepicker funktioniert nicht

4

60486 2011-10-30

Ichmöchteeinen Datepicker aufeinerbenutzerdefinierten Seite hinzufügen,aberesfunktioniertnicht. Die WP-Versionist 3.2.1. Dasist die Init-Zeichenfolge,dieichfür den WP-Code verwendet habe:

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

Diese Enquequeserzeugen diesen 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' />

Auf dem Seitenkörper verwendeich diesen 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>

Der Datepickerfunktioniertnicht. Ich weißnicht,wieich dieses Problembeheben soll. Esmachtnichts,als wäre diejQuerygarnicht da.

UPDATE:

Mit Ihrer Hilfe konnteich den Code debuggen. Ich habe das Skriptnach dem divplatziert undgeändertin:

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

Dieser Codegibt mirbeim Aufrufen der Datepicker-Methodeeinen Fehler. Der Fehler lautet:

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

WennichjQuery ('# datepicker')in die Javascript-Konsoleeingebe,erhalteich Folgendes:

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

Ichbekomme keine anderen Fehler außer diesem,alle Verweise aufjQuery scheinengut zufunktionieren.

UPDATE 2:

Endlich habeichesgeschafft! Ichmusste 'wp_print_scripts' anstelle von 'init'platzieren undeinen Init-Codeeines anderen Pluginsneupositionieren,dasin Konflikt stand. Daseinzige verbleibende Problem sind die Themen ... Wennich dasgrundlegende Themain Google Code verwende,funktioniertes. Wennich andere Themen verwende (eingebettetin wp oder verknüpftmit wp_enqueque_style),wird das Themanichtgeladen. Wennich dasgenerierte HTML überprüfe,gibt es kein Zeichenfür die Zeile,in der dasjQuery-Themageladen werden soll.

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.

Quelle
Terix

- Dies scheint auf WP-Ebenein Ordnung zu sein (richtige Warteschlangen,Ausgabe,nicht kurzgeschriebenerjQUery-Aufruf) undist daher wahrscheinlichnicht WordPress-spezifisch.Weitere WP-bezogene Details?Ansonsten ambesten auf StackOverflowgefragt.
  
  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
- Wenn Ihre "benutzerdefinierte Seite"eine Administrationsseiteist,müssen Sie sieetwas andersin die Warteschlange stellen.Siehe: 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
- Welche anderen wp-Detailsbenötigen Sie?Fragen Sie undich werde antworten.Die Seiteistnicht admin-spezifisch.Esistnureine WP-Seite,diemit einergestalteten Seitenvorlageerstellt wurde,die den vonmir verwendeten Codeenthält.
  
  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
- Nur weil die Warteschlange dieerforderlichen SCRIPT- oder STYLE-Tagsin Ihren Kopfeingefügt hat,bedeutet diesnicht unbedingt,dass sietatsächlichgeladen wurde (die URLs könntenfalsch sein -istmirein Dutzend Malpassiert!).Verwenden Sieerneut Firebug oder Google Chrome und überprüfen Sie Ihre Netzwerkstatistiken. Wenn rote 404-Fehler angezeigt werden,bedeutet dies,dass das Skript oder die CSS-Dateinicht unter der angegebenen Adressegefunden wird.
  
  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
- Skript und Stile sind allegefunden,ichbekomme deneinzigen Fehler weit unten,beim tatsächlichen Aufruf der Methode 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
- Zu Ihrer Information,init istnicht der richtige Ort,um Warteschlangen zuerstellen. Sie sollten die Aktion "wp_enqueue_scripts" ausführen (für Warteschlangen).Siebenötigen auchnicht dieerstenbeiden Zeilenin der Warteschlange,da Sie sie als Abhängigkeitenfür die Datumsauswahlfestlegen.
  
  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 Antworten

Stimmen

- 3
- 2013-04-27
Für diejenigen,die "nichtfunktionierende" Datepicker debuggen -fürmich waresein Problemmeines zurückgesetzten CSS,insbesondere dieses:

html, body { overflow: auto; }

Mein Datepicker warin Ordnung,erschien aberimmerganz oben auf dem Bildschirm.:)
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
In Ihrem Beispiel wird diejQuery platziert,bevor der 'Datepicker' diverstellt wird.Es wird alsonichtstun.Platzieren Sieentweder den Block scriptnach der Zeile 'row' div oder verwenden Sie stattdessen 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.
- Ich habe das Skriptnach dem '
  'platziert,abernichts hat sichgeändert.Ich habeeine Testseiteerstellt,einfaches HTML,wobeinur das von der wp-Seitegenerierte HTML angezeigt wird. Esfunktioniertimmernochnicht. Wie kanniches debuggen?
  
  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
- Stellen Sie sicher,dass Sie Firebug,Google Chrome oder Explorermit aktivierten Entwicklertools verwenden (F12).Siemöchten die Fehlerkonsole überprüfen undnach JavaScript-Fehlern suchen.Fühlen Sie sichfrei,einen Link zuposten und wir werdeneinen Blick darauf werfen.
  
  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
Fügen Sie Ihrbenutzerdefiniertes Skript auch über wp_enqueue_script () hinzu und verweisen Sie auf die anderen Bibliotheken. Sie haben keine Problememit der Timeline.Ihrbenutzerdefiniertes Skript,umnach den Bibliotheken zum Laden des Datepickers zufragen,nachdem alle anderen Skriptefertig sind.funktioniertgut und auchin Feature-Releases von 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.
- Wollen Sie den JQuery-Codein eine JS-Dateieinfügen und aufrufen?
  
  do you mean to put the jquery code inside a js file and call it?
  - 0
  - 2011-10-31
  - Terix
- @bueltge,das das Problemnur lösen würde,wenn Terixes sonennt: `wp_enqueue_script ('do-date','http://www.xxxxxxxx.it/wp-content/themes/greyzed/js/do_date.js',array ('jquery-ui-datepicker'),1,true) `- Das letzte 'true'ist wichtig,damit das Skriptin die Fußzeileeingefügt wird,nämlichnachdem das 'div'erstellt wurde.Ichbevorzugeimmernoch die Verwendung von document.ready (),unabhängig davon.
  
  @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

Ich schreibe oft Dingefalsch. Ich würde alsomit dem Debuggenbeginnen,indem Sie die Links zu den JS-Skriptenin Ihrem Browser kopieren undeinfügen und sicherstellen,dass siegeladen werden.

Gehen Sie dannin Chrome zum Wrench-Menü -> Extras -> JavaScript-Konsole. Hier können Sie Ihr JavaScript direkteingeben/ausführen. Ich würde damitbeginnen,jQueryin die Konsoleeinzugeben,um sicherzustellen,dassjQuerytatsächlichgeladenist. Versuchen Sie dann,jQuery('#datepicker') auszuführen. Wenn leere Klammern [] zurückgegeben werden,schlägt Ihre Auswahlfehl. Wennesfunktioniert,öffnen Sie den Datepicker. In der JS-Konsole wird wahrscheinlichein Fehler angezeigt.

Wie andere vorgeschlagen haben,besteht das Problemmeiner Meinungnach darin,dass das Skript ausgeführt wird,bevor dastatsächlichgerendert wird. Ich würde Folgendes vorschlagen:

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

Dadurch wird das Skriptgezwungen,ausgeführt zu werden,nachdem diegesamte Seitegeladen wurde.

==BEISPIEL==

 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
}

Ich habe Ihre Ratschlägebefolgt undeinige Schritte unternommen: Jetzt habeich den Fehler,dassmein Codenichtmehrfunktioniert.Es heißt: Uncught TypeError: Object [object Object] hat keine Methode 'datepicker'in der ZeilejQuery ('# 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
Wenn dies der Fallist,wird das Datepicker-Skriptnicht richtig aufgenommen oderist dasfalsche Skript.Ich werdemeinen Beitragmit Code aktualisieren,derfunktioniert.

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
Dasmachtmich verrückt ...ich habeimmernoch dengleichen Fehler!Ich habe den Codegemäß Ihrem Vorschlaggeändert. WennichjQuery ('# datepicker') schreibe,erhalteich das Div wie zuvor,abertrotzdemerhalteich auchgenau dengleichen Fehler!Ich habemit einer leeren HTML-Dateigetestet,die HTML-Ausgabe der wp_enquequesplatziert,undmit dieser Testseitefunktioniertes,alsogibt esetwasin wp,das datepicker () vermasselt,aberich habe keine Ahnung,wieich das lösen soll...

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
Dann würdeich Ihr Thema aufelfundzwanzig setzen und alle anderen Plugins deaktivieren.Schalten Sie sienacheinanderein,bis Sie herausfinden,bei welcher Datumsauswahl der Fehler auftritt.

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
Endlich habeichesgeschafft!Ichmusste 'wp_print_scripts' anstelle von 'init'platzieren undeinen Init-Codeeines anderen Pluginsneupositionieren,dasin Konflikt stand.Daseinzige verbleibende Problem sind die Themen ... Wennich dasgrundlegende Themain Google Code verwende,funktioniertes.Wennich andere Themen verwende (eingebettet odermit wp_enqueque_style verknüpft),wird das Themanichtgeladen.

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