CODEWITHSUNDEEP
javascriptphpjquery
kevinmcurran
kevinmcurran

Reputation: 91

showing a loading message before appending

I don't know much about jQuery/Javascript but I have this code that appends a data.php file into a div once the page has finished loading, but that php file is a bit big and takes 2-4 seconds to appear on the div after page loaded,

How do I show a message inside the div saying (loading..) or a loader gif image during that 2-4 seconds while the php file is getting ready? here is my code:

<?php $u=$_GET['id'];?>
  <script type='text/javascript'>
     var get = "<?php echo $u; ?>";
     $(document).ready(function() {
            $.get("/data.php?id="+get, function(data) {
            $("#c").append(data);
        }, 'html');
    });
  </script>

Upvotes: 0

Views: 252

Answers (1)

Kinglish
Kinglish

Reputation: 23664

The easiest would be to just write, then rewrite the .html()

<script type='text/javascript'>
     var get = "<?php echo $u; ?>";
     $(document).ready(function() {
            $("#c").html("<div class='tmp-loading'>Loading....</div>");
            $.get("/data.php?id="+get, function(data) {
            $("#c").html(data);
        }, 'html');
    });
  </script>

If you have to append() instead of rewrite html(), then you can hide the loading tag when the data comes in.

<script type='text/javascript'>
     var get = "<?php echo $u; ?>";
     $(document).ready(function() {
            $("#c").append("<div class='tmp-loading'>Loading....</div>");
            $.get("/data.php?id="+get, function(data) {
            $("#c .tmp-loading").hide();
            $("#c").append(data);
        }, 'html');
    });
  </script>

Upvotes: 0

Related Questions