Payment method form not loading at checkout when using chrome and firefox but is ok in IE8

When using any other browser bar (IE8 - which remarkably works fine?) During the checkout stage the Payment method form will not load (showing a barber shop rolling gif only). If however the review order button is clicked the form then appears (The downside is that at this point the customer delivery info has been lost and the user has to re enter it, so they can then complete checkout, but it is a little mickey mouse!). Problem has been tested on Firefox 3.6 / Chrome 5.0.375 and IE8

Firebug shows the following form is being called

Running
Drupal 6.17
Ubercart 6.x-2.4
jQuery update is not installed

I have tested this with all the payment gateway types as multiple and stand alone payment gateways. ()

Is this a bug with ubercart or a problem with firefox & Chrome?

Thx

Luke

Store config (if needed)

Checkout settings:
Ubercart checkout is enabled.
Anonymous checkout is disabled.
Shipping fields are always shown.
Checkout panes are collapsed with next buttons.
Collapsible panes will collapse when their next buttons are clicked.
New customers receive an e-mail with their account details.
New customer account status will be active.
Checkout completion page will be the default page.

Checkout panes:
Cart contents is enabled.
Customer information is enabled.
Delivery information is enabled.
Billing information is enabled.
Calculate shipping cost is disabled.
Payment method is enabled.
Order comments is enabled.

Payment settings:
Payment tracking is disabled.
Payments can be deleted by users with permission.
Log payments are being entered to and deleted from the order log.
Default payment details message is:
Continue with checkout to complete payment.

Payment methods:
COD is disabled for checkout.
Check is enabled for checkout.
Credit card is enabled for checkout.
Other is disabled for checkout.

Payment gateways:
Test Gateway is enabled.

CommentFileSizeAuthor
#9 898400-checkout-payment-method-ajax.patch499 byteslongwave
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

coolhandlukek2’s picture

Sorry forgot to past in the HTML for the form.

Firebug shows the following form is being called

input type="radio" class="form-radio" onclick="get_payment_details(Drupal.settings.ucURL.checkoutPaymentDetails + this.value);" value="credit" name="panes[payment][payment_method]" id="edit-panes-payment-payment-method-credit"

mrgoltstein’s picture

Subscribe, same issue here. Both Chrome and Firefox show a foreverlasting progressbar (stuck at 0%). Using Ubercart 6.x-2.4.

Function get_payment_details is defined in ubercart/payment/uc_payment/uc_payment.js .

So far I've figured out that it's because of a 302 redirect which leads to a 406 error. UC Payment asks for the data @ /cart/checkout/payment_details/[payment method]. Don't know yet why it causes firefox and chrome to fail, and not IE.

mrgoltstein’s picture

For me the problem was the following: the $.post in line 283 (uc_payment.js) posted an empty request, which lead to a 406 error.

The following solved the problem for me:

http://www.ubercart.org/project_issue/uc_paymentjs_should_issue_get_empt...

epoitras’s picture

I had a very similar issue, except that it wasn't working in IE either.
An AJAX call was being executed when a user was clicking on the fieldset itself (without clicking an actual payment method) and so I was getting 'undefined' values out the wazoo.

In: uc_payment_checkout_pane.inc,v 1.5.2.8 2009/09/21 14:34:46 islandusurper Exp $
I changed (line 74): '#attributes' => array('onclick' => "get_payment_details(Drupal.settings.ucURL.checkoutPaymentDetails + this.value)"),
To: '#attributes' => array('onclick' => "get_payment_details(Drupal.settings.ucURL.checkoutPaymentDetails + $(\"#uc-cart-checkout-form input[type='radio']:checked\").val())"),
And it now works fine.

longwave’s picture

Status: Active » Postponed (maintainer needs more info)

Unable to reproduce this. What happens if you change the theme to Garland? Is there any other JavaScript running on that page that could interfere? Can you trace the HTTP requests with the Net tab in Firebug and provide URLs and responses?

coolhandlukek2’s picture

Hi Longwave - I can confirm that this is happening when Garland is turned on. IE 8 & 9 works ok, Firefox & Chrome fail

I followed your instructions for the Firebug URL's and responses and I am getting a 404 on POST credit (see below log)

As you havent been able to recreate the issue perhaps you would like to see it on my dev system?

http://www.dev4.moviebeans.com/cart
user & password longwave

Thanks for taking an interest - i look foward to your response / fix

GET checkout
Aborted
dev4.moviebeans.com
95.5 KB
109.73.163.4:80
193ms

GET checkout
200 OK
dev4.moviebeans.com
95.5 KB
109.73.163.4:8
1.54s

GET admin_menu.css?s
304 Not Modified
dev4.moviebeans.com
4 KB
109.73.163.4:8
68ms

GET css_6f8b550fe563f4d9d3195659b0038d5f.css
200 OK
dev4.moviebeans.com
58.3 KB
109.73.163.4:80
250ms

GET css_59b174ea941ffd65b8b5ee7d06f47058.css
304 Not Modified
dev4.moviebeans.com
869 B
109.73.163.4:80
87ms

GET js_16fca1fdd957bdc2d103f3f761847707.js
304 Not Modified
dev4.moviebeans.com
159.5 KB
109.73.163.4:80
74ms

