javascript – 在SelectOneMenu的更改事件上调用ajax请求之前的确认对话框

我有一个主要的SelectOneMenu对象和一个面板,下面有一个基于SelectOneMenu值有条件地渲染的多个面板.所以我在SelectOneMenu中包含了一个主要的p：ajax请求. ajax请求正常触发,面板显示正常,没有任何问题.

但现在我想在更改SelectOneMenu之前添加一个确认,继续执行ajax请求,警告他们在面板中输入的任何值都将丢失.所以我添加了一个p：ajax的onstart事件,并包含了一个javascript函数,它有javascript确认.问题是当用户选择“取消”按钮时,ajax没有触发但我的SelectOneMenu选择了新值.我想在click事件中调用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代码.它要求确认,但我在确认框中点击OK,它不执行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;

}

解决方法:

你可以使用< 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>