是否可以使用Primefaces 3.3自定义对话框取消Ajax-Requests?

时间:2012-08-21 14:30:04

标签: javascript jquery jsf-2 primefaces

如果用户更改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>

1 个答案:

答案 0 :(得分:3)

您可以使用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请求。你只是在确认之前不会调用它。