Vfrdtyky

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');

});