it-swarm.com.de

Admin Bar Menüpunkt, der Javascript ausführt, aber die Seite nicht neu lädt?

Ich habe der Admin-Leiste ein Menüelement hinzugefügt, das Javascript ausführt, um Debug-Informationen anzuzeigen. Das Problem ist, dass durch Klicken auf dieses Element auch die Seite neu geladen wird. Wie kann ich das verhindern?

Ich habe versucht, mein Debug & Dev-Zeug zu beschleunigen und wollte mit jQuery eine Klasse zu meinem Haupt-Wrapper-Div hinzufügen.

Schritt 1:

Fügen Sie Ihrem Kopf Stile hinzu

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

Schritt 2:

Hinzufügen eines Admin-Leisten-Menüelements:

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:

Jedes Mal, wenn Sie Ihre Umschaltfunktion auslösen, wird der Link gestartet und die Seite neu geladen. Daher erhalten Sie den ersten Auslöser erneut. Das Ersetzen des Links ist nicht möglich, da Sie im $args-Array für die add_menu()-Funktion nur die href definieren und der Link trotzdem gedruckt wird. Filter oder Haken? Nicht verfügbar.

3
kaiser

Wenn Sie in dieser Javascript-Funktion return false eingeben, wird der Klick nicht weitergegeben und die Seite wird auch nicht neu geladen.

Noch besser ist, dass Sie ein onclick-Attribut für einen Menüeintrag angeben können . Ihre Definition würde also so aussehen:

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

In diesem Fall müssen Sie das Ereignis onclick nicht selbst verknüpfen. Dort werden zwei weitere mögliche Fehler angezeigt: wp_head ist eine Aktion und kein Filter. Wenn Sie das Skript zurückgeben, wird es nicht gedruckt. Außerdem sind Sie darauf angewiesen, dass showdebug Teil der id ist. Da Sie jedoch die ID nicht angeben, wird sie aus dem Titel generiert. Wenn diese Zeichenfolge übersetzt ist, bleibt diese ID nicht gleich.

1
Jan Fabry

Lösung:

Stellen Sie einfach 'href' => '#' ein, um eine Verknüpfung zu einem nicht definierten Anker herzustellen und ein erneutes Laden der Seite zu vermeiden.

Ich weiß, dass dies wirklich einfach ist, aber ich habe fast eine Stunde gebraucht, um auf den richtigen Weg zu kommen (ich habe zu viel über Filter und Hooks nachgedacht, um die Ausgabe zu ändern).

1
kaiser