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 ?

Read more here: jQuery UI tab does not work in the plugin page


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: