f:ajax listener fails within dynamically added h:selectOneMenu

Question

I'm dynamically adding a h:selectOneMenu to the page. But the listener method for f:ajax is not invoked for selectItems but it does work if h:selectOneMenu had been added to the page from the start (not dynamically added using update attribute). My code as follows:

(Corrected after @Daniel's suggestion)

    <h:commandButton value="Watch">
          <f:ajax render="deptsSelBox"/>
          <f:setPropertyActionListener value="#{true}" target="#{listRetriever.allow}" />
    </h:commandButton>  

    <h:panelGroup id="deptsSelBox">
        <h:selectOneMenu id="deptsSel" rendered="#{listRetriever.allow}" value="#{listRetriever.reqId}">  
            <f:selectItems value="#{listRetriever.list}" />
            <f:ajax listener="#{listRetriever.retrieve()}" execute="deptsSel" />
        </h:selectOneMenu>
    </h:panelGroup>  

Answer 1

h:commandButton got no update attribute, Looks like a mix of primefaces and pure JSF (update attribute is from p:commandButton)

Add f:ajax to your commandButton and use render attribute

<h:commandButton value="Watch">
      <f:ajax render="deptsSelBox"/>
      <f:setPropertyActionListener value="#{true}" target="#{listRetriever.allow}" />
</h:commandButton>   

also fix your selection ajax to this

<f:ajax listener="#{listRetriever.retrieve}" update="deptsSel"/>

and try change scope from request to view

another approach would be to set the value of allow inside a method , like this (you can also send it as a parameter too)

<h:commandButton value="Watch" action="listRetriever.updateAllow">
      <f:ajax render="deptsSelBox"/>
</h:commandButton>  


public void updateAllow(){
     allow = true;
}