How Do I Use jQuery UI In My Plugin

Question

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
});
0
, , , clockwiseq 1 year 2020-07-19T00:10:38-05:00 0 Answers 62 views 0

Leave an answer

Browse
Browse