Reputation: 1143
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
Reputation: 78006
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
Reputation: 78750
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
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