I have a scenario where i have a SelectOneMenu
<h:selectOneMenu value="#{bean.names}" valueChangeListener="#{bean.templChangeListner}" required="true" requiredMessage="Please select an Equipment type">
<f:selectItem itemLabel="-------Select Names------"
itemValue="${null}" noSelectionOption="true" />
<f:selectItems value="#{bean.fetchnames()}" var="spec"
itemLabel="#{spec.specName}" itemValue="#{spec.specificationId}" />
<a4j:ajax event="valueChange" render="outputPanel"
immediate="true" execute="#this"/>
</h:selectOneMenu>
On valueChange i have to render a panel which have
<a4j:outputPanel id="outputPanel">
<c:forEach items="#{ban.genericFeaturesList}"
var="genFeatVar" varStatus="genericIndex">
...............
...............
...............
<!--Lots of logic to render component -->
</c:forEach>
My question is that when valueChange will happen and outputPanel will render again
genericFeaturesList will contain new updated data ?
Component tree will be build again ?
As i saw when i am adding redirect in valueChangeListener method then things working properly in UI and when i am removing redirect value in UI not rendering properly.
FacesContext.getCurrentInstance().getExternalContext().redirect("PageName")
JSF can be easily rendered and produce runtime HTML DOM object If we use JSF component instead of <c:forEach...>
<h:panelGroup id="outputPanel" rendered="#{not empty ban.genericFeaturesList}">
<ui:repeat value="#{ban.genericFeaturesList}" var="instance">
......
......
......
</ui:repeat>
<h:panelGroup>
... Try this. Good luck!!!
Related
I have a page with a <h:selectOneMenu> and I want to show some fields or others depending on the chosen value of the selectOneMenu. Is this possible and if so, how?
Yes, this is surely possible. Just bind the dropdown's value to the rendered attribute of the components to be shown/hidden. Here's a kickoff example.
<h:form>
<h:selectOneMenu value="#{bean.item}">
<f:selectItem itemLabel="Select..." />
<f:selectItem itemValue="one" />
<f:selectItem itemValue="two" />
<f:selectItem itemValue="three" />
<f:ajax render="#form" />
</h:selectOneMenu>
<h:panelGroup rendered="#{bean.item == 'one'}">
<p>This will be shown if the selected item equals to "one".</p>
</h:panelGroup>
<h:panelGroup rendered="#{bean.item == 'two'}">
<p>This will be shown if the selected item equals to "two".</p>
</h:panelGroup>
<h:panelGroup rendered="#{bean.item == 'three'}">
<p>This will be shown if the selected item equals to "three".</p>
</h:panelGroup>
</h:form>
The <h:panelGroup> is just examplary. It can be every JSF HTML component, such as <h:inputText> or even another <h:selectOneMenu>.
See also:
Conditionally displaying JSF components
I have a big complex form with validation on most of the fields. Somewhere I have <h:selectOneMenu> where if I select a certain value, I want another <h:selectOneMenu> to appear under it. The second list is initially invisible (I set it with rerender property to false and I make it true with clickListener() function and render it an ajax call).
<o:form>
<h:panelGroup id="group" >
<label>Status</label>
<h:selectOneMenu id="status" immediate="true" label="Status" value="#{candidateBean.statusVO}" converter="omnifaces.SelectItemsConverter" required="true" requiredMessage="The field is empty">
<f:selectItem itemValue="#{null}" itemLabel="-- select one --" />
<f:selectItems value="#{settingsBean.settings.statusListVO.statusVO}" var="status" itemValue="#{status}" itemLabel="#{status.name}"/>
<f:ajax event="valueChange" listener="#{candidateBean.clickListener}" execute="form" render="group" />
</h:selectOneMenu>
<h:messages for="status" style="color:red" />
<label>Invalidation Reason</label>
<h:selectOneMenu id="invalidationReason" rendered="#{candidateBean.falseTest}" label="Invalidation Reason" value="#{candidateBean.invalidationReasonVO}" converter="omnifaces.SelectItemsConverter" requiredMessage="The field is empty">
<f:selectItem itemValue="#{null}" itemLabel="-- select one --" />
<f:selectItems value="#{settingsBean.settings.invalidationReasonListVO.invalidationReasonVO}" var="invalidation" itemValue="#{invalidation}" itemLabel="#{invalidation.name}"/>
</h:selectOneMenu>
</h:panelGroup>
</o:form>
I used <o:form> instead of <h:form> because somewhere in the form I used <o:ignoreValidationFailed> because I needed to update a dataTable with values from a <h:selectOneMenu> and force update on my model.
Everything works except when I select a value from the list, the elements inside the panelGroup are rendered without any style at all and I can't figure out why. If I refresh the page the CSS is loaded on the elements but this is not an option.
My bean is #SessionScoped.
I want a selectOneMenu with the possibility to select 'null' as valid value and/or fire a f:ajax to execute the valueChange event.
My current state looks like this:
<h:selectOneMenu id="energySource" value="#{counter.energySourceType}"
converter="omnifaces.SelectItemsConverter" class="form-control">
<f:selectItems value="#{buildingBean.energySourceTypeSelectItems}"/>
<f:selectItem itemValue="#{null}" itemLabel="Strom" />
<f:ajax execute="#this" render="provider" listener="#{buildingBean.debug()}"/>
</h:selectOneMenu>
<h:messages id="energySourceMessage" for="energySource" styleClass="list-inline alert alert-danger"/>
<h:panelGroup layout="block" id="provider">
<h:panelGroup layout="block" class="form-group" rendered="#{empty counter.energySourceType}">
<label>Strom-Anbieter</label>
Strom
</h:panelGroup>
</h:panelGroup>
At the moment the first change from 'null' to a selectItem-value works but the change back doesn't works since 'null' as value is a workaround in JSF 1.x where the noSelectionOption="true" wasn't available. So how can I do this? It is also needed to set the energySourceType 'null', which is the value of the selectOneMenu and from my point of view doing this within the form is the easiest way, because it's in a loop.
I have a popup panel (id=PanelAddQueryCriteria) define on top of jsf page but it only enable it after user select a menu item (id=entityKind) and re-render take pace for that popupPanel. However because of that re-render, select item (id=queryCriteriaAttr) inside that popup panel don't trigger change listener (#{ceaDBBean.queryCriteriaAttrChanged}) in first value change, and only trigger when select again... Any help? Here the code:
<rich:popupPanel id="PanelAddQueryCriteria">
<h:form id="formAddQueryCriteria">
<h:selectOneMenu id="queryCriteriaAttr"
value="#{ceaDBBean.queryCriteriaAttr}" required="true"
valueChangeListener="#{ceaDBBean.queryCriteriaAttrChanged}">
<f:selectItems value="#{ceaDBBean.ceaEntityKindAttrs}"/>
</h:selectOneMenu>
</h:form>
</rich:popupPanel>
<h:panelGrid id="searchPanel">
<h:selectOneMenu id="entityKind"
value="#{ceaDBBean.entityKind}" required="true"
valueChangeListener="#{ceaDBBean.entityKindChanged}">
<a4j:ajax event="valueChange" render="addQueryCriteria" execute="#this" />
<f:selectItems value="#{ceaDBBean.ceaEntityKinds}" />
</h:selectOneMenu>
<a4j:commandLink styleClass="no-decor" id="addQueryCriteria"
render="PanelAddQueryCriteria"
disabled="#{empty ceaDBBean.entityKind}"
execute="#this" action="#{ceaDBBean.initAddQuryCriteria}"
oncomplete="#{rich:component('PanelAddQueryCriteria')}.show()">
<h:graphicImage id="addQueryCriteriaImg"
value="/images/icons/common/new.gif" width="16" height="16"
alt="#{adminMsg.addQueryCriteria}" />
<rich:tooltip value="#{adminMsg.addQueryCriteria}" for="addQueryCriteria" />
</a4j:commandLink>
</h:panelGrid>
Short answer: this problem is caused by JSF issue 790. Change
render="PanelAddQueryCriteria"
by
render="formAddQueryCriteria"
or maybe, if you have actually more into the panel which needs to be updated than the form itself,
render="PanelAddQueryCriteria formAddQueryCriteria"
Long answer: read following related questions:
<a4j:commandbutton> action is only invoked on second click
h:commandButton/h:commandLink does not work on first click, works only on second click
I am trying to submit values in a pop-up panel inside another panel that has a submit/action event. But before opening pop-up panel I need to invoke a function on my managed bean that create a new entity object. The outer panel has the only h:form, since you can't nest them. I have wrapped the pop-up panel in a a4j:region to submit only this part when the use submits the values inside the pop-up panel. This works, but not the execution of the preparing function that need to be invoked when the pop-up panel executes. I have tried a4j:commandLink but that component don't work together with the rich:popupPanel (strange since both of them are Richfaces components?!). So I have to relay on the h:commandLink and use ajax.
How can I invoke a function on my managed bean when the link to open/render the pop-up panel fires?
(What is the correct pattern for this?)
PS. The initial question has changed, but not the problem concerning submitting values in a pop-up panel.
Part of the xhtml file:
<h.form>
...
<a4j:region>
<rich:popupPanel id="popup_sys_user_req" modal="false" autosized="true" resizeable="false">
<f:facet name="header">
<h:outputText value="Request New Sector/Category" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#"
onclick="#{rich:component('popup_sys_user_req')}.hide(); return false;">
X
</h:outputLink>
</f:facet>
<h:panelGrid columns="2">
<h:outputLabel value="Request New:" />
<h:selectOneMenu id="sys_req_type" value="#{userController.selectedSysUserRequest.sysrequesttype}" required="true" >
<f:selectItems value="#{userController.getSysRequestTypeItems('SECTOR_CATEGORY')}">
</f:selectItems>
</h:selectOneMenu>
<h:outputLabel value="Description:" />
<h:inputTextarea id="user_req_desc" value="#{userController.selectedSysUserRequest.description(desc)}" required="true" requiredMessage="Decription is missing" />
</h:panelGrid>
<a4j:commandButton action="#{userController.CreateSysUserRequest()}" value="Send Request" execute="sys_user_req_form" oncomplete="#{rich:component('popup_sys_user_req')}.hide(); return false;"/>
</rich:popupPanel>
</a4j:region>
</h:form>
The commandLink (re-edit)
<h:commandLink actionListener="#{userController.prepareCreateSysRequest}" value="Request New Sector/Category">
<f:ajax execute="popup_sys_user_req #this" render="popup_sys_user_req">
<rich:componentControl id="popup_ctr" event="click" target="popup_sys_user_req" operation="show"/>
</f:ajax>
</h:commandLink>
----------------------------
//Managed Bean:
public void prepareCreateSysRequest(ActionEvent event ) {
selectedSysUserRequest = new Sysuserrequest();
JsfUtil.log("Prepare Create System User Request");
}
This post continues the dicussion about the pop-up panel.
Greetings Chris.
If I understand correctly you want to submit all form elements inside popupPanel but not outside the panel when you invoke someAction1? I can think of two ways to do this:
1. a4jcommandButton has a limitToList attribute, you can list which components you want to be updated on the server
2. create your popupPanel outside of the first form and then use its own form:
<h:form>
...
<a4j:commandButton action="someAction2"...
</h:form>
<rich:popupPanel>
<h:form>
...
<a4j:commandButton action="someAction1"...
</h:form>
</rich:popupPanel>
Update
If you are using RichFaces 4 you can replace the limitToList attribute with limitRender
The problem is that the popup isn't a child of the form in jsf, you only need to use the domElementAttachment attribute to change that. So your code would look like this:
<h.form>
...
<a4j:region>
<rich:popupPanel id="popup_sys_user_req" modal="false" autosized="true" resizeable="false" domElementAttachment="form">
<f:facet name="header">
...