I have this editable selectOneMenu which correctly resets/repopulates on its previous selectOneMenu change. but it always show blank instead of the first value - 'Please select/Enter statement'
<p:selectOneMenu id="statement" style="width:300px;" value="#{mgBean.statement}"
editable="true" panelStyle="width:200px;">
>
<f:selectItem itemLabel="Please select/Enter statement" itemValue="" />
<f:selectItems value="#{mgBean.statementList}" var="stmt" itemLabel="#{stmt.defaultStatement}" itemValue="#{stmt.defaultStatementValue}" />
</p:selectOneMenu>
You should use the noSelectionOption attribute
Like this
<f:selectItem itemLabel="Please select/Enter statement" noSelectionOption="true"/>
Try setting the attribute label="Please select/Enter statement" for the p:selectOneMenu tag.
Related
if I have the following code inside a form element:
<h:selectOneRadio id="dett_cc_appoggio_per_cassa"
value="#{idfTabDettaglio.idf.ccAppoggio.flagPerCassa}"
binding="#{submit_dett_cc_appoggio_flag_cassa}"
disabled="#{ruleCampoAbil.dett_cc_appoggio.protetto}"
styleClass="idf-radio" converter="javax.faces.Boolean"
validator="#{idfTabDettaglio.validateFlagCassa}">
<f:selectItem itemLabel="${msgs['form.radio.true']}" itemValue="true" />
<f:selectItem itemLabel="${msgs['form.radio.false']}" itemValue="false" />
<f:attribute name="dett_mesi_proroga" value="#{dett_mesi_proroga}" />
<f:attribute name="dett_gg_preavviso" value="#{dett_gg_preavviso}" />
<p:ajax listener="#{idfTabDettaglio.onChangeFlagCassa}"
process="#this"
update="#this dett_cc_appoggio_abi dett_cc_appoggio_cab dett_cc_appoggio_numero
dett_cc_appoggio_intest dett_cc_appoggio_intest_hid
dett_ape_pratica dett_add_comm dett_periodicita dett_mancata_rest
dett_perc_annua dett_comm_minime dett_note dett_comm_magg_mod
dett_comm_prat_non_std dett_comm_prat_urg" />
</h:selectOneRadio>
I notice that the validator method validateFlagCassa will be called both on changing value of radio button and both when pressing the button inside the same form.
My question is: Is there a way to skip the call to the method validateFlagCassa when I change the value of the radio button? How to discriminate from whom the method is called?
Thank you very much.
I have a selectOneMenu with two items and a panelGroup.
When item 1 is selected I want to show the panelGroup and when item 2 is selected hide it.
I try to do it with the onchange event but I don't know how show/hide the panelGroup. Maybe using the panelGroup ID ?
<p:selectOneMenu id="list" value="#{myBean.list}" onchange="???" >
<f:selectItem itemLabel="Item 1" itemValue="Item 1" />
<f:selectItem itemLabel="Item 2" itemValue="Item 2" />
</p:selectOneMenu>
<h:panelGroup id="myPanelGroup">
...
</h:panelGroup>
the change="" will either give u access to a EL Listener or a javascript, which has no update component to it. You're best off adding a ajax call inside the selectOneMenu.
e.g.
<p:selectOneMenu id="list" value="#{myBean.list}">
<f:selectItem itemLabel="Item 1" itemValue="Item 1" />
<f:selectItem itemLabel="Item 2" itemValue="Item 2" />
<p:ajax event="change" process="#this" update="myPanelGroup" />
</p:selectOneMenu>
<h:panelGroup id="myPanelGroup" rendered="#{myBean.list == '1'">
...
</h:panelGroup>
(you need to have rendered on it to ensure it's only shown if your value is 1 (not 2 etc). Although this is the AJAX solution, you could do it using jQuery by binding a change listener to the selectOneMnu 'list' - on change, run your javascript and show/hide the panelgroup div (means u dont need the rendered etc)..
Example:
$("#list").change(function(event){
//get value here and show/hide div using javascript/css what ever you prefer
});
you can use <p:remoteCommand> tag to update you form. And use rendered to show/hide your panel.
see below code and it is working on my side and much easier.
<p:remoteCommand id="remotecommand" name="updatePanel"
update="#form"></p:remoteCommand>
<p:selectOneMenu id="list" value="#{myBean.list}" onchange="updatePanel()" >
<f:selectItem itemLabel="Item 1" itemValue="Item 1" />
<f:selectItem itemLabel="Item 2" itemValue="Item 2" />
</p:selectOneMenu>
<h:panelGroup id="myPanelGroup" rendered="#{myBean.list eq 'Item 1'}">
...
</h:panelGroup>
When the value of list is Item 1 on that time show the panel otherwise it is hide
Rendering content on demand is a common practice in jsf. You should also rethink the use of a two choices selectOneMenu. You have to wrap the content in a panelGroup element and set the inner element to be rendered like this:
<p:selectBooleanCheckbox id="cboOverview" value="#{ctrlBean.bValue}">
<p:ajax event="change" update="outputOverviewWrapper" />
</p:inputSwitch>
<h:panelGroup id="outputOverviewWrapper">
<h:panelGroup id="toggleOverview" rendered="#{!ctrlBean.bValue}">
...
</h:panelGroup>
</h:panelGroup>
If you want to stick with the selectOneMenu you should also use a valueChangeListener to set the rendering attribute properly.
Reference is here.
We are using JSF 1.2 for our project. Requirement is to update another selectonemenu options based on a value change in the current selectonemenu.
Based on select1 option, select2 needs to be updated.
<h:selectOneMenu id="select1" value="#{subscription.subscriptions}" onchange="javascriptMethod()">
<f:selectItem id="item1" itemLabel="News" itemValue="1" />
<f:selectItem id="item2" itemLabel="Sports" itemValue="2" />
</h:selectOneMenu>
<h:panelGroup id="panel2">
<h:selectOneMenu id="select2" value="#{subscription.subscriptions2}">
<f:selectItem id="item1" itemLabel="News" itemValue="1" />
<f:selectItem id="item2" itemLabel="Sports" itemValue="2" />
</h:selectOneMenu>
</h:panelGroup>
You can use ajax support like this
<h:selectOneMenu id="select1" value="#{subscription.subscriptions}" >
<f:selectItem id="item1" itemLabel="News" itemValue="1" />
<f:selectItem id="item2" itemLabel="Sports" itemValue="2" />
</h:selectOneMenu>
Jsf 1.2 doesn't have ajax support the only thing you can do is full page reload which happens on a command button.
I presumed you are using richfaces as a third party for ajax and rich ui components.
Hope this helps.
If you are using primefaces then you can replace tag with like this
<p:ajax event="onchange" update="select2" action="if you want to anything in
backend"/>
If you want to do by javascript then have a hidden h:commandButton and put code in your
javascriptMethod() method like this
document.getElementById("myHiddenButtonId").click();
I'm using an p:selectOneRadio with p:ajax and the value of another component (p:inputText), not binding its value in my bean.
If I use p:selectBooleanCheckbox instead the behavior is exactly what I need, update the bean before calling the method in ajax. Is this a bug in p:selectOneRadio or is this its default behavior?
I'm using JSF2, PrimeFaces 4
The xhtml code:
<p:selectOneRadio id="enumId" value="#{xyzController.entity.enumValor}"
disabled="#{disabled}" required="true" plain="true">
<f:selectItems value="#{xyzController.enum}" var="item"
itemLabel="#{messages[ELUtils.evaluateExpression(itemLabelEL)]}"
itemValue="#{item}" />
<p:ajax event="change" listener="#{xyzController.aoTrocar}"
update="panelDominioFields" process="#form" />
</p:selectOneRadio>
<p:outputPanel layout="inline" id="panelDominioFields">
<p:inputText id="valorId"
value="#{xyzController.entity.valorNumericoValido}"
rendered="#{xyzController.mostrarCampoDominioNumerico}"
required="true">
<f:convertNumber type="number" locale="#{localeController.locale}"
currencyCode="#{localeController.currencyCode}" />
</p:inputText>
</p:outputPanel>
Get rid of event="change", it's the wrong event. It defaults to click and is the right one already.
<p:ajax listener="#{xyzController.aoTrocar}"
update="panelDominioFields" process="#form" />
Radio button values never change. They're only selected by click. In turn, selected values are submitted, but unselected values not.
I have two p:selectOneMenu in a page, both have the same content, the user has to choose two different items, the user cannot choose same item in both selectOneMenu. How do I implement this validation ? My current code is something like this :
<p:selectOneMenu id="itemOne"
value="#{backingBean.itemOne}"
required="true" label="Item One:" requiredMessage="Item one is required!">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItems value="#{backingBean.itemList}" var="item"
itemLabel="#{item.QLabel}" itemValue="#{item.QLabel}" />
</p:selectOneMenu>
<p:selectOneMenu id="itemTwo"
value="#{backingBean.itemTwo}"
required="true" label="Item Two:" requiredMessage="Item two is required!">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItems value="#{backingBean.itemList}" var="item"
itemLabel="#{item.QLabel}" itemValue="#{item.QLabel}" />
</p:selectOneMenu>
The first thing came to my mind was to attach a listener in both menus with 'onchange' event, remove already selected item and update the other menu but this seems overkill for such simple task. Is there any other way I can do this ?