Magento Checkout Error: undefined Javascript Alert

Posted on April 23, 2010 by BT There have been 14 comment(s)

This error occurs when the user gets to the final step in the Magento Onepage checkout: the order review. When they click the submit button the page loads for a few seconds and then a Javascript alert box is displayed with the message 'undefined'. Not only does this destroy the trust a customer has in your website, it actually stops them from completing the purchase. This means you are losing money and customers! Unfortunately there is no quick generic fix for this but hopefully, by explaining the cause and a way to identify the error, you will be able to overcome this on your own.

Magento Onepage Checkout & Ajax

The Magento Onepage checkout is split into sections: login; billing address; shipping address; shipping method; payment details and order review. As the user progresses through each section, an Ajax request is sent to Magento with the information relating to the current section. For example, when a user hits the continue button on the billing section, an Ajax request is sent to Magento with the user's billing address.This triggers a Magento controller that saves the data into the user's sales quote. This is useful because if the user decides to go back through your site and add something else to their cart (which is always good), they won't have to re-add their billing address. If you use a network traffic monitor - I use the Firefox plugin Httpfox - you can see these requests being sent and the data returned. Give it a try for yourself as it should help illustrate how the Magento Onepage checkout works.

The Problem

When an Ajax request is sent and a Magento controller triggered, the output is returned in the Ajax response. If all goes well, a correctly constructed JSON string is sent back informing the Onepage checkout whether or not the data was saved successfully. This works fine as long as there are no errors. If an error occurs, the error message that is produced by Magento is tagged into the response sent. When the Magento Onepage checkout receives this response, rather seeing a correctly constructed JSON string that it can parse, it see's the error. Not knowing what to do with this error, Magento spits out the undefined Javascript alert box.

Identifying the Cause of the Javascript 'undefined' Alert Box

There is a file which resides in your js folder inside your skin called opcheckout.js and contains the majority of Javascript used to run the Magento Onepage checkout - skin/design/frontend/package/theme/js/opcheckout.js. Open this file and search for alert(msg). For me this is on line 779, however this could be slightly different for you. Now a lot of people simply assume that they can comment that out line and the problem will go away, but alas, we are not so lucky. Modify that line to the following:

alert(transport.responseText);
alert(msg);

Notice the first alert, the one you just added. This alerts out transport.responseText, the content sent back from the Ajax response. Not only will this include JSON produced that Magento expects, the error message will have also been inserted, meaning that the response cannot be parsed as JSON data.

My error was related to a reward points module that I had installed for a client. I temporarily disabled the module and was able to checkout with no problems what so ever.

Conclusion

The undefined error is usually caused by a simple Magento template or model error. The fact that the error is triggered during an Ajax request makes it difficult to track down and debug. Fortunately, following the above steps should allow you to see the error message in a few minutes. Magento could easily overcome this problem by logging all malformed Ajax responses in the checkout and forwarding them on to a specified email address.

A Few Tips

  • Once you have located the error, make sure you remove the extra Javascript alert you added to opcheckout.js!
  • If you manage to find your error but have trouble fixing it, by all means post it in the comments or email me and I will do my best to help you solve the problem!

This post was posted in Magento Tutorials and was tagged with Magento Tips

