I've spent about 4 hours so far trying to research this problem, and all I've come up with so far is "noise", so I'm posting it to the forum.
I am listing "example" code snippets below, because real ones would give away which plugin this is for ... ;)
Background:
WordPress includes *some* but not all, of the jQuery UI library components in its distribution. They're located in the \wp-includes\js\jquery\ folder.
I want to use the jQuery UI "Slider" control in a plugin I'm developing, and this control isn't included in the WP distribution.
Easy enough:
1) Copy it to a folder in the plugin directory, say "/my-plugin/js/"
2) Use wp_register_script('my-jquery-ui-slider', WHATEVER_URLPATH .'/js/ui.slider.js'); to register it.
3) Use wp_enqueue_script( 'my-jquery-ui-slider' ); to add it to the script queue.
4) Add a script block to the template to instantiate the control:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#slider-range-max").slider({
range: "max",
min: 1,
max: 100,
value: 80,
slide: function(event, ui) {
$("#amount").val(ui.value);
}
});
jQuery("#amount").val(jQuery("#slider-range-max").slider("value"));
</script>
... And we should be good to go.
The Problem:
It doesn't work.
The slider control doesn't appear, and FireBug shows the following errors:
$.ui is undefined
$.widget("ui.slider", $.extend({}, $.ui.mouse, {
jQuery("#slider-range-max").slider is not a function
slide: function(event, ui)
Yet, when I examine the page's source code, the js file is correctly included in the header:
<script type='text/javascript' src='http://mysite.com/wp-content/plugins/my-plugin/js/ui.slider.js?ver=2.9.2'></script>
Following the link shows the contents of the js file, so it *is* there.
I also tried setting the base javascript library dependency:
wp_register_script('my-jquery-ui-slider', WHATEVER_URLPATH .'/js/ui.slider.js', array('jquery'), '1.4.0');
but there was no effect.
Even Stranger:
Meanwhile, in another admin menu page, I have the jQuery ui "Tabs" control WORKING PERFECTLY.
Since this control is *included* in the WP distribution, I can add it to the page using:
wp_enqueue_script( 'jquery-ui-tabs' );
Yet, if I
1) Copy the "ui.tabs.js" file in the wp includes directory and add it to "/my-plugin/js/"
2) Use wp_register_script('my-jquery-ui-tabs', WHATEVER_URLPATH .'/js/ui.tabs.js'); to register it.
3) Use wp_enqueue_script( 'my-jquery-ui-tabs' ); to add it to the script queue.
...it doesn't work, throwing the error:
a.widget is not a function
(function(a){a.widget("ui.tabs",{_init...e;delete this._unrotate}}})})(jQuery);
....This is probably being caused by some subtle, silly mistake I've made. What is it, and how do I fix it?
Info:
-This is on WPMU 2.9.2
-Testing with FireFox, Chrome, and IE7 using XAMPP on a Windows Box.
-Editing with NetBeans.
As for my experience level, I have about 10 years of C++/PHP experience, 1 year on WP, but am new to jQuery.