<h:selectOneMenu> in jsf does not display any value in google chrome - java

<h:selectOneMenu class="medium" id="state" value="#{locationDataBean.stateSelected}" required="true" requiredMessage="Select State">
<f:selectItem itemLabel="Select State" itemValue="-1"/>
<f:selectItems value="#{systemResultViewUtil.stateList}"/>
<a4j:ajax event="change" listener="#{locationServiceBean.retrieveStateDetails()}" render="district,taluka,centerNameList1,stateMsg"/>
</h:selectOneMenu>
<h:message for="state" style="color: red" id="stateMsg"/>
This is the JSF tag that i have been using and the value="#{locationDataBean.stateSelected}" already contains the vlaue from the back bean. but still i dont get a the value selected on the page in chrome. it shows a blank record on the page. the value is obtained on the page and even when i inspect the element it shows the following html script
<option value="55" selected="selected">466-Assam </option>
but then also the value is not shown on the page.

If the selectbox HTML looks right yet you cannot see it on the rendered page, maybe your CSS class medium is defined to hiding it? Try removing the class attribute and see if this has any effect.

Did you try any other browser ?
Try value change listener in h:selectOneMenu element itself like
<h:selectOneMenu class="medium" id="state" value="#{locationDataBean.stateSelected}" required="true" requiredMessage="Select State" valueChangeListener="#{locationServiceBean.retrieveStateDetails}">
<f:selectItem itemLabel="Select State" itemValue="-1"/>
<f:selectItems value="#{systemResultViewUtil.stateList}"/>

Related

How do I filter with more than one letter in primefaces selectonemenu?

I am using primefaces selectonemenu. As user request me to have the option to type more than one letter to have filtering, now it only works on one letter. is it possible?? I have extracted my code of the selectonemenu on the xhtml file. Hope it helps. Thanks for your help:
<p:selectOneMenu required="true" requiredMessage="#{esMessage['WARN.ESTTC3S5.COURSETYPE']}" id="ddCourseType" value="#{dtWebVoEsttc3s4.courseTypeId}" height="300" style="width:421px"
onchange="subListUpdate();" effect="fade">
<p:ajax listener="#{dtSelectedCourseTitleVo.filterList(dtWebVoEsttc3s4.courseTypeId, dtCourseTitleVo)}" update="ddCourseTitle" />
<f:selectItem itemLabel="#{esLabel['lbl.esttc3s4.lblselectcoursetype']}" itemValue="" noSelectionOption="true" />
<f:selectItems value="#{dtCourseTypeVo.courseTypeList}" var="courseType"
itemLabel="#{language.localeString eq 'zh'? courseType.courseTypeChi: courseType.courseType}" itemValue="#{courseType.courseTypeId}"/>
</p:selectOneMenu>
........................................................
<p:remoteCommand id="teacherNameListRemoteCommandId"
name="subListUpdate" action="updateCourseTitleListData3s4Form"
update="ddCourseTitle" />
Why don't you use the filter option from selectOneMenu component?
filter="true" filterMatchMode="startsWith"
Source: http://www.primefaces.org/showcase/ui/input/oneMenu.xhtml
EDIT: Of course you can set the match mode to different options like contains or whatever you want

form field in jsp not change java variable

I can't change the data information in my jsp page when I submit the form and call a java function(When the button is pressed).
This is a peace of code used in my .jsp form field:
...
<h:form>
<h:panelGrid columns="3">
<h:outputLabel for="contactName" value="#{msj.contactName}"/>
<h:inputText id="contactName" value="#{CustodiaBean.name}" required="true">
<f:validator validatorId = "TextValidator" />
</h:inputText>
<h:message for="contactName" styleClass="errorMessage" style="color:red"/>
<h:outputLabel for="contactLastName" value="#{msj.contactLastName}"/>
<h:inputText id="contactLastName" value="#{CustodiaBean.last_name}" required="true" >
<f:validator validatorId = "TextValidator" />
</h:inputText>
<h:message for="contactLastName" styleClass="errorMessage" style="color:red"/>
</h:panelGrid>
<div id="button">
<h:commandLink styleClass="hoveringLink3doubleGreen" action="#{CustodiaBean.updateAccount}">
<h:outputText id="save_button" value="#{msj.save_changes}"/>
</h:commandLink>
<h:commandLink styleClass="hoveringLink3double" action="myAccountCustodia">
<h:outputText id="cancel_button" value="#{msj.cancel}"/>
</h:commandLink>
</div>
</h:form>
...
This is the same piece of code used in other pages like login and register user.
The form fields get the current values in "CustodiaBean", but i try to change the value in the form and when I press the button to check the value(call a function in "CustodiaBean"), I always get the previous value (The new form value is not changed in my class "CustodiaBean").
I'm using a tomcat server and eclipse.
Is necesary to force the field to be bloqued and save the changes when the button is pressed??
I don't know why this is happen. Can anyone help me or give me some advice??
Thanks a lot in advance
Does h:inputText etc also has a property name? Try to see what html is generated. It may be possible that your data is not getting submitted properly. Any HTML form directly submit feilds which are non disabled with the name property of each field. IF id is present and not name, it wont be submitted correctly. Try debugging at browser level or via some firefox plugin like tamper data.
Hope it helps

