Adding <select> with javascript to admin bar. Works in Chrome/Safari, not Firefox

1 Views

I’m trying to add a new menu item to the WordPress admin bar. The sub menu item contains a select drop down to switch themes. In Firefox with href => false it generated <a href=""> and when I clicked the select it reloaded the page. I changed it to <a href="#">. That fixed the page reload when clicking on the select… but the javascript isn’t working.

The code itself works just fine in Chrome and Safari on Mac. I haven’t tested IE or any browsers on Windows yet. In Firefox on Mac it does nothing.

Read More

Here’s the code generated by the plugin: 

<li id="wp-admin-bar-switch_themes" class="menupop">
    <a href="#"><span>Switch Themes</span></a>
    <ul>
            <li id="wp-admin-bar-abstractambienceantisocialapertureapzauldbackstagebig-easybiznizzbloggingstreamboastbold-newsbusy-beecaffeinatedcanvascanvas-buddypress-betachapterscinchcity-guidecodacoffee-breakcontinuumcrispcush" class="">
                    <a href="#">
                            <select name="themeswitcher" onchange="location.href=this.options[this.selectedIndex].value;" style="color: #000; text-shadow: none;">
                                    <option value="http://themes.fusionized.com?wptheme=Abstract" style="color: #000; text-shadow: none;">Abstract</option>
                                    <option value="http://themes.fusionized.com?wptheme=Ambience" style="color: #000; text-shadow: none;">Ambience</option>
                            </select>
                    </a>
            </li>
    </ul>
</li>

Nothing fancy in the code to generate the admin bar items… 

$wp_admin_bar->add_menu( array( 'id' => 'switch_themes', 'title' => __( 'Switch Themes', 'textdomain' ), 'href' => '#' ) );
$wp_admin_bar->add_menu( array( 'parent' => 'switch_themes', 'title' => $theme_switcher->theme_switcher_markup('dropdown'), 'href' => '#' ) );
Post Views: 1

Related posts

Leave a Reply

3 comments

  1. Obviously you cannot put a select tag inside a A anchor. What happens is related to event bubbling: Firefox takes the A anchor click into account, not the select control.

    Change your html to: 

     <li id="wp-admin-bar-abstractambienceantisocialapertureapzauldbackstagebig-easybiznizzbloggingstreamboastbold-newsbusy-beecaffeinatedcanvascanvas-buddypress-betachapterscinchcity-guidecodacoffee-breakcontinuumcrispcush" class="">

                            <select name="themeswitcher" onchange="location.href=this.options[this.selectedIndex].value;" style="color: #000; text-shadow: none;">
                                    <option value="http://themes.fusionized.com?wptheme=Abstract" style="color: #000; text-shadow: none;">Abstract</option>
                                    <option value="http://themes.fusionized.com?wptheme=Ambience" style="color: #000; text-shadow: none;">Ambience</option>
                            </select>

            </li>

    and it should work cross-platform.

  2. If you want to add content to the menu item outside the <a> tag, you can add this in the ['meta']['html'] argument. So your code would look like this:

    $wp_admin_bar->add_menu( array(
    'parent' => 'switch_themes',
    'meta' => array(
        'html' => $theme_switcher->theme_switcher_markup( 'dropdown' ),
    ),
    'href' => '#',
    'title' => ' ', // An empty title will not be accepted
    'id' => 'wpse17434_child', // If the title is empty, you need to specify the ID yourself
) );

    This will generate an ugly empty <a> block above your dropdown, but you can hide this with the correct style.

    Have you considered not using a dropdown but just a submenu to list the different themes? This would be more in line with the current menu bar style.

  3. Since I couldn’t edit the tags that were being added but I could edit what was inside them, I added a closing tag and re-opened a new tag at the end of what I was inserting. Then just used CSS to hide the blank line they were adding around my content. Also set the href on both tags to #….

    Fixed the Firefox issue which seemed to be the only thing picky enough… even the W3 validator said the code was ok.

    Here’s the resulting code:

    <li id="wp-admin-bar-switch_themes" class="menupop">
<a href="#"><span>Switch Themes</span></a>
    <ul>                                
        <li id="wp-admin-bar-abstractambienceantisocialapertureapzauldbackstagebig-easybiznizzbloggingstreamboastbold-newsbusy-beecaffeinatedcanvascanvas-buddypress-betachapterscinchcity-guidecodacoffee-breakcontinuumcrispcush" class=" themeswitchermenu"> 
            <a href="#"></a>
            <select name="themeswitcher" onchange="location.href=this.options[this.selectedIndex].value;" style="color: #000; text-shadow: none; margin: 10px;"> 
                <option>Blah</option>
            </select><a href="#"></a> 
        </li>
    </ul>
</li>