Диалог jQuery при создании и загрузке файла (URL) - PullRequest
Новая
       4

Диалог jQuery при создании и загрузке файла (URL)

0 голосов
/ 03 августа 2011

на некоторых страницах я даю ссылку, которая вызывает страницу (createPDF.php), которая создает PDF с wkhtmloptf, и окно загрузки может появиться до 30 секунд.

Я хотел бы показать диалоговое окно (с использованием jQuery UI), которое покажет сообщение при загрузке страницы, а затем исчезнет, ​​когда появится окно загрузки.

Прямо сейчас:

  1. Пользователь нажимает на значок PDF, он открывает диалоговое окно jQuery UI, в котором пользователь выбирает ориентацию страницы и формат страницы.

  2. Пользователь нажимает «Создать PDF», что делает: 

    ( 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

Появляется диалоговое окно с надписью «Пожалуйста, подождите», но оно не исчезает при всплывающем окне загрузки.

Есть идеи? Заранее спасибо!

Редактировать:

Я попытался загрузить файл с помощью Ajax, используя следующий код: 

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

Диалоговое окно закрывается после создания PDF, но я не получаю окно для загрузки ...

Редактировать 3:

Наконец, я использовал blockUI с таймаутом, чтобы закрыть его. Пользователь также может закрыть окно сообщения, если он хочет. 

$( 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);

Ответы [ 2 ]

0 голосов
/ 29 мая 2012

Наконец, я использовал blockUI с таймаутом, чтобы закрыть его. Пользователь также может закрыть окно сообщения, если он хочет. 

$( 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);
0 голосов
/ 03 августа 2011

Попробуйте использовать метод в этом посте . Но вместо использования изображения и его отображения в функциях $.ajaxStart() и $.ajaxStop() создайте, а затем уничтожьте диалог - или инициализируйте ранее и open / close диалог.

...