jQuery $.ajax response empty, but only in Chrome

Question

I've exhausted every avenue of research to solve this one so hopefully someone else will think of something I just didn't.

Relatively straight forward setup, I have a html page with some javascript that makes an ajax request to a URL (in the same domain) the java web app in the background does its stuff and returns a partial html page (no html, head or body tags, just the content) which should be inserted at a particular point in the page.

All sounds pretty easy and the code I have works in IE, Firefox and Safari, but not in Chrome. In Chrome the target element just ends up empty and if I look at the resource request in Chromes developer tools the response content is also empty.

All very confusing, I've tried a myriad of things to solve it and I'm just out of ideas. Any help would be greatly appreciated.

var container = $('#container');

$.ajax({
    type: 'GET',
    url: '/path/to/local/url',
    data: data('parameters=value&another=value2'),
    dataType: 'html',
    cache: false,
    beforeSend: requestBefore,
    complete: requestComplete,
    success: requestSuccess,
    error: requestError
});

function data(parameters) {
    var dictionary = {};
    var pairs = parameters.split('&');
    for (var i = 0; i < pairs.length; i++) {
        var keyValuePair = pairs[i].split('=');
        dictionary[keyValuePair[0]] = keyValuePair[1];
    }
    return dictionary;
}

function requestBefore() {
    container.find('.message.error').hide();
    container.prepend('<div class="modal"><div class="indicator">Loading...</div></div>');
}

function requestComplete() {
    container.find('.modal').remove();
}

function requestSuccess(response) {
    container.empty();
    container.html(response);
}

function requestError(response) {
    if (response.status == 200 && response.responseText == 'OK') {
        requestSuccess(response);
    } else {
        container.find('.message.error').fadeIn('slow');
    }
}

All of this is executed in a $(document).ready(function() {});

Cheers, Jim

@Oleg - Additional information requested, an example of the response that the ajax call might receive.

<p class="message error hidden">An unknown error occured while trying to
retrieve data, please try again shortly.</p>
<div class="timeline">
   <a class="icon shuttle-previous"
rel="max_id=16470650733&page=1&q=something">Newer Data</a>
   <a class="icon shuttle-next"
rel="max_id=16470650733&page=3&q=something">Older Data</a>
</div>
<ol class="social">
   <li class="even">
       <div class="avatar">
           <img src="sphere_normal.gif"/>
       </div>
       <p>
           Some Content<br/>
           <span class="published">Jun 18, 2010 11:29:05 AM</span> - <a
target="_blank" href="">Direct Link</a>
       </p>
   </li>
   <li class="odd">
       <div class="avatar">
           <img src="sphere_normal.gif"/>
       </div>
       <p>
           Some Content<br/>
           <span class="published">Jun 18, 2010 11:29:05 AM</span> - <a
target="_blank" href="">Direct Link</a>
       </p>
   </li>
</ol>
<div class="timeline">
   <a class="icon shuttle-previous"
rel="max_id=16470650733&page=1&q=something">Newer Data</a>
   <a class="icon shuttle-next"
rel="max_id=16470650733&page=3&q=something">Older Data</a>
</div>

Answer 1

I took your source code and set up a quick test scenario but fail to replicate your problem. It is working for me just fine in both Firefox (3.6.3) and Chrome (5.0.375.70). I tried it both locally and on a remote server.

So your code is most likely not to blame. But I would also think that it's not generally a Chrome related issue.

Other people seem to have come across this though. Changing the content type had no effect in my test scenario though. It even works when I set the Content-Type to image/jpeg.

On the JQuery forums someone indicated differing behavior depending on whether he runs his application locally or on a remote server. If this was the case for you, you could compare HTTP request and response headers to track down the issue.

Answer 2

I just resolved a similar problem, and thought I'd post my solution in case it's of use for anyone else.

Only Firefox and Chrome were showing an empty ajax response, so it seemed to be a cross domain problem, yet everything was on the same domain.

It turned out that the 'www.', which I had superfluously and stupidly hard-coded into my ajax url was to blame. Had I been using a relative path, everything would've been fine.

I had my test site open at that particular moment as "http://domain.com", with no 'www.', so Firefox and Chrome treated it as a different domain. Navigating to "http://www.domain.com" resulted in the ajax call working in all browers.

So, given that you wrote:

url: '/path/to/local/url'

..as is the convention when we don't want to disclose our paths, I couldn't help but wonder if in fact you had written an absolute path, just as I had...?

Answer 3

Chrome stepped onto its own foot with local files security, so no AJAXing local files with relative paths: http://code.google.com/p/chromium/issues/detail?id=47416