Loading content in a PHP file with JQuery

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?

Either put the Load content inside your div as OptimusCrime said or just hide it: $("a").hide(); — ComFreek
– ComFreek, Commented Oct 21, 2011 at 19:24
First get a loading image. Show it before you call load. Then, in load's callback, hide the a tag. — gen_Eric
– gen_Eric, Commented Oct 21, 2011 at 19:24
For some reason it wasn't working with the href attribute... It is now... Doh! Thanks. — gelviis
– gelviis, Commented Oct 21, 2011 at 19:33

Jasper · Accepted Answer · 2011-10-21 19:24:19Z

3

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*/
    });
});

answered Oct 21, 2011 at 19:24

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

OptimusCrime · Accepted Answer · 2011-10-21 19:22:48Z

1

Put the Load content inside the div. The load will overwrite this when it's done.

answered Oct 21, 2011 at 19:22

OptimusCrime

14.9k13 gold badges63 silver badges98 bronze badges

Comments

djmccormick · Accepted Answer · 2011-10-21 19:28:30Z

1

Please see the jQuery documentation for .load(). Here's how you can achieve this:

<script type="text/javascript">
    $(document).ready(function(){
        $("a").click(function(){
            // Display a loading message:
            $("#test").html('<p>Loading...</p>');

            // Load our data:
            $("#test").load('test.php', function() {
                // Code here runs when the load() completes:
                $("a").hide();
            });
        });
    }); </script>

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

answered Oct 21, 2011 at 19:28

djmccormick

4634 silver badges11 bronze badges

Comments

mattacular · Accepted Answer · 2011-10-21 19:23:41Z

0

Switch to $.ajax(). $.load and $.get are helper shortcut methods to the master .ajax() method which allows for many more configuration options.

Set your loader animation in the beforeSend callback, and remove it in the onComplete callback (this callback is run regardless of whether the pull is a success or error). You may want to do other things in the success/error callbacks accordingly.

http://api.jquery.com/jQuery.ajax/

answered Oct 21, 2011 at 19:23

mattacular

1,88913 silver badges17 bronze badges

1 Comment

riwalk Over a year ago

Honestly, this does nothing to answer the question. load() is clearly "good enough" for what he is doing and using ajax() will not help him make the "Load Content" go away (based on his current markup).

tpow · Accepted Answer · 2011-10-21 19:25:21Z

0

You need to use "print" in your PHP script.

When I do this, I use jquery ajax and show the response in the onSuccess

answered Oct 21, 2011 at 19:25

tpow

7,91411 gold badges62 silver badges86 bronze badges

Collectives™ on Stack Overflow

Loading content in a PHP file with JQuery

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related