display "page loading" message

Question

I'm trying to display an image (.gif) for "page loading" in html page until the output from my_script.py gets displayed, and I've no idea how to do that. This is what I've got so far. Many thanks in advance.

HTML:

<div id="loading">
   <p><img src="./images/loading.gif" /> Please Wait</p>
</div>

<form action="./cgi-bin/my_script.py" method="post" enctype="multipart/form-data" name="fname">
   <input type="submit" id="submit" value="Submit" />
</form>

js:

 $(document).ready(function() {
        $("form").submit(function() {
            showLoading();
            $('#content').load('./cgi-bin/my_script.py', null, showResponse);
        });

        function showResponse() {
            hideLoading();
        }

        function showLoading() {
            $("#loading").show();
        }

        function hideLoading() {
            $("#loading").hide();
        }
    });

Duplicate of http://stackoverflow.com/questions/68485/how-to-show-loading-spinner-in-jquery? — Abe Miessler, Sep 14 '10 at 23:54
Do you want a dialog to popup with a loading indicator, because it seems like you already have a loading indicator. — Chris Laplante, Sep 14 '10 at 23:55

score 4 · Accepted Answer · answered Sep 15 '10 at 00:05

Your script can be simplified to this:

$(document).ready(function() {
    $("form").submit(function(e) {
        e.preventDefault();
        $('#content').html('put your loading html here').load('/ajax_html_echo/',function(response, status, xhr) {
            //This is the callback. You can check for error here.
            //For example if (status == 'error') alertTheMedia();
        });
    });
});

The revisions I made are:

e.preventDefault() to prevent default form submission if user has Javascript enabled.
Added the loading message to the #content selector, change the internal of html() to what you want to be displayed. This will cause the initial content to be your loading message, then it will either be replaced by what's returned by .load on success, or you'll have to explicitly tell it what to be replaced with if it's an error.
Condensed code, easier to read, so easier to maintain.

Fiddle

http://jsfiddle.net/8pgrD/

display "page loading" message

1 Answers1

Fiddle

Linked