What?

I lost two hours of my precious time because of this issue.

 

I’m making the back bones of a website for a friend and, after cleaning all the designer like HTML and making sure it was lookalike in IE, Chrome, FireFox, Opera and Safari. Being such a simple subject, I’m using a simple ASP.Net Web Form (.Net 3.0) where I’m making my own JSON serialization for the response. Then, I started on implementing AJAX stuff with jQuery and that’s when things started to, amazingly get messy.

 

The code

My server side looked something like this:

protected void Page_Load(object sender, EventArgs e)
{
    Response.Clear();
    var page = Pages.Find(p => p.Name == Request.QueryString["Name"]);
    if (null != page) Response.Write(page.ToJSON());
    Response.Flush();
    Response.Close();
}

Pretty simple, hey? We’ll see about that.

My jQuery AJAX request looked something like this:

$.ajax({
    url: "Server.aspx?Name=Home",
    success: PopulatePage,
    dataType: "json"
});

 

 

The occurrence

The DOM objects from the JSON sent by my server were OK in all browsers except for Chrome. Wow!

As I started to put alerts everywhere I first realized that Chrome was the only browser where XMLHtttRequest had no headers. Was this a cause or a symptom?
Furthermore, there was no responseText in XMLHttpRequest. Someone must be joking with me…

 

The solution

After some googling hitting everywhere but my issue, I managed to find the answer to my troubles in jQuery forums (link) where someone with a nickname that suggests he knows about Hi-Fi, kindly shared a link to where the cause and solution where explained.

It turns out that my good intensions to tell ASP handlers that I was done and that the response could be sent to the client by calling Response.Close() was causing, in Chrome, for the peer connection to be closed before any data was sent.

After a lot of code messing and try and miss and buffing, I just returned to my original code and commented the last line of Page_Load and the world was again turning.

 

PS

I had another minor issue, in this case, with Opera. I had a couple of span HTML elements where I set innerHTML with jQuery.html() method. Every other browser showed everything right except, as just stated, Opera. The cause was that these two span’s were self-closing elements, like so:

<span id="idOfASpan"/>

 

…and it looks like Opera doesn’t like it so I had to change it to:

<span id="idOfASpan"></span>

 

Now I really had a website W3C compliant in theory and visually as well.