toggle jQuery PHP

Question

I am trying to toggle a button using jQuery.

jQuery(document).ready( function($) {
    $("#wp-admin-bar-maintenance").click( function() {
        var data = { action: 'maintenance' };

        $.post(maintenance.ajaxurl, data, function(response) {
            $(".maintenance-icon").toggleClass('flicker');
        });

        return false;
    });
});

That works, the button has the 'flicker' class and it's toggling, but now the PHP side messing it up.

function maintenance_adminbar() {
global $wp_admin_bar;

if( current_user_can( 'manage_options' ) ){
    if(get_option( 'maintenance' ) == true) {
        $wp_admin_bar->add_menu(array(
            'id' => 'maintenance',
            'title' => __('Maintenance') . get_option('maintenance'),
            'href' => '#',
            'meta' => array(
                'class' => 'maintenance-icon flicker'
            )
        ));
    } else {
        $wp_admin_bar->add_menu(array(
            'id' => 'maintenance',
            'title' => __('Maintenance') . get_option('maintenance'),
            'href' => '#',
            'meta' => array(
                'class' => 'maintenance-icon'
            )
        ));
    }
}

}
add_action('admin_bar_menu', 'maintenance_adminbar', 9999);

What this does is it adds a class called 'flicker' to the button using PHP when get_option('maintenance') is true.

But now the toggle function won't toggle anymore. When I click it, you can see it tries to toggle it but the flicker class from the PHP code is overriding it or something.

Is there any way to fix this up?

---

Update.

This is the ping function, which the AJAX function above uses;

function maintenance_process() {
    update_option('maintenance', !get_option('maintenance'));
    echo get_option('maintenance');
    die();
}
add_action('wp_ajax_maintenance', 'maintenance_process');

Answer 1

I'd make a few changes, but this is only based on my experience, workflow, and how I like to do things so I'll include notes and rationale for each.

AJAX Call: I like to set my ajax to return an actual value that I can read and react to in javascript, and I always (when possible) send it back as JSON because it's small and easy to parse.

<?php
function maintenance_process(){
    $maintenance = 1;
    if( 1 == get_option( 'maintenance' ) ){
        $maintenance = 0;
    }
    // I don't like using true/false in options and specifically
    // set the values to 1 or 0 for integer testing.
    update_option( 'maintenance', $maintenance );
    $result = array(
      'maintenance' => $maintenance
    );
    // Print JSON back to javascript
    exit( json_encode( $result ) );
}
add_action( 'wp_ajax_maintenance', 'maintenance_process' );

JavaScript: The JSON from ajax can now be read and used to toggle the class accordingly. In this case, we can read if maintenance is on or off from the Ajax call, and then set/remove our class. Also notice that I primed the $.post function to receive JSON with the added parameter at the end.

jQuery(document).ready( function($){
    $( "#wp-admin-bar-maintenance" ).click( function( ev ){
        ev.preventDefault();
        var data = { action: 'maintenance' };
        $.post( maintenance.ajaxurl, data, function( response ){
            if( 1 === response.maintenance ){
                $( ".maintenance-icon" ).addClass( 'flicker' );
            } else {
                $( ".maintenance-icon" ).removeClass( 'flicker' );
            }
        }, 'json' );
    } );
} );

Admin Bar: This code is fine but using my method, you would just change the get_option check to:

if( 1 == get_option( 'maintenance' ) ){...}

I'm not saying that my way of setting/passing variables is necessarily better, but it works extremely well for me across thousands of sites (custom themes and plugins). Now your javascript and admin bar code can't get out of sync because they're reacting to specific values passed back from ajax.

Let me know if this works or we can troubleshoot it.