WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

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
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

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

Your Answer

 
discard

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