Using jQuery to delete data stored in wp_options

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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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();
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0