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

Question

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

4.5k Views Asked by Sk446 At 05 April 2025 at 11:10

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

Original Q&A

There are 2 best solutions below

Wayne Whitty On 24 August 2012 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>

**Joshua** · Accepted Answer

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.

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

There are 2 best solutions below

Related Questions in PHP

Related Questions in JQUERY

Related Questions in MYSQL

Related Questions in LOADING

Related Questions in LARGE-QUERY

Trending Questions

Popular # Hahtags

Popular Questions