0

I am trying to show a jquery-ui tab in a plugin page through the function billing_settings_page. As jQuery and jQuery UI are loaded automaically, so I thought I wouldn't need to include them. But a bit googling told me to include jQuery UI tab as well. My code follows. I do not even find ay console error in browser. The code does not show any jQuery UI tab however.

<?php

             add_action('admin_enqueue_scripts','nibiz_billing_init');

             function nibiz_billing_init() {
                wp_enqueue_script( 'jquery-ui-tabs' );
                wp_enqueue_script( 'nibiz', plugins_url( '/js/customer.js', __FILE__ ));
            }


            add_action('admin_menu', 'billing_settings_menu');

            function billing_settings_menu() {

                    add_menu_page( 'Billing Settings', 'Billing Link',
                    'manage_options',  __FILE__, 'billing_settings_page',
                    screen_icon('edit'));

                    add_submenu_page( __FILE__, 'About My Plugin', 
                        'About', 'manage_options','nibiz_about', 
                        'billing_settings_page_about' )    ;


                    }



            function billing_settings_page() {
                ?>

                <div id="tabs">
                <ul>
                    <li><a href="#tabs-1">First</a></li>
                    <li><a href="#tabs-2">Second</a></li>
                    <li><a href="#tabs-3">Third</a></li>
                </ul>
                <div id="tabs-1">Lorem ipsum dolor sit amet, 
        consectetur adipisicing elit, sed do eiusmod tempor 
        incididunt ut labore et dolore magna aliqua. Ut enim 
        ad minim veniam, quis nostrud exercitation ullamco 
        laboris nisi ut aliquip ex ea commodo consequat.</div>
                <div id="tabs-2">Phasellus mattis tincidunt 
        nibh. Cras orci urna, blandit id, pretium vel, aliquet 
        ornare, felis. Maecenas scelerisque sem non nisl. 
        Fusce sed lorem in enim dictum bibendum.</div>
                <div id="tabs-3">Nam dui erat, auctor a, 
        dignissim quis, sollicitudin eu, felis. Pellentesque 
        nisi urna, interdum eget, sagittis et, consequat 
        vestibulum, lacus. Mauris porttitor ullamcorper 
        augue.</div>
            </div>



                <?php
                }
            ?>

The custom.js file has the following code :

//jquery-ui-tabs
jQuery(document).ready(function($) {
jQuery('#tabs').tabs();
});

What am I supposed to do to make the tab work ?

1 Answer 1

1

First check all the JS files are loaded properly by going to Chrome Developer Tools. Also check if any other script is causing any error or not. You can check this by Chrome Dev Tools.

Some Improvements:

Add jquery-ui-tabs as a dependency of nibiz script and I'll suggest rewrite the custom.js JavaScript code. So your whole code will be like below-

add_action('admin_enqueue_scripts','nibiz_billing_init');

function nibiz_billing_init() {
    // Don't need to wp_enqueue_script( 'jquery-ui-tabs' ) since you're in the admin panel.
    // wp_enqueue_script( 'jquery-ui-tabs' );
    // Add 'jquery-ui-tabs' as dependency.
    wp_enqueue_script( 'nibiz', plugins_url( '/js/customer.js', __FILE__ ), array('jquery-ui-tabs'));
}


add_action('admin_menu', 'billing_settings_menu');

function billing_settings_menu() {

    add_menu_page( 'Billing Settings', 'Billing Link',
                   'manage_options',  __FILE__, 'billing_settings_page',
                   screen_icon('edit'));

    add_submenu_page( __FILE__, 'About My Plugin',
                      'About', 'manage_options','nibiz_about',
                      'billing_settings_page_about' );
}

function billing_settings_page() {
    ?>

    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">First</a></li>
            <li><a href="#tabs-2">Second</a></li>
            <li><a href="#tabs-3">Third</a></li>
        </ul>
        <div id="tabs-1">Lorem ipsum dolor sit amet,
            consectetur adipisicing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.</div>
        <div id="tabs-2">Phasellus mattis tincidunt
            nibh. Cras orci urna, blandit id, pretium vel, aliquet
            ornare, felis. Maecenas scelerisque sem non nisl.
            Fusce sed lorem in enim dictum bibendum.</div>
        <div id="tabs-3">Nam dui erat, auctor a,
            dignissim quis, sollicitudin eu, felis. Pellentesque
            nisi urna, interdum eget, sagittis et, consequat
            vestibulum, lacus. Mauris porttitor ullamcorper
            augue.</div>
    </div>



    <?php
}
?>

And the custom.js code will be-

//jquery-ui-tabs
(function($) {
    // After the document is ready
    $(function(){
        $('#tabs').tabs();
    });
})(jQuery);

Hope that helps.

7
  • why do I need wp_enqueue_script( 'jquery-ui-tabs' ); if jQuery UI loads automatically ? May 16, 2017 at 19:34
  • Cause jquery-ui-tabs will automatically load only for dashboards or admin panel. For using in frontend you need to enqueue this script. By the did the above worked for you?
    – CodeMascot
    May 17, 2017 at 2:48
  • I am trying to show the tab in a plugin page in admin panel. May 17, 2017 at 7:12
  • Oh... I see... I just missed that point. Then you don't need to enqueue wp_enqueue_script( 'jquery-ui-tabs' );. But keep the 'jquery-ui-tabs' in the custom.js dependency.
    – CodeMascot
    May 17, 2017 at 7:28
  • any way to make custom.js dependent on the full jqueyr ui bundle instead of the tab alone ? May 17, 2017 at 7:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.