AJAX on Front-End Button Click not working - Custom Plugin

I'm trying to make a custom plugin, and something that should be simple is giving me a huge headache. I followed the Wordpress Codex example exactly and have looked at countless similar posts but nothing has worked for me.

Here is the structure of my code:

In my_plugin.php file, which contains my main plugin class and all my php functions I have (inside my main class):

public function __construct() {
    add_action( 'wp_ajax_foobar', array( $this, 
    'my_ajax_foobar_handler') );
    add_action( 'wp_ajax_nopriv_foobar', array( $this, 
    'my_ajax_foobar_handler' ) );

    add_action( 'wp_enqueue_scripts', array( $this, 'my_enqueue') ); 
}

public function my_enqueue() {
    wp_enqueue_script( 'ajax-script', plugins_url( '/js/my_query.js', 
    __FILE__ ), array('jquery') );
    wp_localize_script( 'ajax-script', 'my_foobar_client', array( 
    'ajax_url' => admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
}

public function my_ajax_foobar_handler() {
        error_log("Ajax callback");

        // Don't forget to stop execution afterward.
        wp_die();
}

In another page, my_page.php I have:

<input type="submit" class="button" name="insert" value="Submit" />

<script>

// Create a function to pick up the link click

$('button').click(function(){
    <?php error_log("Got button click"); ?>

    jQuery.post(
        my_foobar_client.ajaxurl, 
        {
           'action': 'foobar',
           'foobar_id':   123
        }
);

</script>

When I click the button, my log file picks up the "Got button click" fine, so the button click is being detected on the front end. However, my debug log does not pickup the "Ajax callback". I don't understand why this is not working.

Any help would be appreciated. Thanks.

I'm trying to make a custom plugin, and something that should be simple is giving me a huge headache. I followed the Wordpress Codex example exactly and have looked at countless similar posts but nothing has worked for me.

Here is the structure of my code:

In my_plugin.php file, which contains my main plugin class and all my php functions I have (inside my main class):

public function __construct() {
    add_action( 'wp_ajax_foobar', array( $this, 
    'my_ajax_foobar_handler') );
    add_action( 'wp_ajax_nopriv_foobar', array( $this, 
    'my_ajax_foobar_handler' ) );

    add_action( 'wp_enqueue_scripts', array( $this, 'my_enqueue') ); 
}

public function my_enqueue() {
    wp_enqueue_script( 'ajax-script', plugins_url( '/js/my_query.js', 
    __FILE__ ), array('jquery') );
    wp_localize_script( 'ajax-script', 'my_foobar_client', array( 
    'ajax_url' => admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
}

public function my_ajax_foobar_handler() {
        error_log("Ajax callback");

        // Don't forget to stop execution afterward.
        wp_die();
}

In another page, my_page.php I have:

<input type="submit" class="button" name="insert" value="Submit" />

<script>

// Create a function to pick up the link click

$('button').click(function(){
    <?php error_log("Got button click"); ?>

    jQuery.post(
        my_foobar_client.ajaxurl, 
        {
           'action': 'foobar',
           'foobar_id':   123
        }
);

</script>

When I click the button, my log file picks up the "Got button click" fine, so the button click is being detected on the front end. However, my debug log does not pickup the "Ajax callback". I don't understand why this is not working.

Any help would be appreciated. Thanks.

• plugins
• ajax
• front-end
• buttons

Share Improve this question edited Mar 10, 2019 at 0:47 LonelyLodge asked Mar 9, 2019 at 23:19 LonelyLodgeLonelyLodge 2311 silver badge77 bronze badges 2

• And where (and how) do you define my_foobar_client.ajaxurl? – Krzysiek Dróżdż Commented Mar 10, 2019 at 0:14
• @KrzysiekDróżdż Sorry, edited the post to add this. I just used the format on the codex for AJAX in plugins using wp_enqueue_script() and wp_localize_script() and added this to my class. I also tried using wp.ajax.post as someone did here: shellcreeper/… , but this didn't work either – LonelyLodge Commented Mar 10, 2019 at 0:48

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

Ok, so it’s pretty easy error - just a typo ;)

You use this line to localize your script:

wp_localize_script( 'ajax-script', 'my_foobar_client', array( 
'ajax_url' => admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );

So you use ajax_url field to store url to admin-ajax.php

But you use this line in your js file:

my_foobar_client.ajaxurl,

and there is no ajaxurl field in that object. It should be ajax_url

And here’s another typo:

$('button').click(function(){

As far as I can see, there is no button in your form. There is input of type submit with class button, so it should be:

$('.button').click(function(){

Also you’re not preventing default behavior after the click, so your form will still cause reload... This will solve that:

$('.button').click(function(e){
    e.preventDefault();
    ...