Jquery loading screen to cover a large mysql query via PHP?

Question

I'm in the middle of a reporting tool for my client which basically rebuilds reports on the fly if they are X days old.

The issue is that the reports are rebuilt with PHP, and some of them can be pretty big, meaning 20-40 second loading times.

At the moment, it just hangs the page while it performs the query.

What I'm wanting to do however is have some sort of jquery loading overlay placed into the page before the query starts, and then when the query finishes, redirect to another page (where the results will be shown).

Am I right in thinking that as long as I load the html into the page BEFORE running the query, the loading screen should display, and then once the query is finished, I can place another bit of HTML to do a meta refresh to another page (obviously a header redirect is out of the question as the headers would have already been sent).

If this is correct, could anyone recommend any half-decent jquery based loading plugins?

Many thanks

I'd highly recommend not doing it the way you suggest and looking at ajax. It's an old-style method that you suggest and you can't guarantee behaviour from browser to browser. — Reinstate Monica Cellio, Aug 24 '12 at 09:43
good point. Presumably I could just then have a loader showing until the ajax page shows, which will then say something like 'report rebuilt, redirecting to results'. Will certainly look into it as it'll likely be a more reliable option. Thanks! — Sk446, Aug 24 '12 at 09:45
Ideally, you'd get the report as the result of the ajax call, so you'd show a loader, build and download the report, write it to your page and then remove the loader. If you can hit a page already that builds and displays the report then you're almost done. It may only be a few lines of code to make this work. — Reinstate Monica Cellio, Aug 24 '12 at 10:07

score 1 · Accepted Answer · answered Aug 24 '12 at 09:45

Not that sure, what you mean by writing

Am I right in thinking that as long as I load the html into the page BEFORE running the query, the loading screen should display, and then once the query is finished, I can place another bit of HTML to do a meta refresh to another page (obviously a header redirect is out of the question as the headers would have already been sent).

But let me tell you, what we have done earlier:

By clicking on the export-Button of a time-taking XLS-Export a modal overlay showed up and the request for the export was sent. From that moment on, JS was constantly looking for a cookie with a specific name. On the server side the export was generated and after finishing a cookie was sent along with the XLS data. JS recognized the sent cookie and hid the overlay.

Hope this helps.

score 0 · Answer 2 · answered Aug 24 '12 at 09:43

You should look into flushing output to the screen using the PHP function flush(). It'll give users an indication that something is actually happening. There are plenty of tutorials and code snippets out there that show you how to set up a JS/JQuery progress bar with flush(). One example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title>Progress Bar</title>
</head>
<body>
<!-- Progress bar holder -->
<div id="progress" style="width:500px;border:1px solid #ccc;"></div>
<!-- Progress information -->
<div id="information" style="width"></div>
<?php
// Total processes
$total = 10;

// Loop through process
for($i=1; $i<=$total; $i++){
    // Calculate the percentation
    $percent = intval($i/$total * 100)."%";

    // Javascript for updating the progress bar and information
    echo '<script language="javascript">
    document.getElementById("progress").innerHTML="<div style=\"width:'.$percent.';background-color:#ddd;\">&nbsp;</div>";
    document.getElementById("information").innerHTML="'.$i.' row(s) processed.";
    </script>';

    // This is for the buffer achieve the minimum size in order to flush data
    echo str_repeat(' ',1024*64);

    // Send output to browser immediately
    flush();

    // Sleep one second so we can see the delay
    sleep(1);
}

// Tell user that the process is completed
echo '<script language="javascript">document.getElementById("information").innerHTML="Process completed"</script>';
?>
</body>
</html>

Jquery loading screen to cover a large mysql query via PHP?

2 Answers2

Linked