I added a menu item to the Admin Bar that executes some Javascript to show debug information. The problem is that clicking this item also reloads the page. How can I prevent this?
I was trying to speed up my debug & dev stuff and wanted to add a class to my main wrapper div using jQuery.
Step 1:
Add styles to your head
function my_admin_bar_script_def( $script ) {
$script="
jQuery(document).ready( function() {
jQuery("li#wp-admin-bar-showdebug").click( function() {
jQuery(".wrap").toggleClass("showdebug");
} )
} );
";
return print $script;
}
add_action( 'wp_head', 'my_admin_bar_script_def', 11 );
Step 2:
Add a admin bar menu item:
function my_admin_bar_class_switch() {
global $wp_admin_bar;
$wp_admin_bar->add_menu(
array(
'parent' => 'theme_options'
,'title' => __( 'showdebug', TEXTDOMAIN )
,'href' => '' // **interesting problem over here**
)
);
}
add_action( 'admin_bar_menu', 'my_admin_bar_class_switch', 70 );
Problem:
Every time you trigger your toggle function you’ll fire up the link and reload the page. Therefore you’ll get the initial trigger again. Replacing the link is not possible, because in the $args
array for the add_menu()
function you only define the href
and the link will be printed anyway. Filters or hooks? Not available.