Internet Explorer ajax request not returning anything

Posted by Ryan Giglio on Stack Overflow See other posts from Stack Overflow or by Ryan Giglio
Published on 2010-04-14T22:11:53Z Indexed on 2010/04/14 22:33 UTC
Read the original article Hit count: 387

Filed under:
|
|
|

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 debuggeralt text

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about AJAX