jQuery UI tab does not work in the plugin page

Question

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 ?

Answer 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.