How Do I Use jQuery UI In My Plugin

by

It’s a sad day in the world when I Google something and it returns nothing. I am trying to use the default datepicker (or ANY datepicker at this point) and am unable to because of my lack of knowledge with WordPress/PHP. In my plugin, I am attempting to register jquery and the ui and apparently am breaking other parts of WordPress in the process. Can someone please tell me what I’m doing wrong and if they can provide a working solution, I will scrap all of my code:

add_action('init', 'add_styles');

function add_styles(){
    wp_deregister_style('simpleschoolstyles');
    wp_register_style('simpleschoolstyles', SSM_STYLEFILE);

    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js');

    wp_deregister_script( 'jquery-ui' );
    wp_register_script('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js');

    wp_deregister_style( 'jquery-ui' );
    wp_register_style( 'jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/pepper-grinder/jquery-ui.min.css' );

    wp_deregister_script('maskedinput');
    wp_register_script('maskedinput', SSM_PLUGIN_URL . '/includes/js/jquery.maskedinput.min.js');

    wp_deregister_script('simpleschool');
    wp_register_script('simpleschool', SSM_PLUGIN_URL . '/includes/js/simpleschool.js');
}

add_action('wp_enqueue_scripts', 'load_scripts');
add_action('admin_enqueue_scripts', 'load_scripts');

function load_scripts()
{
    wp_enqueue_style('jquery-ui');    
    wp_enqueue_style('simpleschoolstyles');
    wp_enqueue_script('jquery');       
    wp_enqueue_script('jquery-ui');
    wp_enqueue_script('maskedinput');
    wp_enqueue_script('simpleschool');
}

I need jQuery to be available in the admin area as well as the front-end for user data-entry. Please someone help. I am near pulling my toenails off as I have ripped all of my hair out already…I am assuming that I must be enqueueing at the wrong point in time, but again, due to my limited knowledge of WordPress, I have dug myself a grave quickly.

UPDATE:
I modified my script and now only loading jQuery UI and have tested that jQuery and the UI are both loaded and have success for those two, but not an existing object in the DOM:

add_action('init', 'init_scripts');

function init_scripts(){
    wp_deregister_style('simpleschoolstyles');
    wp_register_style('simpleschoolstyles', SSM_STYLEFILE);

    //wp_deregister_script( 'jquery-ui' );
    wp_register_script('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js');

    //wp_deregister_style( 'jquery-ui' );
    wp_register_style( 'jquery-ui-pepper-grinder', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/pepper-grinder/jquery-ui.min.css' );

    //wp_deregister_script('maskedinput');
    wp_register_script('maskedinput', SSM_PLUGIN_URL . '/includes/js/jquery.maskedinput.min.js');

    //wp_deregister_script('simpleschool');
    wp_register_script('simpleschool', SSM_PLUGIN_URL . '/includes/js/simpleschool.js');

    wp_enqueue_style('jquery-ui-pepper-grinder');
    wp_enqueue_style('simpleschoolstles');
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery-ui' );
    wp_enqueue_script('simpleschool');
}

My Test:

jQuery(document).ready(function(){
    //jQuery('.datepick').mask("99/99/9999");
    //jQuery('.phone').mask("(999) 999-9999");
    jQuery( '.datepick' ).datepicker( 'option', 'dateFormat', 'yyyy-mm-dd' ); // <-- this fails ????    
    alert('jQuery BETTER BE LOADED!!!'); // <---this worked
    jQuery('<div>crazy wordpress and their php</div>').dialog(); // <--- this worked too
});

3 s
3

Given that all of the libraries you need for the datepicker are bundled with WordPress and are registered with all of the appropriate dependencies, all you really need to do is:

function enqueue_my_scripts_wpse_97533() {
  wp_enqueue_script('jquery-ui-datepicker');
}
add_action('wp_enqueue_scripts','enqueue_my_scripts_wpse_97533');

If you then look at the source of the page you will see that jQuery, jQuery-UI, and jQuery-UI-Datepicker are all loaded.

Of course, you will need to load any other scripts yourself in pretty mush the way you already are, though you should register them with their dependencies– third parameter.

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

For example…

wp_register_script(
    'maskedinput',
    SSM_PLUGIN_URL.'/includes/js/jquery.maskedinput.min.js',
    array('jquery')
);

That way, you could load that with…

function enqueue_my_scripts_wpse_97533_v2() {
  wp_enqueue_script('maskedinput');
}
add_action('wp_enqueue_scripts','enqueue_my_scripts_wpse_97533_v2');

… and know that the dependencies– jQuery– will get loaded as well.

Leave a Comment