Daniel Daniel - 5 months ago 19
PHP Question

Wordpress passing ajax value to a specific page using Wordpress

I would like to pass a variable to a specific page. I found a simple example how to use ajax with wordpress.

JavaScript:

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

// We'll pass this variable to the PHP function example_ajax_request
var fruit = 'Banana';

// This does the ajax request
$.ajax({
url: ajaxurl,
data: {
'action':'example_ajax_request',
'fruit' : fruit
},
success:function(data) {
// This outputs the result of the ajax request
console.log(data);
},
error: function(errorThrown){
console.log(errorThrown);
}
});

});


Piece of PHP to insert in functions.php

function example_ajax_request() {

// The $_REQUEST contains all the data sent via ajax
if ( isset($_REQUEST) ) {

$fruit = $_REQUEST['fruit'];

// Let's take the data that was sent and do something with it
if ( $fruit == 'Banana' ) {
$fruit = 'Apple';
}

// Now we'll return it to the javascript function
// Anything outputted will be returned in the response
echo $fruit;

// If you're debugging, it might be useful to see what was sent in the $_REQUEST
// print_r($_REQUEST);

}

// Always die in functions echoing ajax content
die();
}

add_action( 'wp_ajax_example_ajax_request', 'example_ajax_request' );



wp_localize_script( 'ajax-script', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );


Unfortunately I cannot pass the variable. I inspected the code and I get this error:

Error: ajax_object is not defined

Do you maybe know another way to obtain the same result?

Answer

You are very near, but there is some little things missing…

What I mean in my comment, is that you need to use it this way using 'ajax-script' in both:

add_action('wp_enqueue_scripts', 'add_js_scripts'); 
add_js_scripts(){
    wp_enqueue_script( 'ajax-script', get_template_directory_uri().'/js/script.js', array('jquery'), '1.0', true );
    wp_localize_script( 'ajax-script', 'ajax_object', array( 'ajaxurl' =>   admin_url( 'admin-ajax.php' ) ) );
}

Changed $_REQUEST to $_POST:

function example_ajax_request() {

    // The $_REQUEST contains all the data sent via ajax
    if ( isset($_POST) ) {

        $fruit = $_POST['fruit'];

        // Let's take the data that was sent and do something with it
        if ( $fruit == 'Banana' ) {
            $fruit = 'Apple';
        }

        // Now we'll return it to the javascript function
        // Anything outputted will be returned in the response
        echo $fruit;

        // If you're debugging, it might be useful to see what was sent in the $_POST
        // print_r($_POST);

    }

    // Always die in functions echoing ajax content
      die();

 }

Added add_action( 'wp_ajax_nopriv_ … ):

add_action( 'wp_ajax_nopriv_example_ajax_request', 'example_ajax_request' ); // <= this one
add_action( 'wp_ajax_example_ajax_request', 'example_ajax_request' );

For your jQuery script script.js file, there is 2 important missing little things:

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

    /* We'll pass this variable to the PHP function example_ajax_request */
    var fruit = 'Banana';

    /* This does the ajax request */
    $.ajax({
        url: ajax_object.ajaxurl, /* <====== missing here */
        type : 'post', /*    <========== and missing here */
        data: {
            'action':'example_ajax_request',
            'fruit' : fruit
        },
        success:function(data) {
            /* This outputs the result of the ajax request */
            console.log(data);
        },
        error: function(errorThrown){
            console.log(errorThrown);
        }
    });  

});

This should work now…

References:

Comments