StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>WordPress environment</strong></p> <p>First of all, in order to achieve this task, it's recommended to register then enqueue a jQuery script that will push the request to the server. These operations will be hooked in <code>wp_enqueue_scripts</code> action hook. In the same hook you should put <code>wp_localize_script</code> that it's used to include arbitrary JavaScript. By this way there will be a JS object available in front end. This object carries on the correct url to be used by the jQuery handle. </p> <p>Please take a look to:</p> <ol> <li><a href="http://codex.wordpress.org/Function_Reference/wp_register_script" rel="nofollow noreferrer">wp_register_script();</a> function</li> <li><a href="http://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts" rel="nofollow noreferrer">wp_enqueue_scripts</a> hook</li> <li><a href="http://codex.wordpress.org/Function_Reference/wp_enqueue_script" rel="nofollow noreferrer">wp_enqueue_script();</a> function</li> <li><a href="http://codex.wordpress.org/Function_Reference/wp_localize_script" rel="nofollow noreferrer">wp_localize_script();</a> function</li> </ol> <p>In main plugin file, add these.</p> <pre><code>add_action( 'wp_enqueue_scripts', 'so_enqueue_scripts' ); function so_enqueue_scripts(){ wp_register_script( 'ajaxHandle', get_template_directory() . 'PATH TO YOUR SCRIPT FILE', array(), false, true ); wp_enqueue_script( 'ajaxHandle' ); wp_localize_script( 'ajaxHandle', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin_ajax.php' ) ) ); } </code></pre> <p><strong>File: jquery.ajax.js</strong></p> <p>This file makes the AJAX call.</p> <pre><code>jQuery(document).ready( function($){ //Some event will trigger the ajax call, you can push whatever data to the server, simply passing it to the "data" object in ajax call $.ajax({ url: ajax_object.ajaxurl, // this is the object instantiated in wp_localize_script function type: 'POST', data:{ action: 'myaction', // this is the function in your functions.php that will be triggered name: 'John', age: '38' }, success: function( data ){ //Do something with the result from server console.log( data ); } }); }); </code></pre> <p>Also add these files in plugin main file too.</p> <p>Finally, on your functions.php file, there should be the function triggered by your AJAX call. Remember the suffixes: </p> <ol> <li><code>wp_ajax</code> ( allow the function only for registered users or admin panel operations )</li> <li><code>wp_ajax_nopriv</code> ( allow the function for no privilege users )</li> </ol> <p>These suffixes plus the action compose the name of your action:</p> <p><code>wp_ajax_myaction</code> or <code>wp_ajax_nopriv_myaction</code></p> <pre><code>add_action( "wp_ajax_myaction", "so_wp_ajax_function" ); add_action( "wp_ajax_nopriv_myaction", "so_wp_ajax_function" ); function so_wp_ajax_function(){ //DO whatever you want with data posted //To send back a response you have to echo the result! echo $_POST['name']; echo $_POST['age']; wp_die(); // ajax call must die to avoid trailing 0 in your response } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload