Issue Hiding "Processing" Splash Screen

Question

I have a div that contains a "processing" animation that is triggered when a form is submitted.

<form action='index.php?page=2' method='post' onsubmit="javascript:processingBox();">

Works great for MOST pages. The issue I have, is that some of my forms trigger a download with the following code:

//BEGIN DOWNLOAD HEADER SECTION//
header("Pragma: public", true);
header("Expires: 0"); // set expiration time
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header("Content-Type: application/force-download");
header("Content-Type: application/octet-stream");
header("Content-Type: application/download");
header('Content-Disposition: attachment; filename='.$filename);
header("Content-Transfer-Encoding: binary");
header('Connection: Keep-Alive');

//WRITE OUT HEADER//
echo $output;
//WRITE OUT RECORDS//
while ($row = mysqli_fetch_array($sql)) {
    $output = "";
    for ($i = 0; $i < $columns_total; $i++) {
        $output .= $_POST['enclosed'] . $row["$i"] . $_POST['enclosed'] . $_POST['delimiter'];
    }
    echo "\r\n";
    echo substr($output,0,strlen($output)-1);
}
exit;

The obvious problem here, is that this script does not refresh the page (as its designed not to) but it wont clear the processing splash that is made visible on submit.

Any best practices for this scenario?

Edit:

 <script type="text/javascript">
function processingBox() {
    div = document.getElementById('processingBox');
    div.style.visibility = "visible";
}
</script>

<div class='processingBox' id='processingBox'>
    <h1 style='margin-top:0px;margin-bottom:30px;'>Processing</h1>
    <div class="circle"></div>
    <div class="circle1"></div>
</div>

The download is done via AJAX ? If it's the case, then you need to hide your "animation" in JavaScript too. Normally, you should be able to specify a return function with your Ajax call. When the file is uploaded, this function should be called. From it, you would hide your animation. — mogosselin, Jun 12 '14 at 22:49
This is not done in AJAX. It has been updated to show the processingBox() function and the HTML for the box itself. Additionally, there is no upload happening, its strictly exporting data from a mysql table. — Kirk Logan, Jun 13 '14 at 00:14

score 1 · Accepted Answer · edited May 23 '17 at 10:33

This is a notoriously tricky problem, and it has several solutions with varying degrees of unpleasantness. Here are the best ones that I know of:

Using files on the server: Submit the contents of your form using Ajax (or XHR, if you're not using a javascript library), and on the server side, save the records to a temporary file instead of echoing them straight to the user, then return a link to that file. Back in the browser, when this Ajax completes, you can remove the processing box, and direct the user to the returned link. This is unpleasand, because it requires two requests, and you have to write to disk on the server (but it works for 100% of browsers!).

Using cookies: The accepted answer to this question, is the most comprehensive solution that works with only one request, but it's complicated and requires cookies (which a small percentage of users disable).

Using iframes: Another option is to have your form target a hidden iframe, and to use the iframe's onload event to remove the processing box.

<iframe id="downloadTarget" onload="removeProcessingBox();"></iframe>
<form ... target="downloadTarget" ... ></form>

But unfortunately, Chrome doesn't fire the onload event for file downloads (this would affect a larger number of users, I should think).

My Advice: For file downloads, skip the processing animation, and just have some text that says it may take a moment...

Thank you for the very comprehensive answer, I probably just take your advice and drop the splash page for these downloads. A very annoying problem, but great answer! Thanks again! — Kirk Logan, Jun 13 '14 at 13:29

Issue Hiding "Processing" Splash Screen

1 Answers1