Question

on some pages I give a link that call a page (createPDF.php) which create a PDF with wkhtmloptf, and the download box can take up to 30 seconds to appear.

I’d like to show a dialog (using jQuery UI) that will show a message while loading the page, then disappear when the download box appear.

Right now:

1. User click on the PDF icon, it opens a jQuery UI Dialog in which
   user selects Page Orientation and Page Format.

2. User clicks on ” Generate PDF “, which do:

   ( this ).dialog( "close" );  // Close current dialog (Select page orientation, ...)
   $( "#dialog-modal" ).dialog( "open" );  // Open new dialog (Please wait while ....)
   window.location.href = "<?php echo URL; ?>createPDF.php"; (generate and load the PDF)
   // dialog should close here once the above URL is loaded
   

The dialog showing ” Please wait ” appears but doesn’t disappear when the download box pop up.

Any idea? Thanks in advance!

Edit :

I tried to load the file by Ajax, with the following code:

$.ajax({
    url: "<?php echo URL; ?>createPDF.php",
    async: false, 
    beforeSend: function( xhr ) {
        xhr.overrideMimeType( 'application/octet-stream' );
    },
    success: function(content) {
        $( "#dialog-modal" ).dialog( "close" );
    }
});

The dialog close once the PDF is generated, but I get no download box…

Edit 3:

Finally I used blockUI with a timeout to close it. User can also close the message box if he wants.

$( this ).dialog( "close" );
$.blockUI({ message: '<div style="padding: 20px;"><div style="font-size: 20px;">Veuillez patienter pendant que votre PDF est généré.</div> <br /> Ceci peut prendre quelques secondes. <br /> <br />  Ce message peut disparaître avant que le téléchargement ne commence.</div>' });     
$('.blockOverlay').attr('title','Cliquez pour fermer ce message').click($.unblockUI);
var pdfFormat = $('#pdfFormat').val();
var pdfOrientation = $('#pdfOrientation').val();
pdfURL = pdfURL + "&f=" + pdfFormat  + "&o=" + pdfOrientation;
window.location.href = pdfURL; 
setTimeout(
    function(){
        $.unblockUI();
    }, 5000);

Answer 1

Finally I used blockUI with a timeout to close it. User can also close the message box if he wants.

$( this ).dialog( "close" );
$.blockUI({ message: '<div style="padding: 20px;"><div style="font-size: 20px;">Veuillez patienter pendant que votre PDF est généré.</div> <br /> Ceci peut prendre quelques secondes. <br /> <br />  Ce message peut disparaître avant que le téléchargement ne commence.</div>' });     
$('.blockOverlay').attr('title','Cliquez pour fermer ce message').click($.unblockUI);
var pdfFormat = $('#pdfFormat').val();
var pdfOrientation = $('#pdfOrientation').val();
pdfURL = pdfURL + "&f=" + pdfFormat  + "&o=" + pdfOrientation;
window.location.href = pdfURL; 
setTimeout(
    function(){
        $.unblockUI();
    }, 5000);