Search code examples
javascriptjqueryajaxfadein

JQuery AJAX success + fadeIn

I'm using AJAX to load survey content into a container on a page, and during the transition, I fadeOut the container and fadeIn when it's done. It works fine for pages 1-4, but stops working for page 5. The content loads for page 5, but the container doesn't fadeIn.

success: function(data){
    $("div#surveyContainer").fadeOut(function(){
        $("div#surveyContainer").html(data).hide().fadeIn();
    }); // end fadeout
}

There is no reference to surveyContainer anywhere in page 5. All I can think of is that something is timing out causing the fadeIn to not get triggered. The load time is about 36ms. I set the php script to where it's sending data to report all errors (and the data is making it into the Db just fine), but all I'm getting is the content I expect, but the container stays display:none. If I remove the fades, everything works fine :/

I've also tried this to no avail:

success: function(data){
    $("div#surveyContainer").fadeOut(function(){
        $("div#surveyContainer").html(data);
        $("div#surveyContainer").fadeIn();
    }); // end fadeout
}
Solution

  • Don't link to http://code.jquery.com/jquery-latest.js from a page using encryption (HTTPS). Host the code locally.