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>
Related
I have a select and I want that when the user doesn't select anything it prints an error. So I use validator and my xhtml code is:
<p:selectOneMenu id="students"
value="#{studentsBean.selectedStudent}"
converter="studentsConverter" effect="fold">
<f:selectItem itemLabel="Select..." itemValue="" />
<f:selectItems value="#{studentsBean.studentsList}"
var="student" itemValue="#{student}"
itemLabel="#{student.name}" />
<p:ajax event="change" update="students" process="#this" />
<f:validator validatorId="studentNotNull" />
<f:ajax execute="#this" render="studentPanel"/>
</p:selectOneMenu>
<h:panelGroup id="studentPane">
<h:message for="students" style="color:red" />
</h:panelGroup>
The problem is that if I don't select anythin it print me "The students is not selected" while I choice an student the label it doesn't disappear.
the validatior works and I don't think I must write the code.
Anyone can help?
Can you try this
<p:selectOneMenu id="students"
value="#{studentsBean.selectedStudent}"
converter="studentsConverter" effect="fold"
required="true" requiredMessage="Student is required">
<f:selectItem itemLabel="Select..." noSelectionOption="true"/>
<f:selectItems value="#{studentsBean.studentsList}"
var="student"
itemValue="#{student}"
itemLabel="#{student.name}" />
</p:selectOneMenu>
Add in your form
<p:growl id="msgs" showDetail="true" life="3000"/>
and of course, update msgs in form submit
I'm using 6.1 version of PrimeFaces community. With the below code that is copied from PrimeFaces selectoneradio page, I tried to send wihtout any selection and it is not giving any error. When I upgrade the version to 7.0, it gives error, required true is working, but I have to stay on 6.1 version.
On PrimeFaces 6.1, is there any bug for this situtaion? Or is there a different usage to do my purpose on PrimeFaces 6.1?
<h3>Custom Layout</h3>
<p:outputPanel id="customPanel" style="margin-bottom:10px">
<p:selectOneRadio id="customRadio" layout="custom" required="true">
<f:selectItem itemLabel="Red" itemValue="Red" />
<f:selectItem itemLabel="Green" itemValue="Green" />
<f:selectItem itemLabel="Blue" itemValue="Blue" />
</p:selectOneRadio>
<h:panelGrid columns="3" cellpadding="5">
<p:radioButton id="opt1" for="customRadio" itemIndex="0" required="true" />
<h:outputLabel for="opt1" value="Red" />
<p:spinner />
<p:radioButton id="opt2" for="customRadio" itemIndex="1" required="true"/>
<h:outputLabel for="opt2" value="Green" />
<p:inputText />
<p:radioButton id="opt3" for="customRadio" itemIndex="2" required="true"/>
<h:outputLabel for="opt3" value="Blue" />
<p:calendar />
</h:panelGrid>
</p:outputPanel>
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 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.
I'm trying to associate a label tag with my dropdown menu to make it accessible to screen readers. I've noticed that when using p:selectOneMenu primefaces generates an input element that should not be there. When applying p:outputLabel, it appears to work fine (ie you click on the label text and focus moves to the dropdown menu). However it turns out that the focus is in fact moving to the input element and the select element is not keyboard accessible (tabindex="-1"). Here's an example taken from the primefaces website:
http://www.primefaces.org/showcase/ui/input/oneMenu.xhtml
<h:form>
<p:messages autoUpdate="true" />
<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
<p:outputLabel for="console" value="Basic:" />
<p:selectOneMenu id="console" value="#{selectOneMenuView.console}" style="width:125px">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
<f:selectItem itemLabel="PS4" itemValue="PS4" />
<f:selectItem itemLabel="Wii U" itemValue="Wii U" />
</p:selectOneMenu>
<p:outputLabel for="car" value="Grouping: " />
<p:selectOneMenu id="car" value="#{selectOneMenuView.car}">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItems value="#{selectOneMenuView.cars}" />
</p:selectOneMenu>
<p:outputLabel for="city" value="Editable: " />
<p:selectOneMenu id="city" value="#{selectOneMenuView.city}" effect="fold" editable="true">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItems value="#{selectOneMenuView.cities}" />
</p:selectOneMenu>
<p:outputLabel for="advanced" value="Advanced:" />
<p:selectOneMenu id="advanced" value="#{selectOneMenuView.theme}" converter="themeConverter" panelStyle="width:180px"
effect="fade" var="t" style="width:160px" filter="true" filterMatchMode="startsWith">
<f:selectItems value="#{selectOneMenuView.themes}" var="theme" itemLabel="#{theme.displayName}" itemValue="#{theme}" />
<p:column style="width:10%">
<h:outputText styleClass="ui-theme ui-theme-#{t.name}" />
</p:column>
<p:column>
<h:outputText value="#{t.displayName}" />
</p:column>
</p:selectOneMenu>
</h:panelGrid>
<p:commandButton value="Submit" update="display" oncomplete="PF('dlg').show()" icon="ui-icon-check" />
<p:dialog header="Values" modal="true" showEffect="bounce" widgetVar="dlg" resizable="false">
<p:panelGrid columns="2" id="display" columnClasses="label,value">
<h:outputText value="Basic:" />
<h:outputText value="#{selectOneMenuView.console}" />
<h:outputText value="Grouping:" />
<h:outputText value="#{selectOneMenuView.car}" />
<h:outputText value="Editable" />
<h:outputText value="#{selectOneMenuView.city}" />
<h:outputText value="Advanced:" />
<h:outputText value="#{selectOneMenuView.theme.displayName}" />
</p:panelGrid>
</p:dialog>
When you look at the page with just the html loaded, you can see each p:selectOneMenu generates an input as well as a select.
<td>
<label id="j_idt88:j_idt91" class="ui-outputlabel ui-widget" for="j_idt88:console_focus">Basic:</label>
</td>
<div id="j_idt88:console" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all" style="width:125px">
<div class="ui-helper-hidden-accessible">
<input id="j_idt88:console_focus" name="j_idt88:console_focus" type="text" autocomplete="off">
</div>
<div class="ui-helper-hidden-accessible">
<select id="j_idt88:console_input" name="j_idt88:console_input" tabindex="-1" data-p-label="Basic" data-p-hl="onemenu">
<option value="">Select One</option><option value="Xbox One">Xbox One</option>
<option value="PS4">PS4</option>
<option value="Wii U">Wii U</option>
</select>
</div>
<label id="j_idt88:console_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all">Select One</label>
<div class="ui-selectonemenu-trigger ui-state-default ui-corner-right">
<span class="ui-icon ui-icon-triangle-1-s ui-c"></span>
</div>
</div>
I'm looking to have the dropdown menu to behave like the JSF one h:selectOneMenu (when it comes to accessibility). Specific to the example, I want the "Basic:" label associated with it's dropdown menu so that when you click "Basic" focus moves to the dropdown menu. I also want a screen reader to actually treat it as a select element rather than an input element. So far I can't find a way to do this because of that input element that's generated. I'm currently using Primefaces 5.2. Does anyone know a way to prevent this input element from being generated?
I gave up on the p:selectOneMenu for two reasons : it is not accessible and it is a pain to use on a mobile device because it doesn't bring the native control picker (the "spinning wheel" on the iPad for instance).
Instead I use the h:selectOneMenu customized with something like :
<h:selectOneMenu
styleClass="ui-inputfield ui-widget ui-state-default ui-corner-all #{component.valid ? '' : 'ui-state-error'}"
onmouseover="$(this).addClass('ui-state-active')"
onmouseout="$(this).removeClass('ui-state-active')"
onfocus="$(this).addClass('ui-state-active ui-state-focus')"
onblur="$(this).removeClass('ui-state-active ui-state-focus')"/>
It doesn't look that bad, it is accessible and it works well with mobile device.