title: jQuery $.ajax response empty, but only in Chrome
body: <p>I've exhausted every avenue of research to solve this one so hopefully someone else will think of something I just didn't.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <pre><code>var container = $('#container');
  
  $.ajax({
      type: 'GET',
      url: '/path/to/local/url',
      data: data('parameters=value&amp;another=value2'),
      dataType: 'html',
      cache: false,
      beforeSend: requestBefore,
      complete: requestComplete,
      success: requestSuccess,
      error: requestError
  });
  
  function data(parameters) {
      var dictionary = {};
      var pairs = parameters.split('&amp;');
      for (var i = 0; i &lt; pairs.length; i++) {
          var keyValuePair = pairs[i].split('=');
          dictionary[keyValuePair[0]] = keyValuePair[1];
      }
      return dictionary;
  }
  
  function requestBefore() {
      container.find('.message.error').hide();
      container.prepend('&lt;div class="modal"&gt;&lt;div class="indicator"&gt;Loading...&lt;/div&gt;&lt;/div&gt;');
  }
  
  function requestComplete() {
      container.find('.modal').remove();
  }
  
  function requestSuccess(response) {
      container.empty();
      container.html(response);
  }
  
  function requestError(response) {
      if (response.status == 200 &amp;&amp; response.responseText == 'OK') {
          requestSuccess(response);
      } else {
          container.find('.message.error').fadeIn('slow');
      }
  }
  </code></pre>
  
  <p>All of this is executed in a $(document).ready(function() {});</p>
  
  <p>Cheers,
  Jim</p>
  
  <p>@Oleg - Additional information requested, an example of the response that the ajax call might receive.</p>
  
  <pre><code>&lt;p class="message error hidden"&gt;An unknown error occured while trying to
  retrieve data, please try again shortly.&lt;/p&gt;
  &lt;div class="timeline"&gt;
     &lt;a class="icon shuttle-previous"
  rel="max_id=16470650733&amp;page=1&amp;q=something"&gt;Newer Data&lt;/a&gt;
     &lt;a class="icon shuttle-next"
  rel="max_id=16470650733&amp;page=3&amp;q=something"&gt;Older Data&lt;/a&gt;
  &lt;/div&gt;
  &lt;ol class="social"&gt;
     &lt;li class="even"&gt;
         &lt;div class="avatar"&gt;
             &lt;img src="sphere_normal.gif"/&gt;
         &lt;/div&gt;
         &lt;p&gt;
             Some Content&lt;br/&gt;
             &lt;span class="published"&gt;Jun 18, 2010 11:29:05 AM&lt;/span&gt; - &lt;a
  target="_blank" href=""&gt;Direct Link&lt;/a&gt;
         &lt;/p&gt;
     &lt;/li&gt;
     &lt;li class="odd"&gt;
         &lt;div class="avatar"&gt;
             &lt;img src="sphere_normal.gif"/&gt;
         &lt;/div&gt;
         &lt;p&gt;
             Some Content&lt;br/&gt;
             &lt;span class="published"&gt;Jun 18, 2010 11:29:05 AM&lt;/span&gt; - &lt;a
  target="_blank" href=""&gt;Direct Link&lt;/a&gt;
         &lt;/p&gt;
     &lt;/li&gt;
  &lt;/ol&gt;
  &lt;div class="timeline"&gt;
     &lt;a class="icon shuttle-previous"
  rel="max_id=16470650733&amp;page=1&amp;q=something"&gt;Newer Data&lt;/a&gt;
     &lt;a class="icon shuttle-next"
  rel="max_id=16470650733&amp;page=3&amp;q=something"&gt;Older Data&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>