Pass a variable from jQuery to PHP

Solution:1

In your ajax request, you need to specify the name of the php function, like so:

data: {'espressione': totale, 'action': 'myFunction'},

And in PHP, you need to use wp_ajax_pay and wp_ajax_nopriv actions, like so:

add_action('wp_ajax_myFunction', 'myFunction');
add_action('wp_ajax_nopriv_myFunction', 'myFunction');

And then run the function:

function myFunction(){
    $prezzo = $_POST['espressione'];
    ...
}

Solution:2

These are two of the most popular web languages

The WordPress core code is written in PHP and the Admin Dashboard interface makes heavy use of jQuery and JavaScript.

Of course these are all different programming languages and as you would expect, there’s no reason for them to work together at a development level.

This is called scope.

Scope defines the boundary where your data and variables will work in and there’s different levels of scope even within the same programming language.  We’re not going there.

As separate languages, PHP, jQuery and JavaScript are entirely out of scope.

Their code runs through different interpreters build into the server for PHP and the web browser for jQuery and JavaScript.

They don’t even acknowledge each others presence.

But as all three are used heavily in developing WordPress websites, there’s going to be occasions where you just need to pass WordPress data from PHP into your jQuery and JavaScript files so that they can do something cool in the user interface (UI) that can’t be done with PHP (easily).

Here’s how to do just that.

Passing Variables Between Languages

We’re going to show just how easy it is to grab information from the WordPress site using PHP, bundle that up and display it in the front end UI using jQquery or JavaScript.

First we create our test jQuery script file called lc-jquery.js. I keep this in a js folder inside our current theme.

jQuery(“#clickme”).click(function () {
var msg = ‘somestring=’+lc_jqpost_info.somestring;
msg += ‘ post_id=’+lc_jqpost_info.post_id;
msg += ‘ post_title=’+lc_jqpost_info.post_title;
alert( msg );
});
view rawlc-jquery.js hosted with ❤ by GitHub

Pretty simple stuff here.

We’re detecting a click on a link and displaying an alert box showing the undefined variable lc_jqpost_info.

Hang on – where did lc_jqpost_info come from?

Patience my young padawan.

We’ve created a test page on WordPress and added the following link on it with the #clickme ID so that we can hook our jQuery code to it.

<a id=”clickme” href=”#”>Show me stuff</a>

Now we need to load jQuery the script into WordPress and the proper way of doing that is using the wp_enqueue_script() function.

Copy the following code into your functions.php file.

// Load our jQuery script
function lc_load_jquery(){
wp_enqueue_script(‘lcjquerytest’, get_stylesheet_directory_uri() . ‘/js/lc-jquery.js’, array(‘jquery’), ‘1.0’, true);
}
add_action( ‘wp_enqueue_scripts’, ‘lc_load_jquery’ );

You’ll need to adjust the location for your script file if you haven’t placed it in the same place as this example.

If you reload your test page and click on the link you’ll find, in the inspect element window of the Chrome debugger, that there’s a jQuery error as the script can’t find the variable lc_jqpost_info.

This tells us two things.

1. That the script is loading in correctly

2. That we now have to do something about the lc_jqpost_info variable expected by the script.

Now we have to sort out that variable and pass some PHP information to jQuery

Passing PHP Info to jQuery

Finally, we’re here and about to use the awesome power of wp_localize_script().

Replace the lc_load_query() code you just put in your functions.php file with the following:

// Load our jQuery script
function lc_load_jquery(){
wp_enqueue_script(‘lcjquerytest’, get_stylesheet_directory_uri() . ‘/js/lc-jquery.js’, array(‘jquery’), ‘1.0’, true);
global $post;
$data = array( ‘somestring’ => ‘pooky’, ‘post_id’ => $post->ID, ‘post_title’ => $post->post_title )
wp_localize_script( ‘lcjquerytest’, ‘lc_jqpost_info’, $data );
}
add_action( ‘wp_enqueue_scripts’, ‘lc_load_jquery’ );
view rawfunctions.php hosted with ❤ by GitHub

We’ve added three of lines to the code.

Line 4 makes the $post variable accessible to our code.

Line 5 creates an array variable called $data and fills it with the items somestringpost_id and post_title.

somestring is just a standard string, post_id contains the Post ID of the current WordPress post (in this case the page with our test link on it) and post_title contains the Title of the same page.

Line 6 is where the magic happens and wp_localize_script() passes the array $data to the object lc_jqpost_info for the script lcjquerytest we just enqueued.

So just to be clear, the first parameter is the same name as your jQuery script you enqueued.  The second parameter is the name of the new object you want to be available to the jQuery code.  The third parameter is the name of the array we created in PHP to contain the data we want to pass onto the jQuery script.

Save everything, refresh your test page and click on that link.