14 Responses to Magento Checkout Error: undefined Javascript Alert

  • Neeraj
    Neeraj says:

    Hi ,

    I'm getting Nan erroe at the the time of placing my order, can you please repaly me ASAP,

    Thanks
    Neeraj

    Posted on July 9, 2010 at 10:34 am

  • princy
    princy says:

    That error may be because of lack of shipping or payment method on one page checkout

    Posted on August 25, 2010 at 5:29 am

  • Gayatri
    Gayatri says:

    Thank you so much for sharing this piece of information!

    I didn't have the same issue as the blog but, your tip on putting the alert message really saved me a lot of time - in fact it helped me find out that my customer's opcheckout.js file was corrupted.

    Best Regards
    Gayatri.

    Posted on September 1, 2010 at 4:32 am

  • Gary Pettigrewenom-cycles.com

    I tried your troubleshooting tip but it doesnt work. i'm using v1.4.1.1

    Posted on September 19, 2010 at 5:04 am

  • fishpig
    fishpig says:

    Hi Gary,

    The tip was originally for Magento 1.3.2.4 and may need slightly altering to work with Magento 1.4.

    Posted on September 21, 2010 at 9:36 pm

  • Isy
    Isy says:

    Hi,

    I have the same problem. The error that I get is:

    Fatal error: Undefined class constant 'STATE_PAYMENT_REVIEW' in /home/mymalldi/public_html/valuechat.com/app/code/core/Mage/Sales/Model/Order/Payment.php on line 212

    Can you tell me please how can I fix it?

    Thanks for your help.

    Isy.

    Posted on October 24, 2010 at 7:08 pm

  • Rob
    Rob says:

    Hello
    Very good and informative post
    I am getting the error message right at the end when you have to click place order. A pop up box appears saying undefined. This is happening when i try to do the order as check/money order. Not sure how I can put through a fake order using paypal etc?
    The order appears in the admin but this will make the customer think It hasn't. I have installed the J2T reward points moodule so not sure if this ios the problem. I need to have this module within my site.
    Any ideas what I can do?

    Posted on November 3, 2010 at 4:41 pm

  • fishpig
    fishpig says:

    I have also had the error and it was caused by a reward points module (I don't remember if it was J2T or not though). Have you followed the steps to force the display of your error message? Have you checked the logs?

    Posted on November 5, 2010 at 9:46 am

  • Narayan
    Narayan says:

    Hi,

    I got the same error and while keeping the code alert(transport.responseText); I got the html code of the admin login page and then undefined pop up. There is no any error related to the object initialisation. Please give me any suggestion..

    Posted on November 15, 2010 at 2:57 pm

  • Jeremy
    Jeremy says:

    I have a big issue this is what it is spitting out.


    The page at https://site.com says:


    Item
    Sku
    Qty
    Subtotal






    item

    Size
    size


    item_code
    1


    Fatal error: Allowed memory size of 33554432 bytes exhausted (tried to allocate 122880 bytes) in /home/"site"/public_html/lib/Zend/Locale/Format.php on line 731

    Any help would be great.

    Posted on December 9, 2010 at 5:06 am

  • fishpig
    fishpig says:

    The error is probably due to an invalid SQL query that is eating up all your memory. You can try increasing the memory limit in your .htaccess file (in the public root of your website) but should really try to locate the error that is causing this or optimise your query so that it doesn't eat up all of your memory (or use a direct SQL select query)

    Posted on December 14, 2010 at 11:56 pm

  • pp
    pp says:

    You saved my day. Thanks a lot for sharing this information.

    Posted on December 29, 2010 at 6:30 pm

  • Greg Lane

    Hello there,

    Thanks very much - this is hugely helpful for debugging opcheckout.js There seem to be so many different reasons for getting the 'undefined' error that it could be anything. I've managed to display the transport.responsetext (although I had to display in a popover div because the alert was too smal)l. My problem is that what it is returning is huge - about 1.5 million characters long and 1.7MB - maybe longer as it is timing out. I'm guessing it shouldn't be this long :) Also since it is timing out, this is probably the cause of the object being malformed and generating the 'undefined' error.

    Anyway, I'm stumped at how to debug this.

    By the way, it only happens when checking out with Paypal.

    Regards

    Greg

    Posted on February 24, 2011 at 2:26 am

  • sheritongforce

    Hi ,
    Thanks for sharing the info. I am having a similar problem not exactly similar though. Need debugging help from you.
    My Onepage Checkout throws 500 internal server error in one of the step, it is difficult to reproduce the error as it doesnt come always. I tracked 500 internal server error in firebug. I also checked OnePageController.php saveShippingAction, SaveBilling . At the time of error $this->getRequest()->isPost() condition become false and no post data is received. May be because of the 500 internal server error.
    I dont know how to debug it, I dont know the full flow. Could you help me debugging opcheckout.js

    Posted on April 6, 2011 at 9:29 am

14 Item(s)

Have your say...

You must be logged in to post a comment.