Web developers know how much IE (Internet Explorer) can be such a pain in the ass when it comes to make it compatible and work like every other internet browser (i.e. Firefox, Chrome, Opera, Safari). Last day, I had the weirdest bug ever at work; which is that IE didn't respond upon an AJAX request received from the server to filter and display search results. What makes it weird, it was nothing complicated, it was just a basic simple ajax request from the server, and it was implemented using the $.ajax function from the browser. It was basically like this:
As you can see it is a basic server request, but it was always breaking on IE and working on every other browser. I decided to do some extra debugging and added the error eventHandler for the $.ajax function
And VOILA, in IE the error eventHandler was executed but on every other browser the success eventHandler was executed, and that is what supposed to happen. But when I looked deep into the response that was been printed from the error eventHandler I found that it had an error string that was like this
And that was the error basically, the charset was written wrong. It should be
with "-" between the "utf" and the "8", otherwise IE will choke to death and your ajax request will always end up in the error eventHandler of the $.ajax function.
So, magically that was fix for the whole IE choking problem, now it is working smoothly like on every other browser.
$.ajax
({
({
url:uri,
type: 'GET',
traditional: false,
beforeSend: function()
{
success: function(response)
{
});
type: 'GET',
traditional: false,
beforeSend: function()
{
...
// do stuff
...
},// do stuff
...
success: function(response)
{
...
// process the response
...
}// process the response
...
As you can see it is a basic server request, but it was always breaking on IE and working on every other browser. I decided to do some extra debugging and added the error eventHandler for the $.ajax function
$.ajax
({
({
url:uri,
type: 'GET',
traditional: false,
beforeSend: function()
{
success: function(response)
{
error: function(response)
{
});
type: 'GET',
traditional: false,
beforeSend: function()
{
...
// do stuff
...
},// do stuff
...
success: function(response)
{
...
// process the response
...
},// process the response
...
error: function(response)
{
...
console.log(response)
...
}
console.log(response)
...
And VOILA, in IE the error eventHandler was executed but on every other browser the success eventHandler was executed, and that is what supposed to happen. But when I looked deep into the response that was been printed from the error eventHandler I found that it had an error string that was like this
"Error: Could not complete the operation due to error c00ce56e"
and I was like ... WOW! that was descriptive. After some Google searching, I found out that I was sending the wrong charset from the server to the browser in the HttpHeader.
Content-Type: application/json; charset=utf8
And that was the error basically, the charset was written wrong. It should be
Content-Type: application/json; charset=utf-8
with "-" between the "utf" and the "8", otherwise IE will choke to death and your ajax request will always end up in the error eventHandler of the $.ajax function.
So, magically that was fix for the whole IE choking problem, now it is working smoothly like on every other browser.
No comments:
Post a Comment