Wordpress made it so easy to use ajax in admin and front-end areas since the ajax is built into WordPress core.
Let's see the short example of this:
- Without separate javascript file
- With separate javascript file
You can create a file in your plugin OR you can use your theme's functions.php file for this.
1. Without separate javascript file
There is an action hook called admin_footer, using that we can embed the javascript code into the admin footer area.
create an ajax request from javascript and pass action variable as data.
Wordpress uses wp_ajax_ action hook to detect all ajax requests coming from admin or front-end area. You need to specify this as prefix with your action name like this wp_ajax_your_action_name. See the below example for this.
ajaxurl javascript global variable is defined for the admin area which gets the admin-ajax.php url.
<?php
add_action( 'admin_footer', 'ajax_without_file' );
function ajax_without_file() { ?>
<script type="text/javascript" >
jQuery(document).ready(function($) {
var dataVariable = {
'action': 'my_action_without_file', // your action name
'variable_name': "Some value" // some additional data to send
};
jQuery.ajax({
url: ajaxurl, // this will point to admin-ajax.php
type: 'POST',
data: dataVariable,
success: function (response) {
console.log(response);
}
});
});
</script>
<?php
}
add_action("wp_ajax_my_action_without_file" , "my_action_without_file");
function my_action_without_file(){
echo json_encode($_POST);
wp_die();
}
?>
2. With separate javascript file
Create a sample-scripts.js file and include this code
jQuery(function ($) {
var testingObj = {
init: function () {
testingObj.callAjaxMethod();
},
callAjaxMethod:function(){
var data = {
'action': 'my_action_with_file', // your action name
'name': "Shweta"
};
$.ajax({
url: ajaxurl,
type: 'POST',
data: data,
success: function (response) {
console.log(response);
}
});
}
}
testingObj.init();
});
Create a php file and use admin_enqueue_scripts action hook to include js file in admin footer.
<?php
add_action( 'admin_enqueue_scripts', 'enqueue_my_script' );
function enqueue_my_script() {
wp_enqueue_script( 'my-script', plugin_dir_url(__FILE__).'sample-scripts.js', array('jquery'), null, true );
}
add_action("wp_ajax_my_action_with_file", "my_action_with_file");
function my_action_with_file(){
echo json_encode($_POST);
wp_die();
}
?>
Here, in both cases, you can check the output in console log.
Top comments (2)
In real-life projects
wp_localize_script
is a life saver.Yes so damn right 🤘🏻