innerHTML works in IE and Firefox, but not Chrome

Question

The data will not display in Chrome, unless i open an IE tab in Chrome go to the site then close it back to Chrome (sorry, if that doesn\'t make much sense).

Answer 1

You should use some modern Javascript library. It guards you from many of those small differences between browsers. I like jQuery.

So, with jquery your code

window.onload = function() {
  var url = "http://----.freeiz.com/gbSales/sales.json";
  var request = new XMLHttpRequest();
  request.open("GET", url);
  request.onload = function () {
    if (request.status == 200) {
      updateSales(request.responseText);
    }
  };
  request.send(null);
}
function updateSales(responseText) { 
  var salesDiv = document.getElementById("sales");
  salesDiv.innerHTML = responseText;
}

becomes

$(document).load(function() {
  var url = "http://----.freeiz.com/gbSales/sales.json";

  $.get(url, {}, function(data) {
    $('#sales').html(data);
  });
});

Shorter, cleaner and works in all browsers!

Answer 2

I think you want to use:

request.onreadystatechange = function() {

instead of:

request.onload = function() {

And change the way you check the return value.

See the asynchronous request code example here: https://developer.mozilla.org/en/DOM/XMLHttpRequest/Using_XMLHttpRequest for more details.

Answer 3

Just find that only the first form tag is removed so you can put an empty form () and the next one is keep in the code.