DEV Community 👩‍💻👨‍💻

Shweta Danej
Shweta Danej

Posted on • Updated on

How you can make an ajax call in wordpress admin area ?

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:

  1. Without separate javascript file
  2. 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.

  1. create an ajax request from javascript and pass action variable as data.

  2. 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();
}
?>
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Here, in both cases, you can check the output in console log.

Top comments (2)

Collapse
 
abmsourav profile image
Keramot UL Islam

In real-life projects wp_localize_script is a life saver.

Collapse
 
shwetadanej profile image
Shweta Danej

Yes so damn right 🤘🏻

We are hiring! Do you want to be our Senior Platform Engineer? Are you capable of chipping in across sysadmin, ops, and site reliability work, while supporting the open source stack that runs DEV and other communities?

This role might just be for you!

Apply now