javascript - 调用 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，表明下载已完成。在客户端，他们使用 window interval function单击下载按钮时会注册该文件。该函数以特定的时间间隔检查提到的 cookie。如果设置了 cookie，它将被重置，间隔函数将被取消注册，并且将调用一个回调函数，您可以使用它来关闭对话框。

有关实现细节，请查看 PrimeFaces 中的 MonitorDownload 方法 core.js以及实现p:fileDownload 。

我认为它很容易实现，并且可以很好地重用它。我认为没有其他更好的解决方案，因为文件下载需要全页请求(而不是ajax请求)，所以你不能注册回调函数或类似的东西。