JQuery AJAX IE Inconsistencies

Question

Hi people,

Another Internet Explorer issue! The fun never ends does it... This one is related to AJAX and IE. I'm using JQuery to help build a function, that pulls in new HTML content using a PHP page, pre-loads it, and then switches the content over with the old content. Here is my code below:

function showcase() {

 document.getElementById("home").onclick = "";
 var x = Math.floor(Math.random()*100000);
 $('#showcaseLoad').css('display', 'block');
 $.ajax({
  type: "POST",
  url: "test.php",
  data: "not=" + showcase_current_id + "&x=" + x,
  error: function() { alert("Failure"); },
  success: function(s_results) { 
   if(showcase_current == 0) showcase_current = 1;
   else showcase_current = 0;

   s_parts = s_results.split("|");
   showcase_current_id = s_parts[0];
   var s_content = "<img id='showcase_image_" + s_parts[0] + "' src='"+s_parts[3]+"' alt='Showcase Preview Image' />\n" +
       "<h2 style='color:#"+s_parts[4]+";'>"+ s_parts[1]+" &mdash; <em>"+s_parts[2]+"</em></h2>" +
       "<p>"+s_parts[5]+" <a href='"+s_parts[0]+"' style='color:#"+s_parts[4]+";'>[ Read On ]</a></p>" +
       "<div style='display:none;'>" + s_parts[6] + "</div>";

   $("#showcase_" + showcase_current).html(s_content);      
   showcase_image = new Image();
   showcase_image.src = s_parts[3];
   showcase_image.onload = function() {          
    $("#showcase_0").slideToggle(1400);   
    $("#showcase_1").slideToggle(1400);     
    setTimeout("document.getElementById('home').onclick = function() { showcase(); }; $('#showcaseLoad').css('display', 'none');", 1500);
   };
  }
 }); 
}

Step by step it does this: - Remove the onclick event of the trigger until finished processing. - Slaps a loading bar over the top (showcaseLoad) - Performs the AJAX function (using POST for IEs benefit, and a random number so it's unique) - Retrieves the results, and splits using the | delimiter. - Creates HTML content - Preloads the new image - Swaps the two DIVs over (slideToggle) - Re-grants onclick permission

Active Demo: http://evenicoulddoit.com/dev/jan_2008/themes/eicdi1/design1.php Works perfectly in all browsers other than IE, where it will occasionally work, and will then just break.

Any ideas? Much much appreciated. (No-cache already forced, unique url, unique response) Ian Clark

Answer 1

Your issue lies with the fact your image url's are not unique every time. Therefore, in ie, when you request the same image it is cached and it does not run the image load event.

You can ensure a unique url by adding a timestamp to the querystring every time you request it.

e.g "http://evenicoulddoit.com/dev/jan_2008/themes/eicdi1/curves.jpg?t=12322323"

You will miss the benefits of caching however it will get you running again.

Going forward I would consider a different design for this however but this is a bit more in depth and probably outside the boundaries of this question.

Answer 2

Get rid of the onclick that is in your html code on the home button. You can use jquery to selected that button an add the click event listener, no need to make your html messy.

Also you can use the jquery load event on things other then just the document, in your case it would be handy in images, the load event also fixes the problem of it being "loaded" already and IE not triggering your old "onload" event. (tested in IE8 and IE7)

You won't have to have add a extra random string on to the image.

Then try this:

$('#home').click(function(){
    if( !$('#showcaseLoad:visible').length ) showcase();
});

function showcase() {
    var x = Math.floor(Math.random()*100000);
    $('#showcaseLoad').show();
    $.ajax({
     type: "POST",
     url: "test.php",
     data: "not=" + showcase_current_id + "&x=" + x,
     error: function() { alert("Failure"); },
     success: function(s_results) { 
      if(showcase_current == 0) showcase_current = 1;
      else showcase_current = 0;

      s_parts = s_results.split("|");
      showcase_current_id = s_parts[0];
      var s_content = "<img id='showcase_image_" + s_parts[0] + "' src='"+s_parts[3]+"' alt='Showcase Preview Image' />\n" +
          "<h2 style='color:#"+s_parts[4]+";'>"+ s_parts[1]+" &mdash; <em>"+s_parts[2]+"</em></h2>" +
          "<p>"+s_parts[5]+" <a href='"+s_parts[0]+"' style='color:#"+s_parts[4]+";'>[ Read On ]</a></p>" +
          "<div style='display:none;'>" + s_parts[6] + "</div>";

      $("#showcase_" + showcase_current).html(s_content)
      .find('img').load(function(){
       $("#showcase_0").slideToggle(1400);
       $("#showcase_1").slideToggle(1400,function(){
        $('#showcaseLoad').hide();
       });
      }); 
     }
    });
}