PrimeFaces dialogue showing the wrong information - jsf

Question

I have a page with 2 dropdown lists that fill a data-table (depending on the choice made in the dropdown lists). The data table contains check-boxes for selecting multiple lines and then opening a dialogue that shows information based on the selected lines. the problem is: the first time I click on the button to open the dialogue it's empty, when I change the content of the dropdown lists and open the dialogue it will show the information of the previous selection not the one i just made and it'll stay that way until i change the dropdown list and so on... the dialogue always shows the information of the previous selection before changing the choice made in the dropdown list.
the page:
<h:form id="form">
<f:view>
<p:growl id="msgs" showDetail="true" />
<p:layout style="min-width:300px;min-height:200px;" id="layout">
<p:layoutUnit position="west" resizable="true" size="200" minSize="40" maxSize="300">
<!-- _______________________________________start drop down________________________________________________________ -->
<h:panelGrid columns="1" cellpadding="5">
<p:selectOneMenu id="Item" value="#{ThemeBean.idItem}">
<f:selectItem itemLabel="Select un Item " itemValue="" />
<f:selectItems value="#{ItemBean.listItemsUser}" var="utilisateur" />
<p:ajax listener="#{ThemeBean.handleCityChange}" update="suburbs" />
</p:selectOneMenu>
<p:selectOneMenu id="suburbs" value="#{ReponseBean.idTheme}">
<f:selectItem itemLabel="Select un Theme" itemValue="" />
<f:selectItems value="#{ThemeBean.suburbs}" />
<p:ajax listener="#{ReponseBean.handleCityChange_Ecart}" update=":form:dropArea" />
</p:selectOneMenu>
</h:panelGrid>
<p:separator />
</p:layoutUnit>
<!-- _______________________________________end drop down________________________________________________________ -->
<p:layoutUnit position="center">
<p:outputPanel id="dropArea">
<p:dataTable id="dt1" var="car"
value="#{ReponseBean.listPartheme_ecart}"
rendered="#{not empty ReponseBean.listPartheme_ecart}"
rowKey="#{car.id}" editable="true"
selection="#{EcartBean.selectedCars}">
<p:column selectionMode="multiple" style="width:18px" />
<p:column headerText="Questions">
<h:outputText value="#{car.q1.text}" />
</p:column>
<p:column headerText="Reponse">
<h:outputText value="#{car.rep}" />
</p:column>
<f:facet name="footer">
<p:commandButton id="multiViewButton" value="Ajouter Ecart" icon="ui-icon-search"
update=":form:multiDialog :form:displayMulti" oncomplete="multiCarDialog.show()"/>
</f:facet>
</p:dataTable>
<!-- ________________________________________dialogue________________________________________________ -->
<p:dialog id="multiDialog" header="Ajout Ecart" widgetVar="multiCarDialog" height="300" showEffect="fade">
<p:dataList id="displayMulti" value="#{EcartBean.selectedCars}" var="selectedCare">
#{selectedCare.q1.text} (#{selectedCare.rep})
</p:dataList>
<p:messages />
<h:panelGrid columns="3" cellpadding="5">
<h:outputLabel value="Niveau Ecart" />
<p:selectOneMenu id="idUtilisateur" value="#{EcartBean.idNiveauAudit}">
<f:selectItems value="#{NiveauEcartBean.listNiveauSelect}" var="nivecart" />
</p:selectOneMenu>
<p:message for="idUtilisateur" />
<h:outputLabel value="Constatation" id="Constatation" />
<h:inputText value="#{EcartBean.consta}" />
<p:message for="Constatation" />
<p:commandButton icon="ui-icon-disk" value="Ajouter" id="ViewButton" action="#{EcartBean.save}"
oncomplete="multiCarDialog.hide();">
</p:commandButton>
</h:panelGrid>
</p:dialog>
</p:outputPanel>
</p:layoutUnit>
</p:layout>
</f:view>
</h:form>
the methode ThemeBean.handleCityChange :
public void handleCityChange() {
qu = respQue.lister_Ques(idItem);
if (qu != null) {
List<SelectItem> listuti = new ArrayList<SelectItem>();
List<Theme> list = resp.lister_Par_Thme(qu.getId());
for (Theme p : list) {
listuti.add(new SelectItem(p.getId(), p.getLibelle()));
}
this.setSuburbs(listuti);
} else {
System.out.println("erreur");
}
}
ReponseBean.handleCityChange_Ecart :
public void handleCityChange_Ecart() {
listPartheme_ecart= new ArrayList<Reponse>();
System.out.println("taiile avant "+listPartheme_ecart.size());
List<Reponse> lr = respQ.findByTheme_ecart(idTheme);
System.out.println(idTheme);
for (int i = 0; i < lr.size(); i++) {
if (lr.get(i).getAudit().getId() == aud.getId())
listPartheme_ecart.add(lr.get(i));
}
}
I should mention that in the console i see the write information when i open the dialogue, it just doesn't show write away on the dialogue.
thank you for your time and help.
I am updating this post to say that i finaly solved the probleme of filling the popup
i put the dialogue in a new form like this:
</h:form>
<!-- ________________________________________dialogue________________________________________________ -->
<h:form id="hh" >
<p:dialog id="multiDialog" header="Ajout Ecart" widgetVar="multiCarDialog" height="300" showEffect="fade">
<p:dataList id="displayMulti" value="#{EcartBean.selectedCars}" var="selectedCare">
#{selectedCare.q1.text} (#{selectedCare.rep})
</p:dataList>
<p:messages />
<h:panelGrid columns="3" cellpadding="5">
<h:outputLabel value="Niveau Ecart" />
<p:selectOneMenu id="idUtilisateur" value="#{EcartBean.idNiveauAudit}">
<f:selectItems value="#{NiveauEcartBean.listNiveauSelect}" var="nivecart" />
</p:selectOneMenu>
<p:message for="idUtilisateur" />
<h:outputLabel value="Constatation" id="Constatation" />
<h:inputText value="#{EcartBean.consta}" />
<p:message for="Constatation" />
<p:commandButton icon="ui-icon-disk" value="Ajouter" action="#{EcartBean.save}" id="ViewButton" oncomplete="multiCarDialog.hide();" />
</h:panelGrid>
</p:dialog>
</h:form>
i have now one little probleme: the commandButton in the dialogue does not fire the methode save i have tried
<p:commandButton icon="ui-icon-disk" value="Ajouter" action="#{EcartBean.save}" id="ViewButton" oncomplete="multiCarDialog.hide();" />
and
<p:commandButton icon="ui-icon-disk" value="Ajouter" actionListener="#{EcartBean.save}" id="ViewButton" oncomplete="multiCarDialog.hide();" />
and
<p:commandButton icon="ui-icon-disk" value="Ajouter" id="ViewButton" oncomplete="multiCarDialog.hide();" >
<f:actionListener binding="#{EcartBean.save}"/>
</p:commandButton>
but nothing :( . where have gone wrong?

Answer 1

As per the documentation of <p:ajax>, listener is triggered only on partial request which I don't see happening in the code that you pasted. Use event="valueChange" to trigger a partial request which would result the current update to be shown in dialog.
<p:ajax event="valueChange" listener="#{ThemeBean.handleCityChange}" update="suburbs" />
<p:ajax event="valueChange" listener="#{ReponseBean.handleCityChange_Ecart}" update=":form:dropArea" />