How to Trigger Ajax To Load Nested Dropdowns After Loading A Form?

Question

I have a button to display an edit dialog form with a selectOneMenu that holds prefix number values in it and, after selecting one of those prefix values, three selectCheckboxMenu are loaded with employees data. This is workinkg fine.

<p:outputLabel value="prefix" for="prefixo" />
<h:panelGroup>
    <p:selectOneMenu id="prefixo" value="#{demandasController.selected.prefixo}" converter="prefixosConverter" filter="true" filterMatchMode="contains">
        <f:selectItem itemLabel="#{adeBundle.SelectOneMessage}" itemValue="#{null}" />
        <f:selectItems value="#{prefixosController.items}"
                       var="prefixoItem"
                       itemValue="#{prefixoItem}"
                       itemLabel="#{prefixoItem.prefixo} - #{prefixoItem.nomePrefixo}"
                       />
        <p:ajax event="valueChange" update="uorPosCollection uorPosCollection1 uorPosCollection2" listener="#{demandasController.changePrefixo}"/>
    </p:selectOneMenu>
</h:panelGroup>

<p:outputLabel value="Executivo(s)" for="uorPosCollection" />
<p:selectCheckboxMenu id="uorPosCollection" value="#{demandasController.selected.uorPosCollection}" label="Executivo(s)" multiple="true" converter="uorPosConverter" filter="true" filterMatchMode="contains" >
    <f:selectItems value="#{demandasController.availableExecutivos}"
                   var="uorPosCollectionItem"
                   itemValue="#{uorPosCollectionItem}"
                   itemLabel="#{uorPosCollectionItem.matricula} - #{uorPosCollectionItem.nome} (#{uorPosCollectionItem.prefixo.prefixo})" />
</p:selectCheckboxMenu>
<!-- analogous code ommited -->

The Listener:

public void changePrefixo(AjaxBehaviorEvent event) {
    availableExecutivos = LoadExecutivosListCombo(super.getSelected().getPrefixo());
    //analogous methods ommited
}

The methods to load the employees lists:

private List<UorPos> LoadExecutivosListCombo(Prefixos prefixos) {
    List<SelectItem> listExecutivosCombo = new ArrayList<>();
    List<UorPos> listExecutivos = uorPosFacade.findUorPosExecutivosByPrefixo(prefixos);
    for (int i = 0; i < listExecutivos.size(); i++) {
        listExecutivosCombo.add(new SelectItem(listExecutivos.get(i)));
    }
    return listExecutivos;
}

//analagous methods ommited

Native queries to retrieve database:

public List<UorPos> findUorPosExecutivosByPrefixo(Prefixos prefixo) {
    return (List<UorPos>) getEntityManager().createNativeQuery("SELECT * FROM UorPos WHERE prefixo=9951", UorPos.class).setParameter(1, prefixo.getPrefixo()).getResultList();
}
//analagous methods ommited

But when editing a register that already has prefix and employee values (saved earlier by some user), the 3 selectCheckboxMenu are loaded showing (undesired) id's entity class name on its labels value and empty dropdowns:

e.g.: in the figure above, when the edit form was loaded, it shows the values saved earlier by some user: the prefix 9882 (displayed as expected) and the three (empty) dropdowns for employees (displayed with the undesired class names in it). If I select a different value than 9882, the dropdowns are (ajax) filled as expected and if I select 9882 again, the employees are displayed as expected (without the class names):

I'm trying to resolve it by activating the ajax as below, but don't know how to call it in the function:

<p:dialog onShow="CallAjaxFunction()" modal="true" >

        <script>
        function CallAjaxFunction() {
        <!-- how to call the ajax here ? -->
            alert("displaying after form was loaded.")        
        }
        </script>
   ...
</p:dialog>

Does anyone knows how to trigger ajax to load nested dropdowns after loading a form?

Or if someone has any other solution to display the values in the labels (without the class name) and automattically load the nested dropdowns, I appreciate that.

Thanks in advance.

Call `demandasController.changePrefixo` upfront with the value that is already known for the fist input? That is what would be/is done when the ajax call is made. And try for one input fist, it overly complicates the code you post. — Kukeltje, Jul 10 '18 at 22:19
[kukeltje](https://stackoverflow.com/users/4478047/kukeltje), I've updated the question for better understanding. — jMarcel, Jul 11 '18 at 16:12

score 0 · Accepted Answer · answered Jul 13 '18 at 21:26

After researching, I've used the listener to update the combos, using for this the open ajax event in the dialog:

<p:dialog onShow="PF('prefixowv').selectValue(':selected').click();" update= DemandasEditForm:uorPosCollection DemandasEditForm:uorPosCollection1 DemandasEditForm:uorPosCollection2 />

And changed the ajax event to selectItem, instead of valueChange:

<p:selectOneMenu id="prefixo" value="#{demandasController.selected.prefixo}" converter="prefixosConverter" filter="true" filterMatchMode="contains">
    <f:selectItem itemLabel="#{adeBundle.SelectOneMessage}" itemValue="#{null}" />
    <f:selectItems value="#{prefixosController.items}"
                   var="prefixoItem"
                   itemValue="#{prefixoItem}"
                   itemLabel="#{prefixoItem.prefixo} - #{prefixoItem.nomePrefixo}"
                   />
    <p:ajax event="selectItem" update="uorPosCollection uorPosCollection1 uorPosCollection2" listener="#{demandasController.changePrefixo}"/>
</p:selectOneMenu>

Regards,

How to Trigger Ajax To Load Nested Dropdowns After Loading A Form?

1 Answers1