Right now I'm getting this strange behavior from IE where it's not showing my animated gif. I'm trying to show a loading gif during an AJAX request.
function changeToRecorded(){
$('#entries').fadeOut(200,function(){
$('#main').html('<img id="loadingGif" class="centered" src="./pictures/ajax-loader.gif"; />');
$.get("getData.php",{ status: "R" },requestCompleteRecorded);
});
}
changeToRecorded gets called on a mouse click on a particular . During this time (in IE) the loading gif doesn't show at all in . I'm not sure if has anything to do with using fadeOut but I don't see why it would because it doesn't get called until after the animation. It's the not the way the tag is written because I've copied and pasted that tag into the body of the HTML document and it displays perfectly fine in IE.
If anybody has a clue why this is happening I would appreciate it.
Note: This works for pretty much every other browser in the world.
<html>
<head>
<link rel="stylesheet" href="themeSuggestion.css">
<script type="text/javascript" src="jQuery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(onDocumentReady);
function onDocumentReady(){
$('#Recorded').addClass('border').click(changeToRecorded);
$('#Pending').addClass('border').click(changeToPending);
$('#main').addClass('scroll');
$('#entries').addClass('main');
$('#loadingGif').hide();
}
function changeToRecorded(){
/*
$('#entries').fadeOut(30,function(){
$('#loadingGif').show();
$.get("getData.php",{ status: "R" },requestCompleteRecorded);
});
*/
$('#entries').html('');
$('#loadingGif').show();
$.get("getData.php",{ status: "R" },requestCompleteRecorded);
}
function changeToPending(){
/*
$('#entries').fadeOut(30,function(){
$('#loadingGif').show();
$.get("getData.php",{ status: "P" },requestCompletePending);
});
*/
$('#entries').html('');
$('#loadingGif').show();
$.get("getData.php",{ status: "P" },requestCompletePending);
}
function requestCompletePending(data){
$('#loadingGif').hide();
$('#entries').addClass('main');
$('#entries').html(data).fadeIn();
$('#theme').addClass('fixws');
$('#date').addClass('fixws');
}
function requestCompleteRecorded(data){
$('#loadingGif').hide();
$('#entries').addClass('main');
$('#entries').html(data).fadeIn();
}
</script>
</head>
<body>
<div id="Recorded">Recorded</div><div id="Pending">Pending</div>
<br/><br/>
<div id="main">
<img id="loadingGif" class="centered" src="./pictures/ajax-loader.gif"; />
<table id="entries"></table>
</div>
</body>
</html>