Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10

Thread: Loading Gif

  1. #1
    New Coder
    Join Date
    Jun 2011
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Loading Gif

    I am using ajax to call upon an external page during page load and after page load. these are the codes I am using:
    Code:
    <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

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    You can use .ajaxSetup() in combination with beforeSend. Put this before your first $.ajax() call
    Code:
    $.ajaxSetup({
       beforeSend: function() {
          $('#yourdivID').html('<img src="pics/loadingAnimation.gif" />');
       }
    });

  • #3
    New Coder
    Join Date
    Jun 2011
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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");
    }
    })
    })

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    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

    Code:
    $(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';
    });

  • #5
    New Coder
    Join Date
    Jun 2011
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    now nothing is happening....no image, no ajax load, no nothing....
    Code:
    $(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.

  • #6
    New Coder
    Join Date
    Jun 2011
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    oh and by the way, the first function runs when the page loads....it loads the newsContent.

  • #7
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Are the "..." dots still part of your code?

  • #8
    New Coder
    Join Date
    Jun 2011
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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....

  • #9
    New Coder
    Join Date
    Jun 2011
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    it's just getting pushed below the ajax conten

  • #10
    New Coder
    Join Date
    Jun 2011
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    it goes away if I use activate one of the other functions, but it doesn't show up tho then.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •