Jquery File download ($.fileDownload)

Question

I am using jquery file download ..

the code is as follows :

 function downloadFile(){
var downloadOptions = {
preparingMessageHtml: "We are preparing your report, please wait...",
failMessageHtml: "No reports generated. No Survey data is available."
                  };

     $.fileDownload("displaySurveyReport.action",downloadOptions);
return false; 
}

This is what i am doing at button click

When i click on the button , the preparingMessageHtml: "We are preparing your report, please wait...", is shown in a dialog box ... The problem is that this dialog box does not go off after the fle completes its preparing and i have to close it manually ... How can i make it go off when the file completes its preparation and is ready to download..

Thanks

Answer 1

In order to make JQuery knows the file download just ocurred, your response header must contains Set-Cookie: fileDownload=true; path=/.

In Java:

response.setHeader("Set-Cookie", "fileDownload=true; path=/");

Answer 2

Here is source code of jquery file download ..

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

<div id="preparing-file-modal" title="Preparing report..." style="display: none;">
    We are preparing your report, please wait...

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

<div id="error-modal" title="Error" style="display: none;">
    There was a problem generating your report, please try again.
</div>