title: Jquery: show dialog when loading PDF (e.g. by using jquery.fileDownload.js)
body: <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>