Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am using the following script to call my Jquery and Jquery UI as well as a custom-script.js. Currently it works to the point of being able to see the resource in the inspector and the tag's are outputted. However the code I use on the page like .datepicker just doesn't work. However If I use a hacked script tag and include my own jquery files my code works and .datepickers works. You can view the site at http://fiftyfity.com/place-an-order/ this is the version with the wp_enqueue_script running. I am stuck I want to use enqueue but it breaks my site.

wp_enqueue_script

function wptuts_scripts_basic() 
{
    // Register the script like this for a plugin:
    //wp_register_script( 'custom-script', plugins_url( '/js/custom-script.js', __FILE__ ) );
    // or
    // Register the script like this for a theme:
    wp_register_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js', array('jquery','jquery-ui-core') );

    // For either a plugin or a theme, you can then enqueue the script:
    wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_scripts_basic' );

Ouputted Html

<script type='text/javascript' src='http://fiftyfity.com/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
<script type='text/javascript' src='http://fiftyfity.com/wp-includes/js/jquery/ui/jquery.ui.core.min.js?ver=1.8.16'></script>

My hacked script tag *this works If I comment out the wp_enqueue_script

$url = content_url();
<script src="<?php echo $url; ?>/themes/fiftyfityNew/js/jquery-1.7.1.min.js"></script>
<script src="<?php echo $url; ?>/themes/fiftyfityNew/js/jquery-ui-1.8.17.custom.min.js"></script>
share|improve this question

1 Answer 1

The problem is that your first block of inline datepicker js is before jQuery and jQuery UI.

When you use wp_enqueue_script your script tags will be output where your wp_head() action hook is located. Move your inline datepicer js below wp_head and your jQuery should work.

enter image description here

You should also be using the no conflict wrapper for your inline datepicker js:

jQuery(document).ready(function($) {
    $("datepicker").datepicker({ });
share|improve this answer
    
still doesn't work after changing that. Don't know why. –  Anders Kitson Feb 22 '12 at 4:48
    
Works for me in Safari. –  Chris_O Feb 22 '12 at 4:51

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.