jQuery load is truncating the beginning

Question

http://www.gomatagorda.com/matagorda-weather/

I'm using jQuery to load [root]/data/weather-full.htm which is uploaded by the weather station every 60 seconds.

I'm loading that file every 30 seconds, to maximize freshness of the data.

In Internet Explorer 7/8, after a refresh, half of the right column of data disappears. I've tried various solutions including DIVs, empty DIVs before and after, and even tables. On every refresh, the first part of the textual data disappears.

Any help with this is appreciated. I've been debugging this specific error for about 2 months.

Thanks!

Answer 1

If i had to guess i would say youre catching the file while its being written to. Without going into the detail of coding up a file locking system to protect reads while its being written to i would suggest testing the file for the expected last line of data... if its not there then defer the load for another few seconds/milliseconds.

Answer 2

If you use $.get, or $.ajax with GET method, then IE will cache the AJAX request. To prevent it, this simple hack will do it:

$.get(URL,
      { nbRandom: Math.random() },
      function(data){
        //process AJAX response
      });

nbRandom is a parameter name that not used by the URL, but just to make IE think that this is the new request, so the cache will not be used.

UPDATE

I have examine the site. Please bear in mind that I don't use IE. In the page, I see there are single <div> tag after <div id="weatherdata"> close tag. This single <div> don't have close tag, but immediately followed by </td>. Please examine the tag balance in the page, make sure all balanced and valid XHTML. Most bug and quirk behavior is come from unbalanced and unclosed tags.

Other thing that might or might not related, I never use .load() in my codes, and I never get any weird or bug in the IE. Below I rewrite your functions:

function UpdateWeatherBar(){
  var d = new Date();
  $.get("http://www.gomatagorda.com/data/weather.htm",
        { t: d.getTime() },
        function(data){
          jQuery("#weatherbar").html(data);
        });
}

jQuery(document).ready(function($) {
  UpdateWeatherBar();
});

var reloadcam = setInterval(function(){
  UpdateWeatherBar();
}, 30000);

You don't need to do if (document.getElementById("weatherbar") != null), jQuery do this for you automatically.

Using code above, you just need to write the AJAX in one place, then used it in any place. No duplicate code that will making hard when you need to update it. Also, since you call UpdateWeatherBar() using setInterval, moving jQuery(document).ready() block out from the function might make the bug gone.

I hope this and tag balanced checking will resolve the bug in IE.

Answer 3

The only thing strange I see is an extraneous </ right after the first THW Index that appears. Maybe this is messing up IE when it's added to the document tree? Fix the HTML at that point and see if you get better results.