选择下拉菜单的改变事件中调用ajax请求前的确认对话框

Question

我有一个PrimeFaces的SelectOneMenu对象，下面有一个面板，根据SelectOneMenu的值有多个面板条件渲染。因此，在SelectOneMenu中包含了一个PrimeFaces p:ajax请求。Ajax请求正常触发，并且面板也能够正常显示，没有任何问题。

但现在我想在更改SelectOneMenu之前添加确认对话框，以便在继续进行Ajax请求之前警告用户他们在面板中输入的任何值都将丢失。因此，我在p:ajax的onstart事件中添加了一个JavaScript函数，其中包含JavaScript confirm。问题是当用户选择“取消”按钮时，Ajax不会触发，但我的SelectOneMenu已经选择了新值。我考虑在单击事件中调用Ajax请求。但是，PrimeFaces的SelectOneMenu没有单击事件。

JSF代码：

<p:selectOneMenu id="methodOfId" value="#{cc.attrs.comboBoxValue}">
<f:selectItem itemValue="-1" itemLabel=""/>
<f:selectItems value="#{cc.attrs.comboBoxOptions}" var="methodOfId" itemValue="#{methodOfId.id}" itemLabel="#{methodOfId.name}"/>
<f:param name="cid" value="#{cc.attrs.beanConversationID}" />
<p:ajax update="dynamicPanels" process="@this" onstart="return confirmMethodOfIdChange()"/>
</p:selectOneMenu>

<p:panel id="dynamicPanels">
    <ui:include src="#{cc.attrs.panelSrc}" />
</p:panel>

Javascript 代码：

function confirmMethodOfIdChange() {
var userResponse = confirm("Are you sure you want to change your selection?");
     return userResponse;
}

现在我该如何更改SelectOneMenu以显示其旧值？我甚至考虑在jsf SelectOneMenu中使用f:ajax和下面的javascript代码。它会要求确认，但是当我在确认框中点击“确定”时，它不执行ajax请求。

function confirmMethodOfIdChange(data) {
    alert("inside confirm");    
var ajaxStatus = data.status; // Can be "begin", "success" and "complete"

if (ajaxStatus == 'begin'){
    var userResponse = confirm("Are you sure you want to change your selection?");
    if (userResponse) {
        return true;
    } else {
        return false;
    }
}

return true;

}

- jsfnewbie

Answer 1

你可以使用<p:confirmDialog>组件并将其与selectOneMenu widgetVar结合使用。只需删除<p:ajax>并将您的操作放置在确认对话框中的“是”按钮上。如果您点击“是”，则会执行操作。如果选择“否”，则更改将被恢复。

<p:selectOneMenu widgetVar="ps" onchange="confirm.show()">
    <f:selectItem itemValue="1" itemLabel="1"/>
    <f:selectItem itemValue="2" itemLabel="2"/>
    <f:selectItem itemValue="3" itemLabel="3"/>
</p:selectOneMenu>

<p:confirmDialog widgetVar="confirm" message="Are you sure you want to change your selection?" header="WARN!" severity="alert">
    <p:commandButton value="Yes" process="@form" update="myform" oncomplete="confirm.hide()" />
    <p:commandButton value="No" type="button" 
        onclick="ps.selectValue(ps.preShowValue.val());confirm.hide()" />
</p:confirmDialog>

- bhdrk

Answer 2

补充 @bhdrk 的答案:

不要忘记调用 PF('<widget name>') 来获取你的小部件： onchange="PF('confirm').show()"，onclick="PF('ps').selectValue(PF('ps').preShowValue.val());PF('confirm').hide()" 等等。

- lolo101