Question

I’m using Chosen jQuery plugin in a page.

I have a dropdown which on selection calls backbean function and popualtes the values of another dropdown using f:ajax so something like:

<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>

Problem is that on event completion drop2 gets re-rendered and i still have the old empty chosen dropdown appearing next to it like below:

I tried adding :

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

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

but that just attaches chosen to the updated drop2. the old chosen dropdown is still there. Can someone tell me how to deal with this situation? Thanks

possible solution?

    <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>

Answer 1

Try this : wrap the drop2 with a h:panelGroup give it an Id and render it

Instead of render="drop2" do render="drop2_wrapper"

that should eliminate duplicates