p:ajax using an global HTML id to reference to an <h:messages> attribute

I currently working on an project that needs some "rebuild" but still there is no money on this - so I have to deal with that what's in front of me. I need to display an message on every change of the radioButton as you can see in this code example:
<h:form>
<h:messages id="msg"/>
<p:accordionPanel value="#{exerciseBean.getCategoriesInGrade(5)}" var="category">
<p:tab title="#{category.categoryName}">
<h:panelGrid columns="1" cellpadding="5">
<ui:repeat value="#{exerciseBean.getSingleChoiceInGrade(5, category.categoryName)}" var="exercise">
<div>#{exercise.getText()}</div>
<p:selectOneRadio value="#{exerciseBean.data}" >
<f:selectItems value="#{exercise.getChoices()}" var="c" itemLabel="#{c.id}" itemValue="#{c.id}" />
<p:ajax event="change" process="#this" listener="#{exerciseBean.validateInput(exercise.getId())}" update="msg"/>
</p:selectOneRadio>
</ui:repeat>
</h:panelGrid>
</p:tab>
</p:accordionPanel>
</h:form>
As you can see - inside this <h:form> there is directly an <h:messages> with the id msg. Now the problem: I still get the error: "cannot find component with identifier 'msg'". I now tried it with the prefix : but still the same problem. Is there a way to get PrimeFaces/JSF to reference to this "global-id"?
In my backend I send the message like this:
FacesMessage facesMessage = new FacesMessage("Right Answer!");
FacesContext.getCurrentInstance().addMessage(null, facesMessage);
thanks.
You need an id for your form.
You then need to modify the reference to msg in the ajax update attribute.
So the following code change should do it for you.
1.<h:form id="formID" >
2.<p:ajax event="change" process="#this" listener="#{exerciseBean.validateInput(exercise.getId())}" update=":formID:msg"/>

Primefaces / JSF: selectOneMenu value is not set, ajax listener not called

I am using Primefaces and JSF to develop this frontend. My issue is that one of my selectonemenus never sets its value binding, "selectedGroup", so the second dropdown is never populated. My backing bean is being called to "update" the second selectonemenu, but the listener of that ajax is not called, nor is selectedGroup ever set. This code is effectively identical to the Showcase for "Select". I even verified that the showcase code works from scratch (which i did not doubt), but fail to see how my situation is any different from that example.
Other stackoverflow questions on this topic indicate that something was left out, but none of those suggestions matched my issue.
I have two selectOneMenus, like so.
<h:form id="outerForm">
<p:panel id="outerPanel">
<p:panelGrid id="outerPanelGrid">
<h:outputLabel for="groupSelection" value="Group: "/>
<p:selectOneMenu id="groupSelection" value="#{myBean.selectedGroup}" >
<p:ajax update="commandSelection"
listener="#{myBean.handleGroupSelection}" />
<f:selectItem itemLabel="---Please Select Group---" itemValue=""/>
<f:selectItems var="group" value="#{myBean.groups}"
itemLabel="#{group.name}" itemValue="#{group.name}" />
</p:selectOneMenu>
<h:outputLabel for="commandSelection" value="Command: "/>
<p:selectOneMenu id="commandSelection" value="#{myBean.command}">
<f:selectItems value="#{myBean.commandStringsList}"/>
</p:selectOneMenu>
</p:panelGrid>
</p:panel>
</h:form>
This page is being displayed in the "center" portion of my layout template like so..
<ui:define id="content" name="content">
<p:panel id="contentPanel" style="float:left; border:none">
<ui:include src="#{anotherBean.currentView}.xhtml"/>
</p:panel>
</ui:define>
The backing bean DOES use some data classes to contain some of the data which is populated, but I thought i was doing everything correct to map it into the view. For the most part, I am using Strings, though.
Does anyone see what I am missing? At the very least, is this xhtml valid?
I should also mention that this page was working before I created and used a template. Basically, I was rendering it in a tab of a tabview using ui:include in the body of index.xhtml. Though I did not notice initially, this page stopped working sometime after I incorporated the template (poor testing on my part, I know).
<f:selectItems var="group" value="#{myBean.groups}"
itemLabel="#{group.name}" itemValue="#{group.name}" />
you can't specify selectItems this way. translation has to be bidirectional. use a converter!
<f:selectItems var="group" value="#{myBean.groups}"
itemLabel="#{group.name}" itemValue="#{group}"
converter="groupConverter"/>

