IE AJAX Cross-Browser Issue - ajax

Question

I have the following AJAX function:
function ajaxDesignerBrandInfo()
{
var D = wrapFormValues('#designer-brand-form');
var recursiveEncoded = $.param(D);
/*
$.post("/api/designer_brand/", { data : recursiveEncoded }, function(data)
{
var results = $.parseJSON(data);
window.location = "/register/designer-product/";
});*/
$.ajax( { type: "POST",
url: "/api/designer_brand/",
data : { data : recursiveEncoded },
success: function(data) {
console.log(data);
setTimeout(function() {
window.location = "/register/designer-product/";
},0);
},
error: function (xhr, ajaxOptions, thrownError ){
alert(xhr.status);
alert(thrownError); }
});
return false;
}
And the corresponding form
<form id="designer-brand-form" name="form" method="post" action="" onSubmit="ajaxDesignerBrandInfo(); return false;">
....
</form>
The submission works great on Chrome, Safari and FireFox, moving me to
/register/designer-product/
Correctly, but in IE9, the submissions seems to
Never make it to the server
clear the form and redirect back to the current page i am on (in which this form exists).
I can confirm via FireFox there are no javascript errors causing this to fail. And sometimes it actually works, but I cannot seem to always reproduce this error in the same way
Someone Please explain WTF is going on?
Thanks

Answer 1

I believe your issue is that IE is silently throwing a Javascript error. Just because Firefox doesn't throw a JS error one doesn't mean that IE doesn't. Check for JS errors in IE (see this link or this one). Find the error and you'll find the solution.
Also, try Fiddler, which is a standalone Windows tool that acts as a proxy server and will tell you EXACTLY what your AJAX traffic looks like.
Your specific problem may be the console.log call. That is a Firebug thing (that Chrome supports). IE does not, I think, unless you take steps to add it. See: What happened to console.log in IE8?