How do I make an ajax call?

[iamthom]

Hi, I found your plugin is quite helpful and fast in creating plugin.

I got an issue, how do I make an ajax call? I've created plugin-name/includes/class-admin-ajax.php and placed my wp_ajax_ hook there, but seems like the hook is not recognized yet.

class-admin-ajax.php

<?php 
add_action('wp_ajax_test', 'test');
function test(){ die('yay'); }

javascript section

<script>
    jQuery(document).ready(function ($) {
        $('#submit').click(function () {
            var url = ajaxurl + "?action=test";
            $.get( url, function () {

            });
        })
    })
</script>

Can you point out where are my mistakes?

[joshcummingsdesign]

Thanks @iamthom - let's try this:

In the file class-admin.php

Inside the Admin class add this public function:

public function test() {
    check_ajax_referer($this->plugin_slug, 'security');
    die('Yay!');
}

And change the assets pubic function:

public function assets() {
    wp_enqueue_style($this->plugin_slug, plugin_dir_url(__FILE__).'css/plugin-admin.css', [], $this->version);
    wp_register_script($this->plugin_slug, plugin_dir_url(__FILE__).'js/plugin-admin.js', ['jquery'], $this->version, true);

    wp_localize_script($this->plugin_slug, 'settings', [
        'nonce' => wp_create_nonce($this->plugin_slug) // Add a nonce for security
    ]);

    wp_enqueue_script($this->plugin_slug);
}

In the file class-plugin.php

Inside the Plugin class:

private function define_admin_hooks() {
    $plugin_admin = new Admin($this->plugin_slug, $this->version, $this->option_name);
    $this->loader->add_action('admin_enqueue_scripts', $plugin_admin, 'assets');
    $this->loader->add_action('admin_init', $plugin_admin, 'register_settings');
    $this->loader->add_action('admin_menu', $plugin_admin, 'add_menus');
    $this->loader->add_action('wp_ajax_test', $plugin_admin, 'test'); // Add this line
}

In the file plugin-admin.js

(function($) {
    'use strict';

    $('#submit').click(function() {
      $.post(ajaxurl, {
          security: settings.nonce,
          action: 'test'
        })
        .done(function(res) {
          console.log(res); // Yay!
        })
        .fail(function() {
          console.log('AJAX failed!');
        })
        .always(function() {
          console.log('AJAX called.');
        });
    });

})(jQuery);

Hope this helps!

[iamthom]

Hi @joshcummingsdesign, thanks for the guide. Very deep sorry, I had no time yesterday to try it and play around with WP and your plugin. I'll try it soon.

===
UPDATE.
Hey, you rock! 👍 Thank you so much. It works like a charm.

[joshcummingsdesign]

@iamthom Any time! Thanks for the question.