KB Knowledge Base
How To Process AJAX Request On WordPress - Part 1

Article By khan


img

AJAX Request Intro

AJAX (Asynchronous JavaScript and XML)”. AJAX Request is used to fetch or insert data into your system without refreshing pages. AJAX is excellent for this job.

wordpress AJAX Request tutorial

Say we need to show some specific posts based on some real time input without refreshing our page. In this situation, we have to send an AJAX request to the server first and then it will return to us the array of posts as a .json data object, and then we can show the results on our site.

Basically it's the JavaScript what does the magic. It works by calling the function (Which is written in the native language) through a piece of JavaScript code and after it executes, it then returns to us our desired output data.


What is the relationship between WordPress and AJAX

As we already knew, AJAX technology is very useful for running real time operations, and it’s kind of necessary for developing real time web application. In WordPress, there are many AJAX implementations, like “Quick Edit” and “Update” pages or posts.

Here is the screenshot for the “Quick Edit” link. If you click the link a new window will appear and looks like the next image below. This is the update window. When you click the update button you’ll see a small circle rotating on the left side of “Update” button.


This means that the AJAX request is processing. After it completes the AJAX request the system will automatically collapse the “Quick Edit” window.

The example above shows some default uses of AJAX in WordPress.


How can AJAX be used to process custom request on WordPress

Well, WordPress internal structure gives us a pretty cool way to use custom AJAX with our plugin or theme. As we already knew, AJAX does nothing more then fetch or insert data into the system with JavaScript. The JavaScript code calls the function which is written in native language. For WordPress we know that the native language is PHP, because WordPress is written in PHP.

So, we first write the AJAX script-

jQuery.ajax({
	url: WpAjax.ajaxurl,
	type:'POST',
	data:{
		action : 'rnaby_fetch_data',
	}
});

After writing the script save it to js/ajaxscript.js. Look closely. We used the term WpAjax.ajaxurl, which is pretty confusing. Let me clear this up. Actually it's the URL of a file in the wp-admin directory, name admin-ajax.php. We need to call our AJAX function with the help of this file. That's why we need to bind the AJAX script to this file.

For localizing script we will use the below function-

function rnaby_call_ajax_scripts() {
   // WP call scripts
   wp_enqueue_script( 'rnaby_ajax_js', '/js/ajaxscript.js', array( 'jquery' ), '1.0.0', true );

   // Localization for Ajax.
   wp_localize_script( 'rnaby_ajax_js', 'WpAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
Look closely, we "enqueued" and localized all the script to have the same name rnaby_ajax_js. Having the same name is very important.

Now here we see that the jQuery AJAX is calling a function name rnaby_fetch_data(). So we need a function name rnaby_fetch_data() and we need to bind the function to the AJAX script.

So, now here we write function in PHP-

function rnaby_fetch_data(){
   // Some Code
}

And for binding it to theAJAX script, we need to bind the function to the admin-ajax.php file. to bind this to the file we also need to hook the function to the file.

Here is how we do it-
add_action( 'wp_ajax_rnaby_fetch_data', 'rnaby_fetch_data' );
add_action( 'wp_ajax_nopriv_rnaby_fetch_data', 'rnaby_fetch_data' );

Look closely, here we wrote the function name after wp_ajax_ and wp_ajax_nopriv_. It's very important. Now if we call the AJAX script it will run the function.

Conclusion

This is a simple skeleton for using AJAX in WordPress. I hope you found this tutorial helpful. In part two, we will build a simple plugin using this skeleton and get some experience with processing AJAX request on WordPress.




Tags: , , , , , , ,

Spin up a VPS server in no time flat

Simple setup. Full root access. Straightforward pricing.

DEPLOY VPS SERVER

Leave a Reply



Feedbacks