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.

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');
share|improve this question
    
How are you including jQuery in your admin page? If you edit your question to include the relevant code, that'd help potential answerers. –  MathSmath Jan 24 '11 at 16:58
    
Done. You can see the code in the original post. –  user1635 Jan 24 '11 at 17:28
add comment

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();
share|improve this answer
add comment
up vote 0 down vote accepted

It worked when i used version 1.7.3 of the jQuery UI.

Version 1.8.9 seems to have compatibility issues with the jQuert used by Wordpress admin.

share|improve this answer
    
Do you happen to know if 1.8.10 fixes this? –  Marcus Downing Mar 9 '11 at 16:19
add comment

I believe some installs of 3.1 are not loading all of the required supporting JQuery UI 1.8.9 scripts. In particular, "widgets.js". Hence, the "widgets" error.

share|improve this answer
add comment

Your Answer

 
discard

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