調用h：commandButton submit后關閉模式面板

Question

我正在嘗試使用<h:commandButton>下載一個大文件，我想通過向用戶顯示“等待”模式來警告用戶下載操作需要幾秒鍾/幾分鍾。

我的問題是我可以使用按鈕的onclick事件顯示圖像，但我不知道如何在操作完成時隱藏它（這是顯示下載文件的對話框彈出窗口時）。

我的代碼是這樣的：

<h:form id="form">

    <h:commandButton value="Download" 
        action="#{bean.downloadFile()}"
        onclick="showModal('waitModal')"/>

        <div id="waitModal" class="modal fade" tabindex="-1"
            role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        WAIT!
                    </div>
                </div>
            </div>
        </div>  

</h:form>

一個解決方案是在bean中使用一個標志並調用一個帶有超時的javascript函數，該函數檢查標志的值並在下載完成時關閉模態，但它不是我正在尋找的...它應該更通用因為我必須在幾個地方申請

我知道有一些類似的問題，但我沒有找到任何我可以應用於我的問題的解決方案。

謝謝！

Answer 1

PrimeFaces用p：fileDownload解決了你的問題。 如果您不想使用PrimeFaces，您至少可以了解它們是如何實現它的。

PrimeFaces為響應設置cookie，表示下載已完成。 在客戶端，他們使用窗口間隔功能 ，該功能在單擊下載按鈕時注冊。 此函數以特定間隔檢查提到的cookie。 如果設置了cookie，它將被重置，間隔函數將被取消注冊，並且將調用可用於關閉對話框的回調函數。

有關實現的詳細信息，請參閱PrimeFaces的core.js中的monitorDownload方法和p：fileDownload的實現。

我認為它很容易實現，你可以很好地重用它。 我認為沒有其他更好的解決方案，因為文件下載需要一個完整的頁面請求（而不是ajax請求），所以你不能注冊一個回調函數或類似的東西。