Can't trigger an AJAX function with a submit button in the dashboard

Question

I'm writing a WordPress plugin. My plugin has forms that post data to other pages generated by my plugin within the WordPress dashboard. I am trying to create an AJAX function that is triggered when the form is submitted. My AJAX is working just fine - just to test it, I triggered the event when I click on my plugin header, and it works perfectly fine there. However, if I try to trigger the event when I click a submit button (any input type="submit"), it doesn't work. The JavaScript runs just fine, but it can't find the PHP function to run.

Here is my JavaScript:

$('.button').on('click', function (e) {
    var url = testingajax.ajaxurl;

    var data = {
        'action': 'testing_ajax_wtf',
    }

    $.post(url, data, function (response) {
        console.log(response);
    });
});

The PHP function just returns a string (for testing purposes).

This works just fine if I change the first line to:

$('.my-plugin-header').on('click', function (e) {

But if I try to trigger it when a submit button is clicked, or when a form is submitted, the JavaScript runs, but it cannot find the PHP function.

Any idea what is going on here? Does WordPress somehow stop you from running AJAX when you submit forms in the dashboard?

Answer 1

Just remove type="submit" from your button and let your jQuery ajax call be triggered first. Once you get the response then you can submit your form as well. Something like this;

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

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

            var data = {
                'action': 'your_action'
            };

            // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
            $.post(ajaxurl, data, function(response) {

                // getting response from your ajax callback function
                alert('Got this from the server: ' + response);

                // submitting form after getting response
                $('#your_form_id').submit();
            });

        });

    });
</script> 
<?php
}
// Hook this function to admin footer
add_action( 'admin_footer', 'your_action_javascript' );