Using AJAX in a WordPress plugin

Question

I'm trying to create a WordPress sample plugin based in AJAX. I read a tutorial and did a plugin, but it's not working. I am new to AJAX. Here is the code I tried: ```

Accepted Answer

WordPress environment

First of all, in order to achieve this task, it's recommended to register then enqueue a jQuery script that will push the request to the server. These operations will be hooked in `wp_enqueue_scripts` action hook. In the same hook you should put `wp_localize_script` that it's used to include arbitrary JavaScript. By this way there will be a JS object available in front end. This object carries on the correct url to be used by the jQuery handle.

Please take a look to:

- wp_register_script(); function

- wp_enqueue_scripts hook

- wp_enqueue_script(); function

- wp_localize_script(); function

In main plugin file, add these.

```
add_action( 'wp_enqueue_scripts', 'so_enqueue_scripts' );
function so_enqueue_scripts(){
  wp_register_script( 
    'ajaxHandle', 
    plugins_url('PATH TO YOUR SCRIPT FILE/jquery.ajax.js', __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 makes 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 below codes to plugin main file.

Finally, on your functions.php file, there should be the function triggered by your AJAX call. Remember the suffixes:

- `wp_ajax` ( allow the function only for registered users or admin panel operations )

- `wp_ajax_nopriv` ( allow the function for no privilege users )

These suffixes plus the action compose 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
}
```

Using AJAX in a WordPress plugin

Solution

Problem

Related problems