Alex Rivera | Logout

Show status on start of p:fileDownload and hide status when it is finished

Asked 2012-11-06T16:06:04.940
10

I would like to display ajaxStatus while zipManager.makeZip() is executed... until the download starts. if ajax=false, the file download works but ajaxStatus not displayed. if ajax=true, ajaxStatus is displayed but download not working!

Any idea how to make the ajaxStatus and fileDownload work together.

Thanks in advance

kem

<h:form id="form">
    <p:commandLink id="download" value="Download"
        onstart="showStatus()" oncomplete="hideStatus()" 
        actionListener="#{zipManager.makeZip()}">
        <p:fileDownload value="#{zipManager.zip}"/>  
    </p:commandLink>
</h:form>

<p:ajaxStatus id="status" widgetVar="st" style="position:fixed;right:50%;bottom:50%">  
    <f:facet name="start">  
        <p:graphicImage value="images/wait.gif" />  
    </f:facet>  
</p:ajaxStatus>
Edit
Report

1 Answer

20

if ajax=false, the file download works but ajaxStatus not displayed

That's because the download doesn't take place by an ajax request.


if ajax=true, ajaxStatus is displayed but download not working!

That's because the download can't take place by an ajax request. JS/Ajax will successfully retrieve the file, but have no idea how to deal with it. There's no way to force a Save As dialogue with JS. There's no way to access the local disk file system with JS (it would otherwise have been a huge security breach).


Any idea how to make the ajaxStatus and fileDownload work together.

Use the PrimeFaces-provided PrimeFaces.monitorDownload() JS function. A complete example can be found on their own <p:fileDownload> showcase page which is copypasted below for reference (note particularly the onclick attribute of the file download command button):

<p:dialog modal="true" widgetVar="statusDialog" header="Status" 
    draggable="false" closable="false" resizable="false">  
    <p:graphicImage value="/design/ajaxloadingbar.gif" />  
</p:dialog>  

<h:form id="form">  
    <p:commandButton id="downloadLink" value="Download" ajax="false"
        onclick="PrimeFaces.monitorDownload(start, stop)"
        icon="ui-icon-arrowthichk-s">  
        <p:fileDownload value="#{fileDownloadController.file}" />  
    </p:commandButton>  
</h:form>  

<script type="text/javascript">  
    function start() {  
        statusDialog.show();  
    }  

    function stop() {  
        statusDialog.hide();  
    }  
</script>  

This can be applied in your particul

answered 2012-11-06T16:23:46.987

Your Answer