Question

I have the code below loading in the content I have in the test.php file. There’s a lot of code in the php file so takes a bit of time to load. When it does load the “load content” text remains. I want to be able to:
– display a loading symbol whilst the page is loading
– hide the “load content” text once the content has appeared

How would I do this?

    <script type="text/javascript">
          $(document).ready(function(){
            $("a").click(function(){
            $("#test").load('test.php');
          });
       });
    </script>

<div id="test"></div>
<a>Load content</a>

UPDATE:

Also I would like the it to be a link (as it currently doesn’t work on a touch device) – any suggestions?

Answer 1

You could either nest the <a> tag inside the <div id="test"> tag so it is removed when the .load() function is complete or add code to hide/remove the <a> tag in the callback function for the AJAX call:

<div id="test"><a>Load content</a></div>

Or in your JavaScript

$("a").click(function(){
    /*Code to show loading message*/
    $("#test").load('test.php', function () {
        //this is a callback function that will fire after the data from test.php is loaded into the test div
        $('a').hide();//or you can use .remove() to completely remove the tag
        /*Code to remove the loading message*/
    });
});