jQuery in a plugin page (datepicker problem) WordPress

• SOLVED

Hi, I'm trying to add a jQuery datepicker on my plugins page, but it gives a strange error:
d(a).zIndex is not a function jquery.ui.datepicker.min.js?ver=3.0.1 Line 37

And it only appears when the datepicker is set to an input field. If the datepicker is inline - i.e. targeting a <div> there is no problem and it appears and works fine. But when on an input, and you press the input to actually see the datepicker, it give the error

Here's how it's included:

add_action('admin_print_scripts', 'hnr_load_scripts');
add_action('admin_print_styles', 'hnr_load_styles');

function hnr_load_styles()
{
wp_enqueue_style('jquery.ui.theme', WP_PLUGIN_URL.'/'.str_replace(basename( __FILE__),"",plugin_basename(__FILE__)).'ui-lightness/jquery-ui-1.8.5.custom.css');
}

function hnr_load_scripts()
{
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-datepicker', WP_PLUGIN_URL.'/'.str_replace(basename( __FILE__),"",plugin_basename(__FILE__)).'jquery.ui.datepicker.min.js', array('jquery','jquery-ui-core'));
}

<script>
jQuery(document).ready(function()
{
jQuery(".dp1").datepicker();
jQuery(".dp2").datepicker();
});
</script>

<input type="text" name="dp1" value="" class="dp1" />
<div class="dp2"></div>

the dp1 is the buggy one. dp2 is displaying and working fine.

Answers (5)

2010-11-03

enodekciw answers:

try to change your function hnr_load_scripts() function like that:

function hnr_load_scripts()
{
wp_enqueue_script('jquery');
wp_enqueue_script('custom-jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.js');
}


---

enodekciw comments:

Ok, I've even made quick example for you with jQuery and jQuery UI looded from google library api. See it right here: [[LINK href="http://www.dekciw.lt/tuts/datepicker/"]]datepicker demo[[/LINK]]
Check the source code to get the idea. Imo, it wasn't working before you were loading ui core and datepicker from different sources (maybe incompatible or something like it)

2010-11-03

Nilesh shiragave answers:

hi...

http://jqueryui.com/demos/datepicker/ example working fine here with input box.

can you explain more what problem exact you are getting.

Thanks

2010-11-03

rilwis answers:

Try using ID instead of class.

Change your code to:

<input type="text" name="dp1" value="" class="dp1" id="my_dp1" />

<div class="dp2" id="my_dp2"></div>

<script>

jQuery(document).ready(function()

{

jQuery("#my_dp1").datepicker();

jQuery("#my_dp2").datepicker();

});

</script>

2010-11-03

idt answers:

Could your issue be related to this:http://forum.jquery.com/topic/jquery-ui-input-zindex-is-not-a-function#14737000000750359

2010-11-04

Peter van der Does answers:

It seems you downloaded version 1.8.5 of jquery UI. This is not the version shipping with WordPress.
You'll have to download version 1.7.3 http://jqueryui.com/download

Or instead of using
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');

Make this point to the new jquery files that came with your download.