Does anyone have experience with using the jQuery UI plugins in the WordPress admin area?

I´ve been trying to use the datepicker functionality in jQuery UI, but its conflicting with the built- in jQuery in wordpress admin. http://docs.jquery.com/UI/Datepicker

This is the error message I get in console:

Uncaught TypeError: Cannot read property 'apply' of undefined
a.widget.a.extend._trigger
b.Widget._createWidget
b.widget.b
b.widget.bridge.b.fn
c.extend.each
c.fn.c.each
b.widget.bridge.b.fn
postboxes.init
postboxes.add_postbox_toggles
(anonymous function)
c.extend.ready
L

What could I possibly do to avoid this conflict?

Adding the code used to include the jquery:

wp_register_script( 'jquery-tooltip', 'http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js');
wp_register_script( 'jquery-ui-datepicker', get_bloginfo('template_directory') . '/js/jquery-ui-1.8.8.custom.min.js' );
wp_register_script( 'jquery-admin-internal', get_bloginfo('template_directory') . '/js/jquery.admin.internal.js' );
wp_register_script( 'jquery-internal', get_bloginfo('template_directory') . '/js/jquery.internal.js' );

function enqueue_admin_jquery() {
wp_enqueue_script('jquery-ui-datepicker');
wp_enqueue_script('jquery-admin-internal');
}
add_action('admin_init', 'enqueue_admin_jquery');

3 Answers
3

This is what I include in my calendar plugin:

  // Alternative solution for loading scripts only in plugin page
  if( (is_admin() ) && (isset($_GET['page'])))   { 
      // Register scripts and styles
      add_action('admin_init', 'wp_eventcal_init');
  }  

  function wp_eventcal_init() {    
    // Only load these scripts in Admin
    wp_deregister_script('jquery-ui-core');
    wp_register_script('jquery-ui','http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js',array('jquery'));
    wp_enqueue_script('ui-datepicker', plugins_url('js/jquery.ui.datepicker.min.js',__FILE__));
    wp_enqueue_script('ui-timepicker', plugins_url('js/jquery.timepicker.js',__FILE__));
    wp_enqueue_script('wp-calendar', plugins_url('js/wp-eventcal.js',__FILE__));
    wp_enqueue_style('event_cal_css', plugins_url('styles/eventcal.css',__FILE__));          
  }

Then I just do this:

jQuery("#event_startTime, #event_endTime").timePicker();

Leave a Reply

Your email address will not be published. Required fields are marked *