How can I run AJAX on a button click event?

Update: I managed to get the AJAX working, but not in the click event. I updated the question to match this.

I’m trying some code I found on the page: ‘AJAX in Plugins’.

However I can’t get it to work, and I Don’t really know where to start looking.
It works when I remove the click function and just run the code on pageload.

I have a Javascript file that looks ike this:

jQuery(document).ready(function(){
    jQuery("#createremotesafe").click(function(){
        alert ('test');
        var data = {
            action: 'my_action',
            whatever: 1234
        };

        // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php

        jQuery.post(ajaxurl, data, function(response) {
            alert('Got this from the server: ' + response);
        });
    });    
});

and somewhere in my PHP script that generates the button that should execute the Javascript (i.e. the admin page), and also the rest of the page:

add_action('wp_ajax_my_action', 'my_action_callback');
echo 'test2';
function my_action_callback() {
  global $wpdb; // this is how you get access to the database
  $whatever = $_POST['whatever'];
  $whatever += 10;
  echo $whatever;
  die(); // this is required to return a proper result
}

I get both the Alert ('test') and the echo 'test2', but not the response alert. There are no Javascript errors or anything. My code is definitely running, since I can see both ‘test’s, but why isn’t AJAX getting any response?
Does my php function disappear after page load? Maybe I can’t/shouldn’t use the built in wp AJAX functions?

It also doesn’t show an empty alert box, just nothing happens.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Start from a working code base..

add_action('in_admin_header', 'my_ajax_button');

function my_ajax_button() {
    echo '<a href="#ajaxthing" rel="nofollow noreferrer noopener" class="myajax">Test</a>';
}

add_action('admin_head', 'my_action_javascript');

function my_action_javascript() {
?>
<script type="text/javascript" >
jQuery(document).ready(function($) {

    $('.myajax').click(function(){
        var data = {
            action: 'my_action',
            whatever: 1234
        };

        // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
        $.post(ajaxurl, data, function(response) {
            alert('Got this from the server: ' + response);
        });
    });


});
</script>
<?php
}

add_action('wp_ajax_my_action', 'my_action_callback');

function my_action_callback() {
     global $wpdb; // this is how you get access to the database

     $whatever = $_POST['whatever'];

     $whatever += 10;

             echo $whatever;

     exit(); // this is required to return a proper result & exit is faster than die();
}

That’s the code(with a minor adjustment) from the codex page, and that’s perfectly fine for me, so i’d suggest using that as a starting point.. if that’s what you initially did, at what point did it break or stop working?

NOTE: Mark is me, i use a secondary account when accessing the site from another PC(that isn’t mine).

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0