1

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

4
  • in firefox it's Console.log not console.log, they're both browser specific APIs
    – Tom J Nowell
    Jul 13, 2015 at 23:26
  • Thanks, Tom. Sadly, even using Console.log, it's not firing the success message. Jul 13, 2015 at 23:32
  • I think your data variable nonce should be nonce: dgxDonateAjax.nonce,; not nonce: nonce,.
    – josh
    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
    Dec 16, 2015 at 11:59

2 Answers 2

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

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);
    }
});
3
  • 1
    Can you provide an example?
    – Howdy_McGee
    Jul 14, 2015 at 16:39
  • 1
    I think response also needs to be in the function arguments?? success: function(response) {
    – josh
    Jul 16, 2015 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. Jul 20, 2015 at 23:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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