At the end of my registration process you get to a payment screen where you can enter a coupon code, and there is an AJAX call which fetches the coupon from the database and returns it to the page so it can be applied to your total before it is submitted to paypal. It works great in Firefox, Chrome, and Safari, but in Internet Explorer, nothing happens. The (data) being returned to the jQuery function appears to be null.
jQuery Post
function applyPromo() {
var enteredCode = $("#promoCode").val();
$(".promoDiscountContainer").css("display", "block");
$(".promoDiscount").html("<img src='/images/loading.gif' alt='Loading...' title='Loading...' height='18' width='18' />");
$.post("/ajax/lookup-promo.php", { promoCode : enteredCode },
function(data){
if ( data != "error" ) {
var promoType = data.getElementsByTagName('promoType').item(0).childNodes.item(0).data;
var promoAmount = data.getElementsByTagName('promoAmount').item(0).childNodes.item(0).data;
$(".promoDiscountContainer").css("display", "block");
$(".totalWithPromoContainer").css("display", "block");
if (promoType == "percent") {
$("#promoDiscount").html("-" + promoAmount + "%");
var newPrice = (originalPrice - (originalPrice * (promoAmount / 100)));
$("#totalWithPromo").html(" $" + newPrice);
if ( promoAmount == 100 ) {
skipPayment();
}
}
else {
$("#promoDiscount").html("-$" + promoAmount);
var newPrice = originalPrice - promoAmount;
$("#totalWithPromo").html(" $" + newPrice);
}
$("#paypalPrice").val(newPrice + ".00");
$("#promoConfirm").css("display", "none");
$("#promoConfirm").html("Promotion Found");
finalPrice = newPrice;
}
else {
$(".promoDiscountContainer").css("display", "none");
$(".totalWithPromoContainer").css("display", "none");
$("#promoDiscount").html("");
$("#totalWithPromo").html("");
$("#paypalPrice").val(originalPrice + ".00");
$("#promoConfirm").css("display", "block");
$("#promoConfirm").html("Promotion Not Found");
finalPrice = originalPrice;
}
}, "xml");
}
Corresponding PHP Page
include '../includes/dbConn.php';
$enteredCode = $_POST['promoCode'];
$result = mysql_query( "SELECT * FROM promotion WHERE promo_code = '" . $enteredCode . "' LIMIT 1");
$currPromo = mysql_fetch_array( $result );
if ( $currPromo ) {
if ( $currPromo['percent_off'] != "" ) {
header("content-type:application/xml;charset=utf-8");
echo "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>";
echo "<promo>";
echo "<promoType>percent</promoType>";
echo "<promoAmount>" . $currPromo['percent_off'] . "</promoAmount>";
echo "</promo>";
}
else if ( $currPromo['fixed_off'] != "") {
header("content-type:application/xml;charset=utf-8");
echo "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>";
echo "<promo>";
echo "<promoType>fixed</promoType>";
echo "<promoAmount>" . $currPromo['fixed_off'] . "</promoAmount>";
echo "</promo>";
}
}
else {
echo "error";
}
When I run the code in IE, I get a javascript error on the Javascript line that says
var promoType = data.getElementsByTagName('promoType').item(0).childNodes.item(0).data;
Here's a screenshot of the IE debugger
Update
I set a breakpoint on the line, and it actually encounters the error on this line:
if ( data != "error" ) {
HOWEVER, when I allow it to run the rest of the code after the breakpoint, it WORKS. I'm thinking that maybe IE is running the callback function before the ajax request is actually finished, so the PHP hasn't returned its results yet? Is there any way I can test that?
