I'm trying to use a selectOneRadio to redraw some of my components (namely enabling/disabling them). I've tried just using the id of my selectManyCheckbox; didn't work. I also tried putting the selectManyCheckbox inside of a h:panelGroup; also didn't work. I'm pretty sure my tags are properly created, since I don't know how else it could work.
This is what I have so far:
<tr:selectOneRadio id="useFilterChoices" value="#{randomCardBean.useFilters}">
<f:selectItem itemLabel="All Cards" itemValue="allCards"/>
<f:selectItem itemLabel="Filter By Category" itemValue="someCards"/>
<f:ajax event="click" render="categoryChoicesBox"/>
</tr:selectOneRadio>
<tr:selectManyCheckbox id="categoryChoicesBox" disabled="#{randomCardBean.filterDisabled}" value="#{randomCardBean.selectedFilters}">
<f:selectItems value="#{randomCardBean.filterChoices}"/>
</tr:selectManyCheckbox>
I'm using selectOneRadio because I want to be able to extend the filter options eventually. Any help on this would be MUCH appreciated!
Related
I load selectOneMenu items on ajax event "focus" because list of items is to big and I do not want to prepare it on Bean loading. The best way for me it is to load it on selectOneMenu focus. After list loading Jsf needs to update selectOneMenu component but it closes dropdownlist every time. Is it way to update selectOneMenu items without closing dropDownList?
<p:selectOneMenu id="companyEntity"
value="#{docBean.docIncomingEntity.companyEntity}"
effect="fade"
rendered="#{docBean.companyPersonSwitch == 0}"
filter="true"
converter="omnifaces.SelectItemsConverter"
filterMatchMode="contains">
<f:selectItems value="#{companyBean.companyEntityList}"
itemLabel="#{item.name}"
itemValue="#{item}"
var="item"/>
<p:ajax event="focus" listener="#{companyBean.loadAllCompaniesList()}" update="companyEntity"/>
</p:selectOneMenu>
You don't need to build lazy loading yourself. PrimeFaces has built in lazy loading for the p:selectOneMenu component. You simply have to add the attribute dynamic="true" and it will lazy load the items. You can find a demo in the showcase.
See:
https://www.primefaces.org/showcase/ui/input/oneMenu.xhtml
https://primefaces.github.io/primefaces/12_0_0/#/components/selectonemenu
If you really have a lot of items, you are better of using the p:autoComplete component. AutoComplete displays suggestions while the input is being type. It features various options, customizable content, multiple selection, effects and events.
See:
https://www.primefaces.org/showcase/ui/input/autoComplete.xhtml
https://primefaces.github.io/primefaces/12_0_0/#/components/autocomplete
I am using h:selectOneMenu for dropdown but the valueChangeListner is not firing.
I can not use submit() onChange as it will refresh my entire page and i will lose the selected values for other components. Please suggest how to fire valueChangeListner without affecting other components on the page.
The h:selectOneMenu implemented like below:
<h:selectOneMenu id="Q1List"
value="#{myBean.q1Value}" onclick="showHideQ1()"//To open another field based on value selected, working fine
valueChangeListener="#{myBean.q1ValueChangeListner}">
<f:selectItem itemValue="" itemLabel="Make a selection"/>
<f:selectItems value="#{RateComparision.q1OptionsList}" id="dr1"/>
</h:selectOneMenu>
Note: i can not use ajax or anything like that as my page is not supporting them.
Any JS solution or component property may help me.
Thanks,
Mahesh
I want to use a selectOneMenu to have a user choose a value. In some cases I want to disable one of the values shown in the menu. I tried using render on both the selectItems as well as selectOneMenu as well as added a ui:fragment around the Menu but I always get all the values from both lists shown. Any ideas how to prevent that?
Here my current last try that again resulted in twice the list and the item in question once enabled and once disabled in it:
<ui:fragment rendered="#{cc.attrs.showP==true}">
<h:selectOneMenu id="type" binding="#{cc.type}">
<f:selectItems value="#{typeDAO.findAll()}"/>
</h:selectOneMenu>
</ui:fragment>
<ui:fragment rendered="#{cc.attrs.showP==false}">
<h:selectOneMenu id="type" binding="#{cc.type}">
<f:selectItems value="#{typeDAO.findAll()}" var="item" itemDisabled="#{item=='P'}"/>
</h:selectOneMenu>
</ui:fragment>
Your concrete problem is caused because you're binding physically multiple components to the same variable.
<h:selectOneMenu ... binding="#{cc.type}" />
<h:selectOneMenu ... binding="#{cc.type}" />
If the getter behind binding returns non-null, then JSF will use it instead of creating a new one. Basically, the second tag will reuse the component created in the first tag and set/add all attributes/items to it.
Your particular case can be solved in at least two ways:
Use JSTL to build the JSF component tree conditionally instead of using JSF to render the HTML output conditionally. You shouldn't have physically multiple components in the JSF component tree sharing the same binding let alone the same id.
<c:if test="#{cc.attrs.showP}">
<h:selectOneMenu id="type" binding="#{cc.type}">
...
</h:selectOneMenu>
</c:if>
<c:if test="#{not cc.attrs.showP}">
<h:selectOneMenu id="type" binding="#{cc.type}">
...
</h:selectOneMenu>
</c:if>
Make your code DRY. I.e. get rid of all code duplication.
<h:selectOneMenu id="type" binding="#{cc.type}">
<f:selectItems value="#{typeDAO.findAll()}" var="item" itemDisabled="#{not cc.attrs.showP and item eq 'P'}" />
</h:selectOneMenu>
See also:
How does the 'binding' attribute work in JSF? When and how should it be used?
JSTL in JSF2 Facelets... makes sense?
Guess I found it - bit weird to answer my question though. I think it's because the possible values of the menu are created before the rendered attributes are evaluated and since I did bind both menus to the same variable/id I got all items of the two menus. Thus I now used different names and then in my composite component have some logic that checks which one is used and continues to use the right value. Works :-)
Bit weird to me is this thing that as a developer u have to know when the attribute list is built in comparison to when the rendering happens. I recently had a similar issue with foreach and repeat. Is there any way to know these things as part of some overarching concept that I can remember or is that really case by case?
Thanks guys!
View:
<p:dialog header="Search in code tables" widgetVar="dlg" resizable="true">
<p:selectOneMenu id="tableId" value="#{xxx.tableId}"
required="true" label="tableId">
<f:selectItems value="#{xxx.tables}" ></f:selectItems>
</p:selectOneMenu>
The z-index for the dialog causes the menu options to hide behind it.
I am following standard example from Primefaces showcase:
http://www.primefaces.org/showcase/ui/overlay/dialog/loginDemo.xhtml
This appears to be a know n issue
http://forum.primefaces.org/viewtopic.php?f=3&t=33972
Can someone suggest a proper fix.
okay I have managed to figure this out.
I was missing a appendTo telling which component to append the select:
<p:selectOneMenu id="tableId" value="#{xxx.tableId}"
required="true" label="tableId" appendTo="#this" >
This fixes the z-index as well as adding a scrollbar to the drop down.
I have not been able to find this anywhere so posting this self answer.
Try to use panelStyle for selectOneMenu.
Using appendTo = "#this" may cause something like this:
You could use panelStyle = "position:fixed" instead.
Regards.
i have two radio buttons and no one is selected by default, and it's mandatory to select one of them, so here's what i did:
<div id="payment_method">
<h:message for="sel_payment_method" style="Color:red;"/>
<h:selectOneRadio id="sel_payment_method" required="true" requiredMessage="Please select a payment method" value="#{myBean.selectedPaymentMethod}">
<f:selectItem itemLabel="Debit or Credit Card" itemValue="credit" />
<f:selectItem itemLabel="Checking Account" itemValue="checking" />
<f:ajax event="change" render="credit_inputs_fragment checking_inputs_fragements" />
</h:selectOneRadio>
</div>
the selectedPaymentMethod property is a string and its default value is null
and the credit_inputs_fragment is a ui:fragement that contains a div
ISSUE: when clicking on a radio buttons the two fragments to be changed are not affected.
please advise, thanks.
You're not entirely clear in describing the concrete problem, but I can see at least two potential problems in the code posted so far:
The <f:ajax event="change"> is wrong in case of radiobuttons and checkboxes. It should be event="click". Or, better, just remove it altogether. It defaults to the right one already. See also What values can I pass to the event attribute of the f:ajax tag?
The component referenced in <f:ajax render> must be a fullworthy JSF UI component and always be rendered to the client side. If the component is by itself never rendered to the HTML, then JavaScript simply can't find it to update its content. You basically need the conditionally rendered components in another component which is always rendered. See also Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?
i followed the example code in the following link, and it solved my issue:
JSF: Dynamically change form