Odtnhj

When I have a form that I know will take a while to submit, I like to show a loading indicator on the submit event, so it shows up, and then gets cleared when the new page loads, something simple like this

$('#theForm').submit(function () 
 $('#loaderContainer').html('<img src="loader.gif" id="loadingGIF" />');
);

The issue I'm having is I am trying to do this for a form that does not navigate away from the page when you submit it, it is just serving up a file. I am rendering a csv in php, and serving it up. It takes anywhere from a few seconds
to a minute to do it. When this happens, you never leave the page, so nothing can trigger the loader to go away. I thought I could submit to an iframe, and then kill the loader with the iframe's onLoad event:

<form action="/makeCSV" method="POST" target="iframe">


<iframe id="iframe" name="iframe"></iframe>

$("#iframe").load(function () 
 $("#loadingGIF").remove();
);

But I guess since it is just serving up a file and not loading a page, the onload event does not trigger.

If I have a form that is serving up a file, rather than navigating to a new page, is there any way to detect that the file has been served up?

If it helps, csv rendering code is below:

 <?php
 //do some stuff to generate a csv...
 $csv="heading1, heading2, heading3, heading4 rn";
 $csv.="value1, value2, value3, value4 rn";
 $csv.="a,b,c,d rn";
 //...
 header('Pragma: public');
 header('Expires: 0');
 header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
 header('Cache-Control: private', false);
 header('Content-Type: text/csv');
 header("Content-Disposition: attachment;filename="file.csv"");
 echo $csv;
 exit;
 ?>

I would go with a 2 step process - submit the form via ajax, build the csv, save as a temp file and return an identifier. Then set the iframe to request the file, and in the handler foir that request, serve then delete the file:

$('#form').submit(function(ev)
 ev.preventDefault();
 $('#loaderContainer').html('<img src="loader.gif" id="loadingGIF" />');
 $.post('createfile.php', $(this).serialize(), function(resp)
 var identifier = resp.intentifier;
 $('iframe').attr('src', 'servefile.php?i='+identifier);
 $('#loaderContainer').html('<!-- -->');
 

//createfile.php
//create csv then
$identifier = uuid();
file_put_contents('somedir/'. $identifier .'.tmp', $csv);

echo json_encode(['indentifier'=>$identifier]);

//servefile.php
$identifier = $_GET['identifier'];
$file = 'somedir/' .$identifier .'.tmp'
//output correct headers here
readfile($file);
unlink($file);

Since you are already using JQuery, I suggest you use something that already has solved the issue in a compact/reliable way. I suggest giving jQuery File Download a try.

This answer led me to it. This may do exactly what you need and it is just a plugin that you can drop on your project and test :) Good luck.

You can check on window losing focus... pretty basic, but works for my need.

$([window, top.window]).blur(function() 
 $('BUTTON.btnLoading').removeClass('btnLoading');
);