1

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?

  • The plot thickens! If I add e.preventDefault(); to the JavaScript, then it finds the PHP function. But I don't want to prevent the default form submission.... – Morgan Kay May 24 '15 at 1:04
0

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' ); 
  • Thanks, Mohammad! Unfortunately, that doesn't help. I have tried $('.button').on('click', function (e), $('#button-id').on('click', function (e), and $('#form-id').on('submit', function (e) and everything else I can think of. No matter how I target that submit button or form, it cannot find the PHP function. – Morgan Kay May 24 '15 at 2:17
  • However, your suggestion to do $('#your_form_id').submit(); does help immensely. I still don't know why it can't find the PHP function when clicking a submit button triggers the event, but at least I can prevent the default action and then do the action later. Thanks! – Morgan Kay May 24 '15 at 2:41
  • Glad to know that it helped. – Mohammad Mursaleen May 24 '15 at 7:27

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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