WordPress.org

Ready to get started?Download WordPress

Forums

jQuery UI Components Will Not Load on WP Admin Menu (5 posts)

  1. bianca6
    Member
    Posted 3 years ago #

    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.

  2. Aaron Jorbin
    Member
    Posted 3 years ago #

    You need to declare jquery-ui-core as a dependency for any of the ui components. Also, make sure you are using the correct version of the slider component. I believe in 2.9 it's version 1.7.1 of jQuery UI

  3. smakdaddy
    Member
    Posted 3 years ago #

    hey jorbin, can you expand a little on this? i'm having the same issue but not sure how you go about declaring this dependancy?

  4. gabrielparriaux
    Member
    Posted 3 years ago #

    Hello you all,

    Have the same problem as explained by bianca6 and I can't understand exactly what to do with jorbin's affirmation.

    Can you explain a little bit more about that problem?

    Thanks!

    Gabriel

  5. bsohal
    Member
    Posted 3 years ago #

    I am getting same problem. But I did not try to provide any version. I am try to use sortable to a list.
    If someone of you already have the solution, please help me.

Topic Closed

This topic has been closed to new replies.

About this Topic