jQuery UI inside widget on admin page

5 Views

I have created a widget that has quite a few settings, and so I am trying to create a tabbed menu (using jQuery UI) inside the widget settings of the admin page.

The problem is basically that tabs don’t happen (i.e. the a tags just appear on the top and the related divs underneath them).

Read More

This is a shortened version of the widget: 

add_action( 'admin_enqueue_scripts', 'load_my_admin_js' );

function load_my_admin_js($hook)
{
$my_plugin_url = trailingslashit( get_bloginfo('wpurl') ).PLUGINDIR.'/'. dirname( plugin_basename(__FILE__) );
if( 'widgets.php' != $hook )
        return;
wp_register_script( 'my_adminjs_script', plugins_url( '/adminjs.js', __FILE__ ) ); 
wp_register_script( 'jqui', 'http://code.jquery.com/ui/1.10.0/jquery-ui.js',false,'' ); 
wp_register_style( 'jquistyle', 'http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css',false,'' );    

wp_enqueue_script('my_adminjs_script');
wp_enqueue_script('jqui');
wp_enqueue_style('jquistyle');
}

class my_widget extend WP_Widget {

//constructor
//front end stuff

//admin page:
function form($instance) {  
?>
 <div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringieuismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lt nec, luctus a, lacus.</p>
   </div>
</div>

<?PHP
}


}

And this is my js: 

jQuery(document).ready(function($)    {

$( "#tabs" ).tabs();

});

Can anyone see where this is going wrong?

Post Views: 5

Related posts

Leave a Reply

3 comments

  1. Ok, so, for some reason I can’t comprehend, the answer is that the div element containing the tabs should have a class and not an id for jQuery UI to work properly, as such:

    <div class="mytabs">

    and 

    jQuery(document).ready(function($) {
    $(".mytabs").tabs();
});

    Just for the record, the way I enqued the scripts is:

    add_action( 'admin_enqueue_scripts', 'load_my_admin_js' );

function load_my_admin_js($hook){
if( 'widgets.php' != $hook )
        return;         
wp_register_script( 'my_adminjs_script', plugins_url( '/adminjs.js', __FILE__ ), array('jquery','jquery-effects-core','jquery-ui-tabs'));
wp_enqueue_script('my_adminjs_script');
}

    Perhaps the problem was a combination of the two points above.. Anyway, it now works

  2. It looks as though you might be including your js before the jQuery UI library is loaded. To fix the issue, I would make use of the dependencies parameter:

    // ...
wp_enqueue_script('jqui');
wp_enqueue_script('my_adminjs_script', false, array('jqui'));
// ...

  3. I don’t have enough reputation to reply to comment on your answer, so I will post it here: I had similar problem, and answer why class selector works (and id don’t) is because on widgets page, that element appears twice (on left side to select it and drag to the right), and on the right side, in appropriate sidebar area. So, that element and everything in it is duplicated. Same id should never appear twice on the same page (it is intended to be unique). jQuery was “confused” because it considers id’s to be unique, so apparently it didn’t selected any element.