Using jQuery to delete data stored in wp_options

Question

I wonder if anyone could advise me further on my problem. Part of my plugin stores log files for debugging purposes. I have successfully displayed them in a (div#log) in my admin page using jquery and wp_localise_script. I have a button to delete these logs but I am unsure how to process this. I have a feeling that ajax might come in handy here but not sure where to start.

Here is the relevant parts of my code:

admin_enqueue_scripts (action)

 $args = array(get_option('wow_tweets_log'));//log files fetched from wp_options table    
    wp_enqueue_script('wow_tweet');//registered earlier on with jQuery dependency
    wp_localize_script('wow_tweet', 'wow_vars', $args);

Admin Page

<tr><th scope="row"><strong>Debugging</strong></th><td>
    <div id="debug" class="button-primary">Debug</div><!--debug button shows logs-->
    <div id="hide_debug" class="button-secondary">Hide</div><!--debug button hides logs-->
    <div id="clear_log" class="button-secondary">Empty Log</div><!--Press to delete logs-->
</td></tr>
<tr><th scope="row"></th><td><div id="log"><!--Logs show here--></div></td></tr>

Javascript

jQuery(document).ready(function() { 

    var debug_show = jQuery('#log').hide();//hides log by default

    jQuery('#debug').click(function(){//on click shows logs files in div#log
        for (var i = 0, l = wow_vars.length; i < l; i++) {
            var data = wow_vars[i];
        }
        jQuery('#log').show().html(data);

    });
    jQuery('#hide_debug').click(function()
    {
        debug_show.hide();
    }); 
});

Action to clear log

 function clear_log(){
    delete_option('wow_tweets_log');//am stuck on how to invoke this

    /*die();  would go at the end if ajax used*/
 }
 add_action('clear_log','clear_log');

So far this script is working to show all the log files, now all I need is to delete them when clicking #clear_log. I know plugging a do_action on init will delete them as soon as the page loads, making my javascript useless so I guess the only option is ajax! Do I need to add another reference to wp_localize_script()? Any help would be appreciated.

Answer 1

Ajax in WordPress works by sending an HTTP post to /wp-admin/admin-ajax.php (by default) that then fires the corresponding hook. So, you attach some jquery to an event triggered by your delete button, which then posts to admin-ajax.php, which has an action, say, delete_my_options(), which actually runs the php to delete. Then, you have a function, called a callback, that runs on successful completion of the ajax request. You could use this to fade your #log div out for example.

In short, you have three steps, the action, the ajax and the callback. The action is triggered by a DOM event and attached to two hooks, wp_ajax_{action_name} and wp_ajax_nopriv_{action_name} (only if you want no logged in users to be able to do it). These fire when that action is posted to wp-admin/admin-ajax.php. The ajax is the php (usually) function hooked to them. The callback function is a javascript function that is fired when the ajax is successfully completed.

Step by step:

Step 1, in your js file

jQuery('#hide_debug').click(function()
{
    var data = {};
    data.action = 'clear_log_action';
    data.options_delete_nonce = ajax_object.options_delete_nonce;
    jQuery.post(ajax_object.ajax_url, data, clear_log_callback);

}); 

Step 2, in your functions.php or a plugin

Add this to the function that you enqueue your javascript from: (thanks @Milo)

wp_localize_script( 'my_js_file_name', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ,   'options_delete_nonce' => wp_create_nonce( 'options_delete_nonce' ), ) );

Then add this to your functions.php or plugin:

// Edit: removed the nopriv hook (Thanks @toscho)
add_action('wp_ajax_clear_log_action','clear_log_ajax'); // attach your data.action to wp_ajax and wp_ajax_nopriv and hook your php function
function clear_log_ajax() {
    $nonce = $_POST['options_delete_nonce'];
    // Edit: Added nonces and permissions check (Thanks @Otto)
    if( wp_verify_nonce( $nonce, 'options_delete_nonce' ) && current_user_can( 'manage_options' ) ) {
        delete_option('wow_tweets_log');
        die(); // make sure to put a die() or exit() at the end of your ajax
    }
}

Step 3, back in your js file

// output will be what is echoed from your ajax, if anything
function clear_log_callback(output) 
{
    jQuery('#log').hide();
}