Using tabs in admin widgets

1 Views

Update: I should point out that I tested the method below on Plugin/theme options page and it worked perfectly. In-fact I was also able to include the jQuery cookie Plugin to preserve the current tab selection between page loads (nice!).

Been trying to add tabs to an admin widget to reduce the form footprint when you have multiple widget options. I am using the jQuery UI tabs included with WordPress. Here’s what I have so far coded into a Plugin.

Read More

http://pastebin.com/fe4wdBcp

When the widget is dragged into a widget area the tabs seem to render OK but you can’t click to view the second tab. Worse still if you refresh the widgets page the formatting of the tabs is completely lost, and the tabs still don’t respond to click events.

Not sure what the problem is here. Any help appreciated.

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. The problem is that you’re not using unique IDs (#tabs, #tabs-1 …), because widgets have multiple instances (the same IDs are used by the instance form the “Available Widgets” area).

    So just prepend or append the widget instance ID to your identifiers to make them unique:

    ...
<div id="tabs-<?php echo $this->id; ?>">
    <ul>
        <li><a href="#tabs-<?php echo $this->id; ?>-1">Tab One</a></li>
        <li><a href="#tabs-<?php echo $this->id; ?>-2">Tab Two</a></li>
    </ul>
    <div id="tabs-<?php echo $this->id; ?>-1">
        <p><?php _e('Textbox 1') ?>: <input class="widefat" name="<?php echo $this->get_field_name('text1'); ?>" type="text" value="<?php echo esc_attr($text1); ?>" /></p>
        <p><?php _e('Textarea 1') ?>: <textarea class="widefat" name="<?php echo $this->get_field_name('textarea1'); ?>" rows="8" cols="12"><?php echo esc_attr($textarea1); ?></textarea></p>
    </div>
    <div id="tabs-<?php echo $this->id; ?>-2">
        <p><?php _e('Textbox 2') ?>: <input class="widefat" name="<?php echo $this->get_field_name('text2'); ?>" type="text" value="<?php echo esc_attr($text2); ?>" /></p>
        <p><?php _e('Textarea 2') ?>: <textarea class="widefat" name="<?php echo $this->get_field_name('textarea2'); ?>" rows="8" cols="12"><?php echo esc_attr($textarea2); ?></textarea></p>
    </div>
</div>

<script type="text/javascript">
    jQuery(document).ready(function($){
        $("#tabs-<?php echo $this->id; ?>").tabs();
    });
</script>
...

    Also, not sure if WP 3.3 fixed this issue, but after the first drag inside the sidebar, the widget-save action needs to be manually triggered for the id property to become available inside the form() function.