Ajax not firing properly using Firefox, but works in Chrome

Question

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

Answer 1

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 });

Answer 2

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);
    }
});