Loading Gif

[searls03]

I am using ajax to call upon an external page during page load and after page load. these are the codes I am using:

<script type="text/javascript">

	$(function(){

	$.ajax({
		type:"POST",
		url:"news_load1.php",
		data:"getNews=true",
		success: function(r){
			
			$("#newsContent").html(r)

		},

		error: function(){
			alert("could not retrieve any news articles");
		}
	})
})


<?php
		 
$sql = mysql_query("SELECT * FROM products where city='$city'");
 
        while($row = mysql_fetch_assoc($sql)){
$product = $row["product"];
$id =$row["id"];
$price =$row["price"];
$text = $product;
 

?>



function parseResponse<?php echo $id; ?> () 
{
	var hiddenField2<?php echo $id; ?> = $("#hiddenField2<?php echo $id; ?>");
	var hiddenField<?php echo $id; ?> = $("#hiddenField<?php echo $id; ?>");
	var hiddenField1<?php echo $id; ?> = $("#hiddenField1<?php echo $id; ?>");

	var url = "news_parse1.php";
	
		$.post(url,{  hiddenField2: hiddenField2<?php echo $id; ?>.val(),hiddenField: hiddenField<?php echo $id; ?>.val(), hiddenField1:hiddenField1<?php echo $id; ?>.val()  } , 
		function(data) {
	
		});
		setTimeout(function() {

		$.ajax({
		type:"POST",
		url:"news_load1.php",
		data:"getNews=true",
		success: function(r){
			$("#newsContent").html(r);
			
		},
		error: function(){
alert($(".hiddenField2<?php echo $id; ?>").val());		
	$("#error").text($(".hiddenField2<?php echo $id; ?>")).fadeIn(300)
		}
	})


	},200);
}

	<?php
		}
		?>
function empty() 
{
	var id = $('#id');

	var url = "empty.php";
	
		$.post(url,{  id:id.val()  } , 
		function(data) {
	
		});
		setTimeout(function() {

		$.ajax({
		type:"POST",
		url:"news_load1.php",
		data:"getNews=true",
		success: function(r){
			$("#newsContent").html(r);
			
		},
		error: function(){
alert($(".hiddenField2<?php echo $id; ?>").val());		
	$("#error").text($(".hiddenField2<?php echo $id; ?>")).fadeIn(300)
		}
	})


	},200);
}
	</script>

I need to know how I can place "pics/loadingAnimation.gif to display in a div whenever one of these calls is being made. don't worry about the php that is in it, just help me figure out how to do this...thanks

[devnull69]

You can use .ajaxSetup() in combination with beforeSend. Put this before your first $.ajax() call

$.ajaxSetup({
   beforeSend: function() {
      $('#yourdivID').html('<img src="pics/loadingAnimation.gif" />');
   }
});

[searls03]

two questions, how do I stop it once loaded, and currently, it only is animating after the ajax loads, not while it is loading.....is this how it should look?

<script type="text/javascript">
$.ajaxSetup({
beforeSend: function() {
$('#bo').html('<img src="pics/loadingAnimation.gif" />');
}
});
$(function(){

$.ajax({
type:"POST",
url:"news_load1.php",
data:"getNews=true",
success: function(r){

$("#newsContent").html(r)

},

error: function(){
alert("could not retrieve any news articles");
}
})
})

[devnull69]

I would

1) pre-load the image so that it is ready before the ajax requests starts
2) show the gif in the #newsContent element instead of the #bo element. This would automatically stop the loading gif by overwriting the #newsContent in the success callback

$(document).ready(function() {
   var myImage = new Image();
   myImage.onload = function() {
      // here the image has finished loading
      $.ajaxSetup({
         beforeSend: function() {
            $('#newsContent').append(myImage);
         }
      });

      $.ajax({
         ...
         success: function(r) {
            $('#newsContent').html(r);
         },
         ...
      });
   };
   myImage.src = 'pics/loadingAnimation.gif';
});

[searls03]

now nothing is happening....no image, no ajax load, no nothing....

$(document).ready(function() {
   var myImage = new Image();
   myImage.onload = function() {
      // here the image has finished loading
      $.ajaxSetup({
         beforeSend: function() {
            $('#newsContent').append(myImage);
         }
      });

      $.ajax({
type:"POST",
		url:"news_load1.php",
		data:"getNews=true",
		success: function(r) {
            $('#newsContent').html(r);
         },
         ...
      });
   };
   myImage.src = 'pics/loadingAnimation.gif';
});

I also need it in the bo div because that fills the entire page, the newsContent fills only the top half of page.

[searls03]

oh and by the way, the first function runs when the page loads....it loads the newsContent.

[devnull69]

Are the "..." dots still part of your code?

[searls03]

no they aren't anymore, sorry, it does "work" now. by that I mean the image shows, but it still isn't animated and it also isn't disappearing when done....even if it is with the newsContent....

[searls03]

it's just getting pushed below the ajax conten

[searls03]

it goes away if I use activate one of the other functions, but it doesn't show up tho then.