GET logo.png
304 Not Modified
dev4.moviebeans.com
5.3 KB
109.73.163.4:80
235ms

GET address_book.gif
304 Not Modified
dev4.moviebeans.com
624 B
109.73.163.4:80
235ms

GET visa.gif
304 Not Modified
dev4.moviebeans.com
335 B
109.73.163.4:80
41ms

GET mastercard.gif
304 Not Modified
dev4.moviebeans.com
808 B
109.73.163.4:80
47ms

GET discover.gif
304 Not Modified
dev4.moviebeans.com
495 B
109.73.163.4:80
54ms

GET amex.gif
304 Not Modified
dev4.moviebeans.com
645 B
109.73.163.4:80
82ms

GET powered-blue-80x15.png
304 Not Modified
dev4.moviebeans.com
1011 B
109.73.163.4:80
315ms

GET favicon.ico
304 Not Modified
dev4.moviebeans.com
5.3 KB
109.73.163.4:80
317ms

GET icon_users.png
304 Not Modified
dev4.moviebeans.com
539 B
109.73.163.4:80
150ms

GET bg-navigation.png
304 Not Modified
dev4.moviebeans.com
104 B
109.73.163.4:80
140ms

GET body.png
304 Not Modified
dev4.moviebeans.com
712 B
109.73.163.4:80
168ms

GET menu-collapsed.gif
304 Not Modified
dev4.moviebeans.com
176 B
109.73.163.4:80
174ms

GET bg-content.png
304 Not Modified
dev4.moviebeans.com
485 B
109.73.163.4:80
180ms

GET bg-content-right.png
304 Not Modified
dev4.moviebeans.com
3.1 KB
109.73.163.4:80
187ms

GET bg-content-left.png
304 Not Modified
dev4.moviebeans.com
3.2 KB
109.73.163.4:80
196ms

GET gradient-inner.png
304 Not Modified
dev4.moviebeans.com
189 B
109.73.163.4:80
202ms

GET bkg.png
304 Not Modified
dev4.moviebeans.com
236 B
109.73.163.4:80
209ms

GET menu-expanded.gif
304 Not Modified
dev4.moviebeans.com
183 B
109.73.163.4:80
208ms

POST credit
404 Not Found
dev4.moviebeans.com
68.8 KB
109.73.163.4:80
1.46s

POST line_items
200 OK
dev4.moviebeans.com
294 B
109.73.163.4:80
1.07s

POST www.dev4.moviebeans.com
200 OK
dev4.moviebeans.com
4.4 KB
109.73.163.4:80
768ms

POST www.dev4.moviebeans.com
200 OK
dev4.moviebeans.com
4.4 KB
109.73.163.4:80
775ms

GET throbber.gif
304 Not Modified
dev4.moviebeans.com
1.3 KB
109.73.163.4:80
53ms

GET progress.gif
304 Not Modified
dev4.moviebeans.com
790 B
109.73.163.4:80
54ms

30 requests
516.9 KB

(189.7 KB from cache)
4.46s (onload: 2.46s)

longwave’s picture

I see the 404 error, but I don't understand why it occurs. If I go to checkout, I see the endless progress bar and the 404 error in Firebug. But then if I open http://www.dev4.moviebeans.com/cart/checkout/payment_details/credit directly in Firefox, the credit card form is returned; there is no 404 error.

It's even more strange that /cart/checkout/line_items is requested in exactly the same way and works as expected.

longwave’s picture

Version: 6.x-2.4 » 6.x-2.x-dev
Status: Postponed (maintainer needs more info) » Needs review
FileSize
499 bytes

In the Firebug debugger, I found that this fails:
$.post('http://www.dev4.moviebeans.com/cart/checkout/payment_details/credit', {});
but this works:
$.post('http://www.dev4.moviebeans.com/cart/checkout/payment_details/credit', {dummy: true});

Seems that something is automatically returning 404 for empty HTTP POST requests. The attached patch may fix this, please test it out.

coolhandlukek2’s picture

Hi

We have applied the patch on http://www.dev4.moviebeans.com/cart (same user pwd as before)

/home/movbean/www/dev4/sites/all/modules/ubercart/payment/uc_payment# patch uc_payment.js uc_payment.patch
patching file uc_payment.js
Hunk #1 succeeded at 232 (offset 1 line).

Still a hanging barber graphic.... However (if memory serves me) Whats new..... There is now a next button which skips to the next step (issuing a warning that the CC fields are required) - At this point the cc collapsible field opens and you can enter these details.

Thx

longwave’s picture

You need to clear caches on your site after applying the patch (click the button at /admin/settings/performance) - it looks like the updated uc_payment.js has not yet been picked up.

coolhandlukek2’s picture

Status: Fixed » Needs review

Sorry, I missed this (Only restarted Apache). Yup the #9 patch works... Awesome Longwave, thanks for the commit.

coolhandlukek2’s picture

Status: Needs review » Fixed

Marking as fixed. 1000 kudos points to Longwave for the #9 contribution

longwave’s picture

Status: Needs review » Fixed

Thanks for testing and reporting back. Committed #9.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.