jQuery $.ajax response empty, but only in Chrome

Posted by roguepixel on Stack Overflow See other posts from Stack Overflow or by roguepixel
Published on 2010-06-18T10:24:56Z Indexed on 2010/06/18 14:13 UTC
Read the original article Hit count: 244

Filed under:
|
|
|

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>

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery