I would like to display a <p:panel> when selecting an item of <p:selectOneRadio>. It works when selecting for the first time, but after the ajax call it stops working.
<p:selectOneRadio id="console" value="#{myBean.membre}">
<f:selectItem itemLabel="a" itemValue="false" />
<f:selectItem itemLabel="b" itemValue="true" />
<p:ajax update="panel2,panel1" />
</p:selectOneRadio>
<p:panel id="panel1" visible="#{myBean.membre == false}"
closable="true" toggleable="true">
<ui:include src="a.xhtml" />
</p:panel>
<p:panel id="panel2" visible="#{myBean.membre == true}"
closable="true" toggleable="true">
<ui:include src="b.xhtml" />
</p:panel>
On PrimeFaces 4.0, I had to remove the closable attributes from the panels before I could toggle the visibility. I also added a form which is always required when working with form fields.
Here is my working solution:
<h:form id="testForm">
<p:selectOneRadio id="console" value="#{myBean.membre}">
<f:selectItem itemLabel="a" itemValue="false" />
<f:selectItem itemLabel="b" itemValue="true" />
<p:ajax update="panel2,panel1" />
</p:selectOneRadio>
<p:panel id="panel1" visible="#{not myBean.membre}" toggleable="true">
test 111
</p:panel>
<p:panel id="panel2" visible="#myBean.membre}" toggleable="true">
test 222
</p:panel>
</h:form>
Why the closable attribute conflicts with the visible attribute I don 't know. It is possible a bug or unplanned for combination.
Related
I am trying to update a <p:chart> upon hitting the submit button but the graph is always staying the same. I googled this and I was told to use an Ajax update command which I was already doing. Here is my Code:
.xhtml
<body>
<ui:define name="content">
<h:form id="chartForm">
<p:growl id="msgs" showDetail="true" />
<p:panel header="Select a Location" style="margin-bottom:10px;">
<h:panelGrid columns="4" cellpadding="5">
<p:outputLabel for="facility" value="Facility: " />
<p:selectOneMenu id="facility" value="#{visualization.facility}" converter="#{facilityConverterBean}" style="width:150px">
<p:ajax event="change" process="#this" partialSubmit="true" listener="#{visualization.onFacilityChange()}" update="component" />
<f:selectItem itemLabel="Select Facility" noSelectionOption="true" />
<f:selectItems value="#{visualization.facilities}" var="facility" itemLabel="#{facility.name}" itemValue="#{facility}" />
</p:selectOneMenu>
<p:outputLabel for="component" value="Components: " />
<p:selectOneMenu id="component" value="#{visualization.component}" converter="#{componentConverterBean}" style="width:150px">
<f:selectItem itemLabel="Select Component" noSelectionOption="true" />
<f:selectItems value="#{visualization.components}" var="comp" itemLabel="#{comp.name}" itemValue="#{comp}" />
</p:selectOneMenu>
<p:outputLabel for="datetimefrom" value="Datetime from" />
<p:calendar id="datetimefrom" value="#{visualization.dateFrom}" pattern="dd/MM/yyyy HH:mm" />
<p:outputLabel for="datetimeto" value="Datetime to" />
<p:calendar id="datetimeto" value="#{visualization.dateTo}" pattern="dd/MM/yyyy HH:mm" />
<h:outputLabel for="recordcount" value="Record count" />
<p:spinner id="recordcount" value="#{visualization.recordCount}" stepFactor="25" />
</h:panelGrid>
<p:separator />
<p:commandButton value="Submit" actionListener="#{visualization.fetchDataRecords()}" update="chartForm:chartTab:lineChartTemperatures" icon="ui-icon-check" />
</p:panel>
<p:tabView id="chartTab">
<p:tab title="Diagramm">
<p:chart id="lineChartTemperatures" type="line" model="#{lineChart.dateModel}" style="margin-bottom: 1px" responsive="true" />
</p:tab>
<p:tab title="DataTable">
<h:panelGrid>
<h:outputText value="....not implemented" />
</h:panelGrid>
</p:tab>
</p:tabView>
</h:form>
</ui:define>
</body>
fetchDataRecords()
public void fetchDataRecords(){
List<BhkwRecord> data = bhkwService.getRecordsFromTo(component.getId(), dateFrom, dateTo);
//System.out.println("Amount of records fetched: " + data.size());
lineChart.updateBhkwChartRuecklauf(data);
}
Method where another series is added to the graph
public void updateBhkwChartRuecklauf(List<BhkwRecord> data) {
//data not used here, just added simulated data to test
LineChartSeries series3 = new LineChartSeries();
series3.setLabel("Series3");
series3.set("2014-01-01 00:10:50", 54);
series3.set("2014-01-01 01:12:50", 20);
series3.set("2014-01-01 04:14:50", 60);
series3.set("2014-01-01 06:17:50", 30);
dateModel.addSeries(series3);
}
So normally, after button hit, the method should add another series of data to the graph and get updated but nothing is happening. I also tried update="#form" which wouldn't work either. Does anyone have an idea what I am doing wrong?
<p:tab title="Diagramm">
<p:outputPanel id="chartPnl>
<p:chart id="lineChartTemperatures" type="line" model="#{lineChart.dateModel}" style="margin-bottom: 1px" responsive="true" />
</p:outputPanel>
</p:tab>
You can try to put chart in another -like outputPanel- component and update it in commandButton.
<p:commandButton value="Submit" actionListener="#{visualization.fetchDataRecords()}" update="chartForm:chartTab:chartPnl" icon="ui-icon-check" />
I am trying to do a page with a few tabs, by using primefaces. But some some selected values are lost while navigating between tabs. Last tab contains 2 selectBooleanCheckboxes and 2 selectOneRadios and one of the selectoneradio grid is rendered according to checkbox value. When user selects among these 4 components and navigates between tabs radio button and check box selected values are lost. I am using #viewScoped at the bean part. For example if the user is viewing the 4th tab and wants to change something from third tab. When user navigates to the third tab and makes change on checkbox or radio button new values and previous values are reset. Form is uploading itself again I think. Why the values are lost?Is there a solution for this? Do I need something like converter?
my .xhtml is:
<h:form id="form">
<p:tabView id="tabPanel" dynamic="true" activeIndex="#{myBean.activeIndex}" cache="false">
<!-- FIRST TAB -->
<p:tab id="person" title="Person">
<h:panelGrid columns="2" cellpadding="10">
<h:outputText value="name" />
<p:inputText value="???USERINFO???" label="Name" />
<p:commandButton value="NEXT" action="#{myBean.nextTab}" update=":form:tabPanel" />
</h:panelGrid>
</p:tab>
<!-- SECOND TAB -->
<p:tab id="adres" title="Address">
<h:panelGrid columns="2" cellpadding="10">
<h:outputText value="Phone" />
<p:inputMask id="phone" value="???USERINFO???" mask="1999999999" required="true" requiredMessage="ERROR AT PHONE NUMBER"/>
<p:commandButton value="NEXT" action="#{myBean.nextTab}" update=":form:tabPanel" />
</h:panelGrid>
</p:tab>
<!-- THIRD TAB -->
<p:tab id="contact" title="Contact">
<h:panelGrid columns="2" cellpadding="10">
<h:panelGrid columns="3" style="margin-bottom:5px" cellpadding="5">
<h:outputText value="My Question: " />
<p:selectBooleanCheckbox value="#{myBean.myCheckBox}" />
<h:outputText value="Yes" />
<h:outputText value="My Second Question:" />
<p:selectBooleanCheckbox value="#{myBean.myCheckBox2}" />
<h:outputText value="No" />
</h:panelGrid>
<h:panelGrid id="panelGrid" columns="3" style="margin-bottom:10px" cellpadding="10">
<p:outputLabel value="My question"/>
<h:outputLabel for="radio"/>
<h:selectOneRadio id="radio" value="#{myBean.radioButton}" required="true" requiredMessage="ERROR">
<f:selectItem itemLabel="Yes" itemValue="Yes"/>
<f:selectItem itemLabel="No" itemValue="No"/>
<f:ajax execute="#this" render="idInfo"/>
</h:selectOneRadio>
</h:panelGrid>
<h:panelGroup id="idInfo">
<h:panelGrid columns="3" rendered="#{myBean.radioButton == 'No'}">
<h:outputText value="Chooses: " />
<h:selectOneRadio id="selectOneRadio" value="#{myBean.type}" layout="pageDirection">
<f:selectItem itemLabel="Choice 1" itemValue="choice1"/>
<f:selectItem itemLabel="Choice 2" itemValue="choice2"/>
<f:selectItem itemLabel="Choice 3" itemValue="choice3"/>
</h:selectOneRadio>
</h:panelGrid>
</h:panelGroup>
</h:panelGrid>
</p:tab>
</p:tabView>
</h:form>
<p:commandButton value="NEXT" action="#{myBean.nextTab}" update=":form:tabPanel" />
Add process to your button's process=":form:tabPanel" so the value is set to the property in backbean.
I need focus specify Id(i.e commandbutton,selectonemenu and text) is not working.I try this below code:
<h:form id="mainForm">
<p:inputText id="name"/>
<p:inputText id="Age"/>
<p:selectOneRadio id="Gender" value="#{employee.gender}" layout="custom">
<f:selectItem itemLabel="Male" itemValue="Male" />
<f:selectItem itemLabel="Female" itemValue="Female" />
</p:selectOneRadio>
<p:commandButton id="clear" value="Press" action="{employee.saveAction}">
<p:focus for="Gender"/>
</p:commandButton>
<p:commandButton id="clear" value="clear"/>
</h:form>
I try focus radio button or id="clear" commandbutton or text button is not focus.
Note: I tried context="specifyid" replace for it also not working.
I don't know why you put <p:focus> inside <p:commandButton>. Maybe this is causing problems. According to the docs you can put the tag direct into a <h:form> and set focus on your <p:selectOneRadio>:
<h:form id="mainForm">
<p:focus for="Gender" />
<p:inputText id="name" />
<p:inputText id="Age" />
<p:selectOneRadio id="Gender" value="#{employee.gender}" layout="custom">
<f:selectItem itemLabel="Male" itemValue="Male" />
<f:selectItem itemLabel="Female" itemValue="Female" />
</p:selectOneRadio>
<p:commandButton id="clear" value="Press" action="{employee.saveAction}" />
<p:commandButton id="clear" value="clear" />
</h:form>
i am beginner in JSF ,i have a problem with selectonemenu item.When i choose the an item ,for example ' FirstLabel',outputpanel should be shown.However ,selectone menu does not update my choice.I use primefaces 3.1 library.How can i solve this problem.Thanks for helps.
<p:selectOneMenu value="#{denemeView.str}" effect="fold" editable="true" >
<f:selectItem itemLabel="Please choose!." itemValue="" />
<f:selectItem itemLabel="FirstLabel" itemValue="1" />
<f:selectItem itemLabel="SecondLabel" itemValue="2" />
<p:ajax process="#this" update=":Form2:panel1"/>
<p:ajax process="#this" update=":Form2:panel2"/>
</p:selectOneMenu>
</p:outputPanel>
<p:outputPanel id="panel1" rendered="#{denemeView.str=='1'}">
<h:outputText value="Output: * " />
<p:inputText id="out" value="#{denemeView.islem}" />
</p:outputPanel>
<p:outputPanel id="panel2" rendered="#{denemeView.str=='2'}">
<h:outputText value="True choice! " />
</p:outputPanel>
If a JSF component has rendered="false" set then it's not redered (the component object is not present in the object tree) and cannot be updated using <p:ajax update="someId"/> or <f:ajax render="someId"/>. What you need to do is wrap these two panels in an outer panel and update that one. Something like this:
<p:ajax process="#this" update="outerPanel"/>
...
<p:outputPanel id="outerPanel">
<p:outputPanel id="panel1" rendered="#{denemeView.str=='1'}">
<h:outputText value="Output: * " />
<p:inputText id="out" value="#{denemeView.islem}" />
</p:outputPanel>
<p:outputPanel id="panel2" rendered="#{denemeView.str=='2'}">
<h:outputText value="True choice! " />
</p:outputPanel>
</p:outputPanel>
See here for a similar problem.
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?
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" />