I'm working on a plugin that seems to be fine in Chrome, but is not firing the PHP script via Ajax in Firefox. It is driving me to distraction. Here are the code blocks that relate to it.

First, the JavaScript enqueue:

wp_enqueue_script ( 'jquery' );

$script_url = plugins_url ( '/js/seamless-donations.js', __FILE__ );

wp_register_script ( 'seamless_javascript_code', $script_url, array( 'jquery' ), false );
wp_enqueue_script ( 'seamless_javascript_code' );

// declare the URL to the file that handles the AJAX request (wp-admin/admin-ajax.php)
wp_localize_script (
    'seamless_javascript_code', 'dgxDonateAjax',
    array(
        'ajaxurl'            => admin_url ( 'admin-ajax.php' ),
        'nonce'              => wp_create_nonce ( 'dgx-donate-nonce' ),
        'postalCodeRequired' => dgx_donate_get_countries_requiring_postal_code ()
    )
);

Now, the related JavaScript that makes the Ajax call:

console.log("-- SeamlessDonationsCheckout: before jQuery.post");
console.log("-- SeamlessDonationsCheckout: ajaxurl=" + dgxDonateAjax.ajaxurl);

jQuery.ajax({
    url: dgxDonateAjax.ajaxurl,
    data: data,
    success: function() {
        console.log("-- SeamlessDonationsCheckout: jQuery.ajax success");
        //response(data);
    }
});

//jQuery.post(dgxDonateAjax.ajaxurl, data, SeamlessDonationsAjaxCallback);
console.log("-- SeamlessDonationsCheckout: after jQuery.post");

The data array consists of:

var data = {
    action: 'dgx_donate_paypalstd_ajax_checkout',
    referringUrl: referringUrl,
    nonce: nonce,
    sessionID: sessionID,
    donationAmount: donationAmount,
    (and so on, it's a large array)
};

The hooks:

add_action ( 'wp_ajax_dgx_donate_paypalstd_ajax_checkout', 'dgx_donate_paypalstd_ajax_checkout' );
add_action ( 'wp_ajax_nopriv_dgx_donate_paypalstd_ajax_checkout', 'dgx_donate_paypalstd_ajax_checkout' );

And, finally, the beginning of the PHP Ajax function:

function dgx_donate_paypalstd_ajax_checkout () {

// Log
dgx_donate_debug_log ( '----------------------------------------' );
dgx_donate_debug_log ( 'DONATION TRANSACTION STARTED' );
$php_version = phpversion ();
dgx_donate_debug_log ( "PHP Version: $php_version" );
dgx_donate_debug_log ( "Seamless Donations Version: " . dgx_donate_get_version () );

In Chrome, the log file clearly shows the function has been called, but there's nothing in Firefox. Also, in Chrome, the browser log shows the log entries before and after the jQuery.ajax calls, as well as the "success" entry, but Firefox does not.

I can confirm that the variable for the Ajax URL is passed, because this message

"-- SeamlessDonationsCheckout: ajaxurl=http://podtrack.com/wp-admin/admin-ajax.php"

shows in the Firefox browser console. So it's not like the ajax URL isn't being passed along.

I would sure appreciate any guidance. This one has had me very stumped.

Thanks!

--David

  • in firefox it's Console.log not console.log, they're both browser specific APIs – Tom J Nowell Jul 13 '15 at 23:26
  • Thanks, Tom. Sadly, even using Console.log, it's not firing the success message. – David Gewirtz Jul 13 '15 at 23:32
  • I think your data variable nonce should be nonce: dgxDonateAjax.nonce,; not nonce: nonce,. – josh Jul 14 '15 at 3:31
  • 1
    Ok. First of all can you see, is there an ajax call is made in firefox console? – WPTC-Troop Dec 16 '15 at 11:59

This is the barebones for an AJAX call and response. Take a look and make sure this is working on Chrome and Firefox for you -- works for me.

<?php

// Some function for data we'll pass

function dgx_donate_get_countries_requiring_postal_code()
{
    return "cc postal code stuff...";
}

// Register everything

add_action('init', function () {

    // Add required scripts

    wp_enqueue_script('jquery');
    $script_url = plugins_url('/js/seamless-donations.js', __FILE__);

    wp_register_script('seamless_javascript_code', $script_url, array('jquery'), false);
    wp_enqueue_script('seamless_javascript_code');

    // Localize our data 

    wp_localize_script(
        'seamless_javascript_code', 'dgxDonateAjax',
        array(
            'ajaxurl' => admin_url('admin-ajax.php'),
            'nonce' => wp_create_nonce('dgx-donate-nonce'),
            'postalCodeRequired' => dgx_donate_get_countries_requiring_postal_code()
        )
    );

    // Register AJAX handlers

    add_action('wp_ajax_dgx_donate_paypalstd_ajax_checkout', 'dgx_donate_paypalstd_ajax_checkout');
    add_action('wp_ajax_nopriv_dgx_donate_paypalstd_ajax_checkout', 'dgx_donate_paypalstd_ajax_checkout');

    // AJAX handler (PRIV / NO PRIV)

    function dgx_donate_paypalstd_ajax_checkout()
    {
        // If we fail don't be silent 

        $fail_message = '';

        if (empty($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'dgx-donate-nonce')) $fail_message = 'Bad Nonce';
        if (empty ($_POST['action'])) $fail_message = 'Missing Action';
        if ($_POST['action'] !== 'dgx_donate_paypalstd_ajax_checkout') $fail_message = 'Bad Action';

        // We failed, let em know...

        if (!empty ($fail_message)) {
            wp_send_json_error(array(
                'message' => $fail_message
            )); // die
        }

        // Do logic stuff

        // Send the Success Response

        wp_send_json_success(array(
            'action' => $_POST['action'],
            'message' => 'Checkout Complete',
            'postalCodeRequired' => $_POST['postalCodeRequired'],
            'ID' => 1
        )); // die
    }
});

// Shortcut to trigger AJAX call on page load

add_action('wp_footer', function () { ?>

    <script>

        (function ($) {

            var data = {
                action: 'dgx_donate_paypalstd_ajax_checkout',
                nonce: dgxDonateAjax.nonce,
                postalCodeRequired: dgxDonateAjax.postalCodeRequired,
            };

            $.ajax({
                type: 'POST',
                url: dgxDonateAjax.ajaxurl,
                data: data,
                success: function (response) {

                    // look at the response 

                    if (response.success) {

                        // succcess data
                        console.log(response.data);

                    } else {

                        // no good
                        console.log(response);
                    }
                }
            });

        })(jQuery);
    </script>
<?php });

You need type: 'POST' in your jQuery.ajax call. The default is GET, and this requires POST.

Because someone below requested an example:

jQuery.ajax({
    url: dgxDonateAjax.ajaxurl,
    data: data,
    type: 'POST',
    success: function() {
        console.log("-- SeamlessDonationsCheckout: jQuery.ajax success");
        //response(data);
    }
});
  • 1
    Can you provide an example? – Howdy_McGee Jul 14 '15 at 16:39
  • I think response also needs to be in the function arguments?? success: function(response) { – josh Jul 16 '15 at 5:13
  • Ideally yes, but for the purposes of debugging here it doesn't have to be here. His code is just using console.log to confirm the ajax success and it would be useless to pass response in just so he could ignore it. – voldemortensen Jul 20 '15 at 23:07

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.