update_option in WordPress AJAX

Question

I have this example:

For example, this code will register a callback called "wpa_49691":

add_action( 'wp_ajax_wpa_49691', 'wpa_49691_callback' );
add_action( 'wp_ajax_nopriv_wpa_49691', 'wpa_49691_callback' );
function wpa_49691_callback() {
    // Do whatever you need with update_option() here.
    // You have full access to the $_POST object.
}

Then, you post whatever data you need, just specify action in the object:

<script type="text/javascript">
    jQuery(document).ready(function($) {
        var data = {
            action: 'wpa_49691',
            my_var: 'my_data'
        };

        jQuery.post( ajaxurl, data, function(response) {
            // handle response from the AJAX request.
        });
    });
</script>

This script will post your data to the server. Inside the server callback, you'll see $_POST['my_var'] = 'my_data'.

I think that code is work. But i don't know how..:) I have many questions: 1....just specify action in the object - Where and How specify this action? How to use function wpa_49691_callback()? function wpa_49691_callback()? is php or js function? JS script call on click for example?

Get me please a working example..

Answer 1

Your first chunk of code is PHP, the second is javascript.

Here is how a full example might look:

In PHP (your theme's functions.php file or a plugin file):

//First enqueue your javascript in WordPress
function your_prefix_enqueue_scripts(){

    //Enqueue your Javascript (this assumes your javascript file is located in your plugin in an "includes/js" directory)
    wp_enqueue_script( 'your_unique_js_name', plugins_url('js/yourjavascriptfile.js', dirname(__FILE__) ), array( 'jquery' ) );

    //OR (simpler but not recommended)  
    wp_enqueue_script( 'your_unique_js_name', 'http://domain.com/myjavascriptfile.js', array( 'jquery' ) );

    //Here we create a javascript object variable called "youruniquejs_vars". We can access any variable in the array using youruniquejs_vars.name_of_sub_variable
    wp_localize_script( 'your_unique_js_name', 'youruniquejs_vars', 
        array(
            //To use this variable in javascript use "youruniquejs_vars.ajaxurl"
            'ajaxurl' => admin_url( 'admin-ajax.php' ),

        ) 
    );  

}
add_action( 'wp_enqueue_scripts', 'your_prefix_enqueue_scripts' );

Then also in PHP, create your ajax callback function:

//This is your Ajax callback function
function your_ajax_callback_function_name(){

    //Get the post data 
    $my_var = $_POST["my_var"];

    //Do your stuff here - maybe an update_option as you mentioned...

    //Create the array we send back to javascript here
    $array_we_send_back = array( 'test' => "Test" );

    //Make sure to json encode the output because that's what it is expecting
    echo json_encode( $array_we_send_back );

    //Make sure you die when finished doing ajax output.
    die(); 

}
add_action( 'wp_ajax_' . 'wpa_49691', 'your_ajax_callback_function_name' );
add_action( 'wp_ajax_nopriv_' . 'wpa_49691', 'your_ajax_callback_function_name' );

And then in your javascript file do something like this:

jQuery(document).ready(function($){

    /**
     * When your ajax trigger button is clicked 
     * (if the button's class is .my-button)
     *
     */
    $( document ).on( 'click', '.my-button', function(event){

        event.preventDefault();

        // Use ajax to do something...
        var postData = {
            action: 'wpa_49691',
            my_var: 'my_data',
        }

        //Ajax load more posts
        $.ajax({
            type: "POST",
            data: postData,
            dataType:"json",
            url: youruniquejs_vars.ajaxurl,
            //This fires when the ajax 'comes back' and it is valid json
            success: function (response) {

                alert( response.test );

            }
            //This fires when the ajax 'comes back' and it isn't valid json
        }).fail(function (data) {
            console.log(data);
        }); 

    });

});