1

ページでChosenjQueryプラグインを使用しています。

選択時にbackbean関数を呼び出し、f：ajaxを使用して別のドロップダウンの値を入力するドロップダウンがあります。

<h:selectOneListbox id="drop1"
                   value="#{myBean.drop1Value}" 
                   styleClass="chzn-select">
      <f:ajax event="valueChange" listener="#{myBean.doSomething}"
                     render="drop2"/>
      <f:selectItems value="#{myBean.drop1Values}" />
</h:selectOneListbox>

<h:selectOneListbox id="drop2" 
                    value="#{myBean.drop2Value}" 
                    styleClass="chzn-select">
      <f:selectItems value="#{myBean.drop2Values}" />
</h:selectOneListbox>

問題は、イベントが完了すると、drop2が再レンダリングされ、以下のように、選択した古い空のドロップダウンが横に表示されることです。 ここに画像の説明を入力してください

追加してみました：

   <f:ajax event="valueChange" listener="do something"
                     render="drop2" onevent="updateDropdown" />

   function updateDropdown(event) {
      if(event.status == 'success'){
          $('.chzn-select').chosen();
      }
   }

しかし、それは更新されたdrop2に選択されたものをアタッチするだけです。古い選択されたドロップダウンはまだそこにあります。誰かがこの状況に対処する方法を教えてもらえますか？ありがとう

可能な解決策？

    <script>
            function updateDropDowns(event){
                if(event.status == 'success'){

                    //this line removes the previous Chosen dropdown 
                    //the problem was that when the drop2 was being updated by f:ajax render
                    // i would end up with two Chosen Divs so removing the old div before 
                    //reattaching Chosen to select component seems to do good and eliminate duplicated 
                    //chosen dropdowns!

                    $('div [id$="drop2_chzn"]').remove();
                    //this lines attaches Chosen to the updates plugin
                    $('.chzn-select').chosen();
                }
            }
        </script>
4

1 に答える 1

0

これを試してください：drop2をh:panelGroupIDでラップし、レンダリングします

render="drop2" する代わりにrender="drop2_wrapper"

重複を排除する必要があります

于 2012-11-13T11:33:16.430 に答える