JSF SelectOneMenu onchange、onsubmit cancel resetの値

Question

JSF SelectOneMenuでは、私はajaxイベントonchangeを持ち、確認の質問をonsubmitして、ユーザーが変更を中止すると、SelectOneMenuの値を元の値に戻す方法を教えてください？

<h:selectOneMenu value="#{bean.selectedFruit}"> 
    <f:selectItems value="#{bean.fruits}"/> 
    <a:support event="onchange" onsubmit="if(!confirm('Are you sure?'))return false;}" action="#{bean.loadFruitStats}" rerender="body"/> 
</h:selectOneMenu> 

ユーザーが確認ダイアログで「いいえ」をクリックすると、したがって、上記の例で、アクションが呼び出されていない、と再レンダリングが呼び出されないので、SelctOneMenuが更新され、「果物」の名前の上にある、ありません元のもの（果物の名前と果物の統計情報は一致しません）。それらを同期させるにはどうすればよいですか？

Answer 1

h:selectOneMenuは、javascriptの助けを借りて元の値に戻すことができます。

1. まずあなたがidh:selectOneMenuにを定義する必要があります。例えば

   <h:selectOneMenu id="selFruitId"...> 
   

2. は以下を追加します（自明）JavaスクリプトJSFページへ

   var currentValue; 
   function saveCurrentValue(){ 
       //get html select element 
       var element=document.getElementById("form:selFruitId"); 
       //saves currently selected value 
       currentValue=element.value; 
   } 
   
   function areYouSure(){ 
       if(!confirm('Are you sure?')){ 
        //if canceled, restores previously saved value 
        document.getElementById("form:selFruitId").value=currentValue; 
        return false; 
        } 
   } 
   

3. ユーザーがマウスを（使用して変化に選択された値をしようとしたとき、あなたは瞬間を傍受する必要がありますonclickイベント）またはキーボード（onkeypressイベント、たとえば、上下カーソルキーまたはその他のキー）とを保存して、後で値を選択するとが表示されます。

   <h:selectOneMenu id="selFruitId" 
          onclick="saveCurrentValue()" onkeypress="saveCurrentValue()"...> 
   

4. はそして、最終的には、AJAXを実行する前に、あなたは、キャンセルした場合、h:selectOneMenuに戻って保存（元）の値を復元しますfunction areYouSure()を呼び出す必要があります。

   <h:selectOneMenu value="#{bean.selectedFruit}" id="selFruitId" 
          onclick="saveCurrentValue()" onkeypress="saveCurrentValue()"> 
       <f:selectItems value="#{bean.fruits}"/> 
       <a:support event="onchange" onsubmit="areYouSure()" action="#{bean.loadFruitStats}" rerender="body"/> 
   </h:selectOneMenu>