是否可以使用 Primefaces 3.3 的自定义对话框取消 Ajax 请求？

Question

如果用户更改selectOneMenu 中的值，我们希望显示一个确认对话框。这对浏览器原生的confirm() 方法非常有效，因为它会阻塞直到用户做出决定。是否有一个优雅的（首选客户端）解决方案可以使用 primefaces 对话框执行此操作，以便不同浏览器的外观保持一致？

目前的解决方案：

<p:selectOneMenu id="som" value="#{foo.item}">
    <f:selectItems value="#{foo.items}" var="i" itemLabel="#{i.name}" itemValue="#{i.value}" />
    <p:ajax event="change" onstart="return confirmChange()" />
</p:selectOneMenu>

<script type="text/javascript">
    function confirmChange() {
        return confirm("O'RLY?");
    }
</script>

Answer 1

您可以使用 PrimeFaces 的 <p:confirmDialog> 甚至只是 <p:dialog>。

<p:selectOneMenu id="som" value="#{foo.item}" onchange="confirm.show()">
    <f:selectItems value="#{foo.items}" var="i" itemLabel="#{i.name}" itemValue="#{i.value}" />
</p:selectOneMenu>
<p:confirmDialog widgetVar="confirm" message="ORLY?" header="Confirm" severity="alert">
    <p:commandButton value="Yes" action="#{bean.submit}" process="som" oncomplete="confirm.hide()" />  
    <p:commandButton value="No" type="button" onclick="confirm.hide()" />
</p:confirmDialog> 

在#{bean.submit} 中执行确认工作。如有必要，您可以使用标记文件或复合组件将这一切抽象出来，以便更好地重复使用。

<p:selectOneMenu id="som" value="#{foo.item}" onchange="confirm.show()">
    <f:selectItems value="#{foo.items}" var="i" itemLabel="#{i.name}" itemValue="#{i.value}" />
</p:selectOneMenu>
<my:confirmDialog id="confirm" message="ORLY?" action="#{bean.submit}" process="som" />

请注意，这里没有“取消”ajax 请求的方法。只是在真正确认之前不要调用它。