jQuery UI Datepicker not working-Collection of common programming errors

2 years ago

admin

3 minutes

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:

On the page body, i use this code:


    jQuery('#datepicker').datepicker({
        dateFormat : 'yy-mm-dd'
    });

Data

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:


jQuery(document).ready(function() {
    jQuery('#datepicker').datepicker({
        dateFormat : 'yy-mm-dd'
    });
});

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:

[?]

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.

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:
```
jQuery(document).ready(function() {
    jQuery('#datepicker').datepicker({
        dateFormat : 'yy-mm-dd'
    });
});
```
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() {
    ?>

    jQuery(document).ready(function() {
        jQuery('#datepicker').datepicker();
    })
```

Originally posted 2013-11-23 09:51:13.