Ajax (Asynchronous JavaScript And XML) contain a special functionality that allows you to update the content of a web page dynamically without reloading it.
If you are a beginner in using Ajax and want to learn it in more detail just follow the link.
You might also like our article –
With the help of this tutorial you will create a WordPress plugin using Ajax that allow you to insert data into your database.
Follow 5 Simple Steps For Data Insertion Using Ajax
Step 1. Adding Standard Plugin Information.
Step 2. Include javascript libraries in plugin.
Step 3. Creating html form to show in front end.
Step 4. Adding Event handler using jQuery.
Step 5. Adding Ajax functionality in WordPress.
Step 1. Adding Standard Plugin Information
Remember WordPress will recognize your plugin by this information.
/* Plugin Name: Demo Plugin Plugin URI: http://www.inkthemes.com Description: My first ajax plugin Version: 1.0 Author: InkThemes Author URI: http://www.inkthemes.com License: Plugin comes under GPL Licence. */
Step 2. Include Javascript Libraries In Plugin
We are adding our own demo.js file in js folder using wp_enqueue_script.
wp_localize_script script help us to take data from php and make available to Javascript. Adding admin-ajax.php using the name MyAjax.ajaxurl in Step 4.
//Include Javascript library
wp_enqueue_script('inkthemes', plugins_url( '/js/demo.js' , __FILE__ ) , array( 'jquery' ));
// including ajax script in the plugin Myajax.ajaxurl
wp_localize_script( 'inkthemes', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php')));
Step 3. Creating Html form To Show In Front end
Wraping HTML form in show_form() function so that we can invoke the function at some specifc time.
add_action() will help you to call the show_form() function in the content area using the_content hook.
This step will help you to show your html form in the content area.
function show_form(){
echo "<form>";
echo "<label>Name</label>";
echo "<input type='text' id='dname' name='dname' value=''/><br/>";
echo "<input type='button' id='submit' name='submit' value='Submit'/>";
echo "</form>";
}
add_action('the_content', 'show_form');
Step 4. Adding Event handler using jQuery
In the Step 3
<input type=’text’ id=’dname’ value=’ ‘/>
<input type=’button’ id=’submit’ name=’submit’ value=’Submit ‘/>
When someone click on the Submit button the value stored in name=”dname” will get entered into the WordPress database.
So we have added jQuery event handler.
After executing this code it will call function defined in step 5.
<div”>jQuery(document).ready(function(){
jQuery(“#submit”).click(function(){
var name = jQuery(“#dname”).val();
jQuery.ajax({
type: ‘POST’, // Adding Post method
url: MyAjax.ajaxurl, // Including ajax file
data: {“action”: “post_word_count”, “dname”:name}, // Sending data dname to post_word_count function.
success: function(data){ // Show returned data using the function.
alert(data);
}
});
});
});
We have created a table name wp_ajax_demo which contains two fields id and name.
.
Step 5. Adding Ajax Functionality in WordPress
Step 4 have called function post_word_count().
In Step5 it will catch the value using $_POST and stored it into $name variable and then we just need to fire the insert query to insert data into database.
die() function is used to stop displaying the return value ‘0’ from the output.
These functions set up the Ajax call
- wp_ajax_function_name –> it allow function calling from admin dashborad only
- wp_ajax_nopriv_function_name –> it allow function calling from admin as well as all pages
<div”>function post_word_count(){
$name = $_POST[‘dname’];
global $wpdb;
$wpdb->insert(
‘wp_ajax_demo’,
array(
‘name’ => $name
),
array(
‘%s’
)
);
die();
return true;
}
//
add_action(‘wp_ajax_post_word_count’, ‘post_word_count’); // Call when user logged in
add_action(‘wp_ajax_nopriv_post_word_count’, ‘post_word_count’); // Call when user in not logged in
Download Complete project file
I hope the above steps are clearer to you.
If you have any difficulty while executing the code or find some other problem. You can mention your problem below in the comment box.
Let me know your feeback. I will resolve your issues if any.