Is it possible to have a form with validation and to use rich:modalPanel for data entry too?

Richfaces 3.3.3, Jsf 1.2:
I have a a4j:form that uses some simple validation, mainly required="true" to ensure the form does not get submitted without some necessary data.
I also have some complex data to add (optionally) to the form, so I thought the best way to do this is to have a a4j:commandButton that displays a rich:modalPanel where the user can create the complex data set.
The created data is also displayed in a h:selectManyListbox that is reRendered when the modalPanel is closed.
That's the plan, at least. I have the following problems:
reRender works, but only if I prevent validation via immediate="true" - which in turn seems to prevent the selected data from the modalPanel to be present in the backing Bean
if I remove the immediate tag, the data gets updated, but only if there are no validation errors
What is the best way to get this to work the way I want? Is there another, better way?
UPDATE:
The Validation that fails is in some different part of the form, not in the data entered via the modalPanel, which is displayed in the Listbox
CODE:
modalPanel:
<rich:modalPanel id="addTrimming" domElementAttachment="parent" width="150" height="130">
<f:facet name="header">
<h:panelGroup>
<h:outputText value="Define Filter" />
</h:panelGroup>
</f:facet>
<f:facet name="controls">
<h:panelGroup>
<h:graphicImage value="/images/close.gif" styleClass="hidelink" id="hidelinkAddTrimming"/>
<rich:componentControl for="addTrimming" attachTo="hidelinkAddTrimming" operation="hide" event="onclick"/>
</h:panelGroup>
</f:facet>
<h:panelGrid id="trimsettings" columns="3">
<h:outputText value="Target:" style="font-weight:bold"/>
<h:inputText id="target" label="XML Filename" required="true" value="#{xmlCreator.trimTarget}">
</h:inputText>
<h:outputText value=""/>
<h:outputText value="Mode:"/>
<h:selectOneMenu value="#{xmlCreator.trimMode}">
<f:selectItem itemLabel="Quality" itemValue="quality"/>
<f:selectItem itemLabel="after Primer" itemValue="afterPrimer"/>
<f:selectItem itemLabel="fixed" itemValue="fixed"/>
<f:selectItem itemLabel="Median length" itemValue="median"/>
<f:selectItem itemLabel="Motif" itemValue="motif"/>
</h:selectOneMenu>
<h:outputText value=""/>
</h:panelGrid>
<h:panelGroup>
<a4j:commandButton value="OK" action="#{xmlCreator.createTrimming}" onclick="from:submit()">
<a4j:support event="oncomplete" ajaxSingle="true" immediate="true" reRender="trimsPanel"/>
</a4j:commandButton>
</h:panelGroup>
</rich:modalPanel>
relevant form part:
<h:outputText value="Trimming:"/>
<a4j:outputPanel id="trimsPanel">
<h:selectManyListbox id="trims" value="#{xmlCreator.selectedTrimmings}">
<f:selectItems value="#{si:toSelectTrimmingList(xmlCreator.trimmings)}"/>
</h:selectManyListbox>
</a4j:outputPanel>
<a4j:commandButton id="addTrimButton" immediate="true" value=" + Trimming">
<rich:componentControl for="addTrimming" attachTo="addTrimButton" operation="show" event="onclick"/>
</a4j:commandButton>
If you do it in one form than you should separate it into two: one will be your main form and another will be form inside modal panel. Thus you'll be able to submit modal panel independently of main form and your submit button in modal panel will look like this:
<a4j:commandButton value="OK" action="#{xmlCreator.createTrimming}" reRender="trimsPanel"/>
you should use process with immediate to send modalpanel's data to bean when closing panel with a a:commandButton or a:commandLink.
for this, modal panel data has to be valid as expected, so you will get valid new data and add it to h:selectManyListBox 's bean value and reRender h:selectManyListBox.
this should work. if not please post your a:form and modalPanel code full to check.

Categories