Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

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?

share|improve this question
add comment

2 Answers

up vote 1 down vote accepted

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

share|improve this answer
    
That's a weird one. At least you got it working! –  Khior Mar 1 '13 at 13:50
add comment

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'));
// ...
share|improve this answer
    
That's a good point, but unfortunately it's still not working.. –  DimC Feb 28 '13 at 19:03
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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