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=.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

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/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

• jquery
• ajax
• javascript

Share Improve this question asked Jul 13, 2015 at 23:19 David GewirtzDavid Gewirtz 1111 gold badge11 silver badge22 bronze badges 4

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

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 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 });

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