0

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.

  • And where (and how) do you define my_foobar_client.ajaxurl? – Krzysiek Dróżdż Mar 10 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.com/… , but this didn't work either – LonelyLodge Mar 10 at 0:48
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();
    ...
  • Hm, you're right about the typo but I made this change and still no luck. – LonelyLodge Mar 10 at 1:14
  • Fuck me I had it like that before but in trying so many permutations I didn't change it back. It seems to be working now. Although there is some weird behaviour where it will through the button click and log "Got button click" on every page refresh. But it does correctly log "Ajax callback" when the button is pressed. Thank you for the help! – LonelyLodge Mar 10 at 1:38
  • "Got button click" is being logged by PHP, and the PHP code will run whenever the script tag is rendered, not when the button is clicked. You can't use PHP inside JS events like that. – Jacob Peattie Mar 10 at 2:38
  • Also, this type of event shouldn't be triggered based on a button click. It should be triggered by the form's submit event. – Jacob Peattie Mar 10 at 2:39
  • @KrzysiekDróżdż My comments were specifically addressed at LonelyLodge's comment on regarding the "Go button click" message. The answer is fine. – Jacob Peattie Mar 10 at 5:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.