I have done my homework https://stackoverflow.com/search?q=jsf+jquery
I'm using prime faces with SelectOneMenu http://www.primefaces.org/showcase-labs/ui/selectOneMenu.jsf
I'd like to integrate Chosen http://harvesthq.github.com/chosen/ because it has the ability to Allow Deselect on Single Selects.
What's the right way to integrate them i have used an aroach similar to jquery with jsf with no succes.
But i'd like to use Chosen instead SelectOneMenu
What do you mean with "deselect on single selects?"?
Look at the sample line 19:
http://www.primefaces.org/showcase-labs/ui/selectOneMenu.jsf
This allows a deselection. Be sure your converter returns null if the id is ""
<h:outputText value="Pojo: " />
<p:selectOneMenu value="#{autoCompleteBean.selectedPlayer1}" effect="fade" converter="player">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItems value="#{autoCompleteBean.players}" var="player" itemLabel="#{player.name}" itemValue="#{player}"/>
</p:selectOneMenu>
Related
I have the following selectOneMenu and within of my component I want to have an item which shouldn't be shown, for e.g. in cases where the value from #{Mybean.value} match a value from #{Mybean.ListValues} I don't want to have an empty option in my combo box .
<p:selectOneMenu value="#{Mybean.value}" hideNoSelectionOption="true"
required="true" requiredMessage="Required data">
<f:selectItem itemLabel="" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{Mybean.ListValues}" var="option" itemLabel="#{option.optionName}"
itemValue="#{option.optionId}"/>
</p:selectOneMenu>
I searched, but I didn't find anything useful, just one link in primefaces forum where describes exactly this problem.
My primefaces version is 3.5
Edit: it is supported from version 9 and on, see the other answer.
That attribute doesn't exist in the official api or in the doc. Where did you get it from?
What you're actually looking for is the itemDisabled attribute on the f:selectItems component. It's this attribute that disables a selectItem from being selected. Historically, primefaces has had problems with that attribute.
Ideally, you should have
<p:selectOneMenu value="#{Mybean.value}" required="true" requiredMessage="Required data">
<f:selectItem itemLabel="" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems itemDisabled="#{Mybean.value=='aValue'}" value="#{Mybean.ListValues}" var="option" itemLabel="#{option.optionName}" itemValue="#{option.optionId}"/>
</p:selectOneMenu>
hideNoSelectionOption implemented in PrimeFaces 9.0
Issue: https://github.com/primefaces/primefaces/issues/5886
PR: https://github.com/primefaces/primefaces/pull/5909
So, basically and based on #kolossus answer, we can in primefaces (when you are using <p:selectOneMenu...) case add the following empty item
<f:selectItem itemValue="#{null}" itemLabel="--select--" itemDisabled="#{Mybean.value ne null}" />
We can in primefaces (when we have to use
Note: In such case we don't need the following two tags:
hideNoSelectionOption="true"
and
noSelectionOption="true"
This question already has answers here:
commandButton/commandLink/ajax action/listener method not invoked or input value not set/updated
(12 answers)
Closed 5 years ago.
I have a selectOneMenu element(carType) which populates another selectOneMenu(manufacture) element on changing it. This works fine and I get it rendered everytime.
Then I have another selectOneMenu(model) which gets populated evertime the manufacture list is changed. This does not seem to work however.I see that the listener is not called at all for carManufacturerChanged. Any help will be appreciated. Code is :
<p:selectOneMenu value="#{createControler.carType}">
<f:selectItem itemLabel="Select Car Type" itemValue="" />
<f:selectItems value="#{createControler.carTypeList}" var="carType"
itemLabel="#{carType}" itemValue="#{carType}"/>
<f:ajax event="change" listener="#{createControler.carTypeChanged}" render="manufacture"/>
</p:selectOneMenu><br></br><br></br>
<p:selectOneMenu value="#{createControler.carManufacturer}" id="manufacture">
<f:selectItem itemLabel="Select Car Manufacturer" itemValue="" />
<f:selectItems value="#{createControler.carManufacturerList}" var="carManufacturer"
itemLabel="#{carManufacturer.manufacture}" itemValue="#{carManufacturer.manufacture}"/>
<f:ajax event="change" listener="#{createControler.carManufacturerChanged}" render="model" />
</p:selectOneMenu><br></br><br></br>
<p:selectOneMenu value="#{createControler.carModel}" id="model">
<f:selectItem itemLabel="Select Car Model" itemValue="" />
<f:selectItems value="#{createControler.carModelList}" var="carModel"
itemLabel="#{carModel.model}" itemValue="#{carModel.model}"/>
</p:selectOneMenu><br></br><br></br>
EDIT : When I add another <f:selectItem itemValue="random" itemLabel="random" /> in the carManufacturer menu, and select it, then the listener is called. So, I think the problem might be that listener is not triggered for elements that are rendered in runtime. Might be of help to someone who can answer.
Go check you corresponding CDI bean's scope. If it's RequestScoped, change the scope to ViewScoped or scopes that spans multiple requests.
I have a 2 combo boxes 1.company & 2.city, when I select any company from company's combo box, it will change city combo box on ajax my Question is that should I use
<p:ajax update="city" listener="pretty:cityOnChange" />
OR
<p:ajax update="city" listener="#{actionClass.cityOnChange}" />
when I use below statement I get exception
listener="pretty:cityOnChange": Cannot convert pretty:cityOnChange of type class java.lang.String to class javax.el.MethodExpression
<p:ajax update="city" listener="pretty:cityOnChange" />
this is the code which I am using
<h:outputLabel value="select Company" />
<p:selectOneMenu id="companySelectId" value="#{circleAction.companyBeans.companyBeansId}">
<f:selectItems value="#{circleAction.companyBeans.companyMap}"/>
<p:ajax update="city" listener="pretty:cityOnChange" />
</p:selectOneMenu>
No, you cannot use an PrettyFaces navigation string as a value for the listener attribute. The attribute must refer to method using an EL expression. Just like the exception tells you.
I have the following JSF 2 code:
<p:selectOneMenu id="dropdown" value="#{data.selection}" required="true" converter="selectOneMenuConverter">
<f:selectItem itemLabel="Select one..." itemValue="" noSelectionOption="true" />
<f:selectItems value="#{data.entries}" var="entry" itemLabel="#{entry.name}" itemValue="#{entry}" />
<p:ajax update="display" event="change" />
</p:selectOneMenu>
<h:panelGroup id="display">
<h:outputText value="#{data.selection}" />
</h:panelGroup>
Everything works as expected when I choose a value from the dropdown.
When the user "deselects" an entry by choosing "Select One", JSF complains that this is not possible because the selectonemenu is required.
The problem comes from there that the p:ajax makes a partial submit that triggers validation. Immediate=true does also not work because in case the immediate happens on an input field (like selectonemenu is) a validation is performed.
The validation shall only happen when the user presses the "go on" button on the bottom of the page (not shown in code)
Further the given converter converts the Strings to Objects and for the default value it returns null (that's also the expected value within the domain for "no selection").
So my question is what I must do to fulfill my case.
For my this is a standard case and I cannot imagine that there is no solution for this.
Any ideas?
Best regards,
Florian
The validation shall only happen when the user presses the "go on" button on the bottom of the page (not shown in code)
Then just tell the dropdown's required attribute to do exactly that instead of hardcoding a true.
<h:form id="form">
<p:selectOneMenu ... required="#{not empty param['form:go']}">
...
</p:selectOneMenu>
...
<p:commandButton id="go" ... />
</h:form>
The #{not empty param['form:go']} will only evaluate true when the form submit has actually been taken place by the submit button which has the client ID form:go in the particular example. If you don't like hardcoding client IDs either, then reference it as follows:
<h:form>
<p:selectOneMenu ... required="#{not empty param[go.clientId]}">
...
</p:selectOneMenu>
...
<p:commandButton binding="#{go}" ... />
</h:form>
I'm trying to update a a radio-componet, which is triggered by a onchange-event of a select-box. I see the radio-button toggling as desired after the onchange, but it automatically toggles back the next second.
<h:selectOneMenu id="selectId" value="#{someBean.someSelectValue}"
onchange="this.form.submit()" valueChangeListener="#{someBean.someChange}" immediate="true">
<p:ajax update="radioId"/>
<f:selectItems value="#{someBean.availableSraTitel}" />
</h:selectOneMenu>
<h:selectOneRadio id="radioId" value="#{someBean.someRadioValue}">
<f:selectItem itemLabel="Yes" itemValue="true" />
<f:selectItem itemLabel="No" itemValue="false" />
</h:selectOneRadio>
What am I missing here?
Jonny
Remove onchange="this.form.submit()" (the f:ajax will submit the value to the server)
Also remove immediate="true" (I don't think you really planning to skip any validations here)
Last thing, change <p:ajax update="radioId"/> into <f:ajax render="radioId"/>
p:ajax is from primefaces and you are using plain JSF components
As suggested by BalusC : You also better replace the valueChangeListener="#{someBean.someChange}" by adding listener="#{someBean.someChange}" to your f:ajax (you should change teh signature of the method too)