CODEWITHSUNDEEP
javascriptjqueryajax
Souza
Souza

Reputation: 1143

FadeIn DIV after AJAX pull

i have this bit of nasty code :P that updates a div using AJAX, but i would love to see a fadein effect on it. The thing is, i have an image that loads and appears during the interval where the div is not showing any content yet. Analyse the bottom of it. What can i do to make it fadein?

function testing(str)
{
var xmlhttp;
if (str=="")
  {
  document.getElementById("myDiv").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {

    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
$('#myDiv').html('<div style="text-align:center; padding-top:195px;"><img src="../images/loaderajax.gif" width="220" height="19" /></div>');
xmlhttp.open("GET","getuser.php?q="+str,true);
$('#myDiv').hide();
xmlhttp.send();
$('#myDiv').fadeIn();
}

Upvotes: 1

Views: 531

Answers (3)

SeanCannon
SeanCannon

Reputation: 78046

Your code is all wacky and out of order with your ajax call. You're using JQuery, so take advantage of it! :)

$.ajax({
   url: 'getuser.php',
   data: str,
   beforeSend(jqXHR, settings) {
        $('#myDiv').html('<div style="text-align:center; padding-top:195px;"><img src="../images/loaderajax.gif" width="220" height="19" /></div>');
    },
    error:function(jqXHR, textStatus, errorThrown) {
        $('#myDiv').html(textStatus + ' -- ' + errorThrown);
    },
    success:function(data){
        $('#myDiv').hide().html(data).fadeIn();
    }
 });

Upvotes: 1

James Montagne
James Montagne

Reputation: 78770

If you are okay with wrapping the returned content, I would do something like this in the ajax response:

$("<div/>").html(xmlhttp.responseText).appendTo("#myDiv").hide().fadeIn();

This will allow your image to show and only fade in the new content.

Upvotes: 2

robbrit
robbrit

Reputation: 17960

Put the fadein() call in the code that handles the response.

Any reason why you're using jQuery for the selectors and effects and not for the AJAX?

Upvotes: 0

Related Questions