Usando o jQuery para excluir dados armazenados em wp_options

Gostaria de saber se alguém poderia me aconselhar mais sobre o meu problema. Parte do meu plug-in armazena arquivos de log para fins de depuração. Eu os exibi com sucesso em um (div # log) na minha página de administração usando jquery e wp_localise_script. Eu tenho um botão para excluir esses logs, mas não tenho certeza de como processar isso. Tenho a sensação de que o ajax pode ser útil aqui, mas não sei por onde começar.

Aqui estão as partes relevantes do meu código:

admin_enqueue_scripts (ação)

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

Página do administrador

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

Ação para limpar o 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');

Até agora, este script está funcionando para mostrar todos os arquivos de log, agora tudo o que preciso é excluí-los ao clicar em #clear_log. Eu sei que a conexão de uma do_action no init irá excluí-los assim que a página carregar, tornando meu javascript inútil, então acho que a única opção é ajax! Preciso adicionar outra referência ao wp_localize_script ()? Qualquer ajuda seria apreciada.

O Ajax no WordPress funciona enviando uma postagem HTTP para /wp-admin/admin-ajax.php (por padrão) que aciona o gancho correspondente. Então, você anexa alguma jquery a um evento acionado pelo botão de exclusão, que é postado no admin-ajax.php, que tem uma ação, por exemplo, delete_my_options (), que realmente executa o php para excluir. Em seguida, você tem uma função, chamada de retorno de chamada, que é executada com êxito na conclusão da solicitação ajax. Você pode usar isso para diminuir sua div #log por exemplo.

Em resumo, você tem três etapas, a ação, o ajax e o retorno de chamada. A ação é acionada por um evento DOM e anexada a dois ganchos, wp_ajax_ {nome_da_ação} e wp_ajax_nopriv_ {nome_da_ação} (somente se você não desejar que usuários logados possam fazê-lo). Eles são acionados quando essa ação é publicada em wp-admin / admin-ajax.php. O ajax é a função php (geralmente) conectada a eles. A função de retorno de chamada é uma função javascript que é acionada quando o ajax é concluído com êxito.

Passo a passo:

Etapa 1, no seu arquivo js

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

}); 

Etapa 2, no seu functions.php ou em um plugin

Adicione isso à função da qual você enfileira seu javascript: (obrigado @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' ), ) );

Em seguida, adicione isso ao seu functions.php ou 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
    }
}

Etapa 3, de volta ao seu arquivo js

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