ansaurus

Question

How to send web browser a loading page, then some time later a results page

Answer 1

+3 A:

If your process relies on query-string parameters, a simple meta-refresh would suffice. E.g. if they load http://yoursite.com/message?foo=1, then that can output a meta tag like:

<meta http-equiv="refresh" content="0; http://yoursite.com/realquery?foo=1" />

And some HTML that has your "please wait" message. The realquery script would actually execute the query and the HTML output by message will remain on the screen until realquery provides some output.

If the query relies on POST data, then it gets a little more complicated, because you can't redirect a POST. You can, however, output a form with some hidden fields and use Javascript to submit it. For example:

<script type="text/javascript">
    window.onload = function() { 
        document.getElementById( 'form_with_hidden_fields' ).submit();
    }
</script>

<form method="POST" action="realquery" id="form_with_hidden_fields">
    <input type="hidden" name="foo" value="1" />
    ...
</form>

Please wait while your query is processed...

If you're interested in an AJAX solution, here's an example using jQuery:

$( '#submit-button' ).click( function() { 
    // show a "please wait" image
    $( '#status-div' ).html( '<img src="please_wait.gif" />' );  // animated gif

    // get form values
    var formdata = { foo: $( 'input#foo' ).val(),
                     ...
                   };

    // submit form via ajax:
    $.ajax( { type: "POST", url: "/realquery", data: formdata, success: function() { 
        $( '#status-div' ).html( '<img src="success.gif" />' );
    } );
} );

And you could attach that to a form like:

<form>
    <input type="text" name="foo" id="foo" />
    <input type="submit" id="submit-button" />
    <div id="status-div"> </div>
</form>

The empty status-div div will receive an image tag that points to a "please wait" image (this can be an animated gif). When the Ajax query finishes, it's replaced by a "success" image.

friedo 2010-04-05 21:54:38

Okay, that worked. Thanks for the solution! I will use this solution if nobody answers with an Ajax solution. The benefit would be refreshing just the results section of the web page without sending and refreshing the whole web page on the browser.

Kurt W. Leucht 2010-04-05 22:29:48

Another downside to the meta redirect solution is that it muddles up the URL with the query string in the web browser, where I believe the Ajax solution doesn't actually change the URL when it updates sections of your web page.

Kurt W. Leucht 2010-04-05 22:39:38

I added an Ajax example using jQuery.

friedo 2010-04-06 00:18:49

I tried your jquery example and cannot get it to work. Could you please post a complete working example rather than short snippets. No need to use animated GIFs ... just put some text there. I'm not sure I'm putting your code snippets in the right location and using them properly. I've never used Ajax nor Jquery before.

Kurt W. Leucht 2010-04-06 00:51:42

Answer 2

+2 A:

See Watching long processes through CGI by Randal Schwartz.

Sinan Ünür 2010-04-05 22:27:43

This article is immensely helpful!

justkt 2010-08-05 17:06:04

Answer 3

+1 A:

Here is a complete working example using friedo's HTTP meta refresh solution. This is not my personal first choice solution because it modifies the URL in the browser and it also refreshes the whole web page.

#!C:\Perl\bin\perl.exe
use CGI; 
use CGI::Carp qw/fatalsToBrowser warningsToBrowser/; 
sub html_page {
    my ( $meta_string, $results_string ) = @_;
    my $html = <<EOHTML;
<html>
<head>
  $meta_string
  <title>Two Stage Web Page Demo</title>
</head>
<body>
  Some header text.
  <p>
  $results_string
  <p>
  Some footer text.
</body>
</html>
EOHTML
    return $html;
  }

my $cgi = new CGI;
print $cgi->header;
if ($cgi->param()) {
    if ($cgi->param('doResults') eq "true") {
        sleep(5);
        print html_page('', 'Here are your results!');
    }
}
else {
    my $meta_refresh = '<meta http-equiv="refresh" content="0; /cgi-bin/twoStageScript.pl?doResults=true" />';
    print html_page($meta_refresh, 'PLEASE BE PATIENT');
}
exit;

Kurt W. Leucht 2010-04-05 22:52:56

Answer 4

A:

Finally got an Ajax version working. The slow.pl file is the file that takes a while to return.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
    <head>
        <title>Two Stage web page demo using Ajax</title>
    </head>
    <body>
        <h1>Two Stage web page demo using Ajax</h1>
        <div id="result">
            Users input form goes here.
            <p>
            <input type="submit" value="Here is your submit button" id="load_basic" />
        </div>
        <script type="text/javascript" src="jquery-1.4.2.js"></script>
        <script type="text/javascript">
        $.ajaxSetup ({
            cache: false
        });
        var ajax_load = "Please be patient, this could take a while. <p> <img src='img/load.gif'/>";

        //  load() function
        $("#load_basic").click(function(){
            $("#result").html(ajax_load).load("/cgi-bin/slow.pl");
        });
        </script>
    </body>
</html>

Kurt W. Leucht 2010-04-06 02:06:19

ansaurus

tags:

views:

answers:

How to send web browser a loading page, then some time later a results page

related questions