如果用户更改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>
答案 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请求。你只是在确认之前不会调用它。