在SelectOneMenu的更改事件上調用ajax請求之前的確認對話框

Question

我有一個主要的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;

}

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>

Answer 2

詳細解釋@bhdrk答案：

不要忘記調用PF（'<widget name>'）來獲取你的小部件： onchange="PF('confirm').show()" ， onclick="PF('ps').selectValue(PF('ps').preShowValue.val());PF('confirm').hide()"等