Jquery: show dailog when loading PDF (e.g. by using jquery.fileDownload.js)
<p>On my website I have a php-file that's using mpdf-plugin to create a pdf file by doing a query on a MYSQL-database. </p>

<p>The basic url: pdf_report.php?VARa=b&amp;VARb=c. 
(VARa and VARb are used as GET-variables to do query on the database.)</p>

<p>No my real question: I would like to show a loading-dialog that is displayed while the PDF is being produced. When finished the loading-dialog should disappear and the PDF-file downloaded (or displayed in the browser). 
To achieve this I thought I could use the "jquery.fileDownload"-file by using the <a href="http://jqueryfiledownload.apphb.com" rel="nofollow">examples</a>. But since I'm a very beginner on Jquery I could not find the way to get it to work. </p>

<p>What I've come up so far is (exactly following the examples):</p>

<pre><code>&lt;?php 
header('Set-Cookie: fileDownload=true');
header("Content-type: text/pdf");
header('Content-Disposition: attachment; filename="report_b_c.pdf"');
//b and c are the values of the variables VARa and VARb
?&gt;

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;PDF Wait dialog&lt;/title&gt;
&lt;link href="css/jquery-ui.css" rel="stylesheet" type="text/css"/&gt;
&lt;script src="js/jquery-ui.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="js/jquery-1.8.3.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="js/jquery.fileDownload.js" type="text/javascript"&gt;&lt;/script&gt;
enter code here
&lt;/head&gt;
&lt;body&gt;
&lt;script&gt;
$(function () {
$(document).on("click", "a.fileDownloadCustomRichExperience", function () {

    var $preparingFileModal = $("#preparing-file-modal");

    $preparingFileModal.dialog({ modal: true });

    $.fileDownload($(this).attr('href'), {
        successCallback: function (url) {

            $preparingFileModal.dialog('close');
        },
        failCallback: function (responseHtml, url) {

            $preparingFileModal.dialog('close');
            $("#error-modal").dialog({ modal: true });
        }
    });
    return false; //this is critical to stop the click event which will trigger a normal file download!
});
});
&lt;/script&gt;
&lt;div id="preparing-file-modal" title="Preparing report..." style="display: none;"&gt;
We are preparing your report, please wait...

&lt;div class="ui-progressbar-value ui-corner-left ui-corner-right" style="width: 100%; height:22px; margin-top: 20px;"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div id="error-modal" title="Error" style="display: none;"&gt;
There was a problem generating your report, please try again.
&lt;/div&gt;
&lt;a class="fileDownloadCustomRichExperience" href="pdf_logboek_report.php?VARa=b&amp;VARb=c"&gt;Report.pdf&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>[edit] 
When running this php-file no errors are shown. Sometimes for 0.5 seconds a dialog is visible and a pdf-file is downloaded. Name of the file: logboek_report_.pdf (this is not the expected file and has empty contents!)</p>

<p>When I run pdf_logboek_report.php?VARa=b&amp;VARb=c the expected pdf-file is created and shown (or downloaded depending on the browser-support).</p>

<p>[edit]
The pdf I want to load would normally take up to 30-60 seconds to be produced.</p>

<p>But unfortunately is does not work as expected because I'm (as a beginner) doing something wrong. OR is the a much simpler way to achieve the dialog the way I would like to have it?!</p>

<p>Please help me out!</p>
