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
