Using AJAX in a WordPress Plugin

Question

I am trying to create an AJAX based WordPress plugin. I read the tutorial and made a plugin, but it does not work. I am new to AJAX. Here is the code I tried:

<?php class ajaxtest { function ajaxcontact() { ?> <div id="feedback"></div> <form name="myform" id="myform"> <li> <label for fname>First Name</label><input type="text" id="fname" name="fname" value=""/> </li> <li> <label for lname>Last Name</label><input type="text" id="lname" name="lname" value=""/> </li> <input type="submit" value="Submit" id="submit" name="submit"/> </form> <script type="text/javascript"> jQuery('#submit').submit(ajaxSubmit); function ajaxSubmit() { var newcontact = jQuery(this).serialize(); jQuery.ajax({ type: "POST", url: "/wp-admin/admin-ajax.php", data: newcontact, success: function(data) { jQuery("#feedback").html(data); } }); return false; } </script> <?php } function addcontact() { $fname = $_POST['fname']; if ($fname != "") { echo "Your Data is" . $fname; } else { echo "Data you Entered is wrong"; } die(); } } function jquery_add_to_contact() { wp_enqueue_script('jquery'); // Enqueue jQuery that already built into WordPress } add_action('wp_enqueue_scripts', 'jquery_add_to_contact'); add_action('wp_ajax_addcontact', array('ajaxtest', 'addcontact')); add_action('wp_ajax_nopriv_addcontact', array('ajaxtest', 'addcontact')); // not really needed add_shortcode('cform', array('ajaxtest', 'ajaxcontact')); 

I used this as a short code, but I did not get a way out. What mistake?

Answer 1

WordPress environment

First of all, in order to achieve this goal, he recommended registering, then inserting a jQuery script into the queue, which will redirect the request to the server. These operations will hook into the wp_enqueue_scripts action hook. In the same hook, you should put wp_localize_script so that it includes arbitrary JavaScript. That way, a JS object will be available in front of it. This object contains the correct URL to be used by the jQuery descriptor.

Please take a look at:

• function wp_register_script ();
• wp_enqueue_scripts hook
• wp_enqueue_script () function;
• wp_localize_script () function;

Add them in the main plugin file.

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

File: jquery.ajax.js

This file calls the AJAX call.

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

Also add these files to the main plugin file.

Finally, in your functions.php file there should be a function called by an AJAX call. Remember the suffixes:

• wp_ajax (enable function only for registered users or control panel operations)
• wp_ajax_nopriv (allow function for users without privileges)

These suffixes plus an action make up the name of your action:

wp_ajax_myaction or wp_ajax_nopriv_myaction

 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 } 

Answer 2

You need to add an “action” to your AJAX call.

 jQuery.ajax({ type: "POST", url: "/wp-admin/admin-ajax.php", data: newcontact, action: 'addcontact', success: function(data) { jQuery("#feedback").html(data); } }); 

The value should be the same as the add_action hook for wp_ajax. eg.

 add_action( wp_action_{action_value}, 'myfunc' ); 

This allows WordPress to know which function to run when calling AJAX.

This Codex page has useful information and this article describes how to improve the code you have.