CodingForums.com - Loading Gif

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)

- - Loading Gif (http://www.codingforums.com/showthread.php?t=282771)

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 :)

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" />');

   }

});

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");
}
})
})

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';

});

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.

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

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

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....

it's just getting pushed below the ajax conten

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