web-dev-qa-db-fra.com

Elément de menu de la barre d’administration qui exécute Javascript mais ne recharge pas la page?

J'ai ajouté un élément de menu à la barre d'administration qui exécute du Javascript pour afficher les informations de débogage. Le problème est que cliquer sur cet élément recharge également la page. Comment puis-je empêcher cela?

J'essayais d'accélérer mes tâches de débogage et de développement et je voulais ajouter une classe à mon div principal wrapper à l'aide de jQuery.

Étape 1:

Ajoutez des styles à votre tête

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

Étape 2:

Ajouter un élément de menu de la barre d'administration:

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

Problème:

Chaque fois que vous activez votre fonction de basculement, vous activez le lien et rechargez la page. Par conséquent, vous aurez à nouveau le déclencheur initial. Le remplacement du lien n'est pas possible car, dans le tableau $args de la fonction add_menu(), vous définissez uniquement la variable href et le lien sera malgré tout imprimé. Filtres ou crochets? Indisponible.

javascriptadmin-bar
3
kaiser

Si vous return false dans cette fonction Javascript, le clic ne sera pas propagé et la page ne rechargera pas non plus.

Encore mieux, , vous pouvez spécifier un attribut onclick pour un élément de menu . Donc, votre définition deviendrait ceci:

function my_admin_bar_class_switch( &$wp_admin_bar ) {
    // $wp_admin_bar is passed by reference, you don't need the global var
    $wp_admin_bar->add_menu( 
        array( 
             'parent'   => 'theme_options'
            ,'title'    => __( 'showdebug', AHF_LANG )
            ,'href'     => '' // This can stay empty
            ,'meta'     => array(
                'onclick' => 'jQuery(".wrap").toggleClass("showdebug"); return false;'
            )
        ) 
    );
}
add_action( 'admin_bar_menu', 'my_admin_bar_class_switch', 70 );

Dans ce cas, vous n'avez pas besoin de connecter l'événement onclick vous-même. J'y vois deux autres erreurs possibles: wp_head est une action, pas un filtre, donc en renvoyant le script, il ne sera pas imprimé. De plus, vous dépendez de showdebug faisant partie de id, mais comme vous ne spécifiez pas l'ID, il est généré à partir du titre. Si cette chaîne est traduite, cet identifiant ne restera pas le même.

1
Jan Fabry

Solution:

Il suffit de définir 'href' => '#' pour créer un lien vers une ancre non définie afin d'éviter le rechargement de page.

Je sais que c'est très simple, mais il m'a fallu près d'une heure pour aller sur la bonne voie (penser trop aux filtres et aux points d'ancrage pour modifier le résultat), alors voici ma part.

1
kaiser