jQuery UI Components Will Not Load on WP Admin Menu
-
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='https://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.
- The topic ‘jQuery UI Components Will Not Load on WP Admin Menu’ is closed to new replies.