render richfaces popupPanel after bean method is finished - jsf

I have a simple problem where I want to display a popup if something went wrong in my managed bean.
The bean holds a list of exceptions that can be raised, with getter/setter methods.
The xhtml looks like this
<rich:panel>
<h:form>
<a4j:commandButton value="Compute Mission"
action="#{missionHandler.generateMissionFeasability}"
render="popupPanel">
</a4j:commandButton>
</h:form>
</rich:panel>
<rich:popupPanel id="popupPanel" modal="true" autosized="true"
resizeable="false" moveable="false" rendered="#{not empty missionHandler.exceptions}">
<f:facet name="header">
<h:outputText value="Exceptions raised during the processing " />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#"
onclick="#{rich:component('popupPanel')}.hide();return false;">
</h:outputLink>
</f:facet>
</rich:popupPanel>
As you see I have a command button that should call generateMissionFeasibility method in the bean.
The method will (among other things) add exception in the exceptions list.
I would like to check the list (if it's empty or not) to display the popup
The code above doesn't work because I think the popup is rendered before the end of the method in the bean, and the list is empty at the beginning.

One way to make popup panel be shown once rendered is to change
rendered="#{not empty missionHandler.exceptions}"
to
show="#{not empty missionHandler.exceptions}"

The code doesn't work because the first time the view is about to be rendered, missionHandler.exceptions will be empty, which means popupPanel never makes it to the browser. Subsequent requests to reRender popupPanel will fail as the component is nowhere to be found in the DOM.
For a component to be ajax-updated, it must already be in the DOM in the browser, this is the way ajax works. So the solution is to wrap the content of the popup panel in a component that will always be rendered.
That aside, even if you got the rendering correct, your popup will only be placed in the DOM. You actually need to call show() on the popup to get it to showup
To achieve what you want however, a better alternative will be to
Conditionally display the popup using javascript. If the condition is met, the show() function is called for the popup. Otherwise, an empty, do-nothing javascript function will be called.
<a4j:commandButton value="Compute Mission" action="#missionHandler.generateMissionFeasability}"
oncomplete="#{not empty missionHandler.exceptions ? #{rich:component('popupPanel')}.show()" : doNothing()}" render="popupPanel">
</a4j:commandButton>
For the doNothing js:
<script> function doNothing(){} <script/>
Take the rendering condition out of the modal panel
EDIT: Additionally, the show attribute on the popup component can be based on the same EL condition as the oncomplete attribute

Related

What is the correct way to use RequestScoped Bean and rendered attribute?

does anybody know how to use RequestScoped bean together with rendered attribute in jsf? The rendered attribute is evaluated before applyValues phase and therefore is not correctly evaluated. I don't want to preserve any state. The example could be an outputPanel with a datatable and a button. The datatable gets a list of values. The wrapping outputPanel has the rendered attribute like:
<p:outputPanel rendered="#{not empty requestScopedBean.dataList}">
<p:datatable value="#{requestScopedBean.dataList}">
...
</p:datatable>
<p:commandButton action="#{requestScopedBean.someAction}" />
</p:outputPanel>
After loading the page and clicking on the button, nothing happens, because the view is restored and expressions are evaluated - the bean does have an empty datalist and therefore the panel should not be rendered. This causes that the action method is not even called - because the button doesn't exist.
If you're not interested in having a filled data table at that moment, just add an extra check in rendered attribute if the command button of interest has been invoked. You can do that by checking the presence of button's client ID in request parameter map.
<p:outputPanel rendered="#{not empty requestScopedBean.dataList or not empty param[someButton.clientId]}">
...
<p:commandButton binding="#{someButton}" ... />
</p:outputPanel>
See also:
How to let validation depend on the pressed button?

Cannot call action methods on RequestScoped Bean from tabView [duplicate]

does anybody know how to use RequestScoped bean together with rendered attribute in jsf? The rendered attribute is evaluated before applyValues phase and therefore is not correctly evaluated. I don't want to preserve any state. The example could be an outputPanel with a datatable and a button. The datatable gets a list of values. The wrapping outputPanel has the rendered attribute like:
<p:outputPanel rendered="#{not empty requestScopedBean.dataList}">
<p:datatable value="#{requestScopedBean.dataList}">
...
</p:datatable>
<p:commandButton action="#{requestScopedBean.someAction}" />
</p:outputPanel>
After loading the page and clicking on the button, nothing happens, because the view is restored and expressions are evaluated - the bean does have an empty datalist and therefore the panel should not be rendered. This causes that the action method is not even called - because the button doesn't exist.
If you're not interested in having a filled data table at that moment, just add an extra check in rendered attribute if the command button of interest has been invoked. You can do that by checking the presence of button's client ID in request parameter map.
<p:outputPanel rendered="#{not empty requestScopedBean.dataList or not empty param[someButton.clientId]}">
...
<p:commandButton binding="#{someButton}" ... />
</p:outputPanel>
See also:
How to let validation depend on the pressed button?

Conditionally rendering p:commandLinks

I'm implementing some search filters. A <p:commandLink> is displayed beside each search component (<p:inputText>, <p:selectOneMenu> etc).
<p:inputText id="text" value="#{bean.text}" required="true"/>
<h:panelGroup id="panelGroup">
<p:commandLink process="#this text" update="panelGroup text" actionListener="#{bean.action}" rendered="#{empty param['form:text']}">
<h:outputText styleClass="ui-icon ui-icon-search"/>
</p:commandLink>
<p:commandLink process="#this" update="panelGroup text" actionListener="#{bean.resetAction}" rendered="#{not empty param['form:text']}">
<h:outputText styleClass="ui-icon ui-icon-trash"/>
<p:resetInput target="text"/>
</p:commandLink>
</h:panelGroup>
When the first <p:commandLink> (the one with the search icon) is clicked and the given <p:inputText> is not empty, the link is expected to disappear and another link (the one with the trash icon) is expected to be rendered (and vice versa).
This happens but the action listener as indicated by the first link (actionListener="#{bean.action}") is not invoked because the link is rendered based on the value of <p:inputText>. rendered="#{empty param['form:text']}" is responsible for preventing the listener from being invoked.
Also when the link with the trash icon appears, it resets the input component, if it is clicked but it does not disappear. it disappears only when it is clicked once again (and then the search appears).
How to handle this situation correctly? If no validation/conversion is violated and the search link is clicked then, the link should disappear and the trash link should be rendered.
On the contrary, when the trash link appears and if it is clicked, it should reset the <p:inputText> and then disappear so that the search link can be rendered.
You actually want to toggle the rendering only after the action is invoked. The rendered attribute is namely also obeyed during apply request values phase, when the action event is about to be queued. If it evaluates false, then the action event won't be queued and therefore the action won't be invoked during invoke application phase.
Better just check the model value directly. The action is queued before the model value is set. And, this should also work better when there's conversion/validation on the model value.
<p:inputText ... value="#{bean.text}" />
<p:commandLink ... rendered="#{empty bean.text}" />
<p:commandLink ... rendered="#{not empty bean.text}" />

How to rerender component inside modalpanel?

Is it possible? if yes, how do i do it?
I need to rerender a <h:outputText> after an <a4j:commandLink> action is executed, both components are inside a modalpanel and that modalpanel is inside a
I tried:
<a4j:commandLink value="somevalue" id="someid" action="#{MyBean.myAction()}"
reRender="outputtextid">
<f:param name="paramid" value="paramvalue"/>
</a4j:commandLink>
Make sure your <h:outputText> is outside the form that contains the <a4j:commandLink> or else it will bind the value of the outputText with the actual value in the form, leading to odd behavior in your page.
<h:form>
<a4j:commandLink value="somevalue" id="someid" action="#{MyBean.myAction()}"
reRender="outputtextid">
<f:param name="paramid" value="paramvalue"/>
</a4j:commandLink>
</h:form>
<h:outputText value="#{MyBean.outputValue}" id="outputtextid" />
If you must have the <h:outputText> inside the form, you should consider updating the value using the oncomplete tag attribute in the commandLink that executes JavaScript code.
In case you want to show a message to the user, you can use <h:messages> or <rich:messages> tag component, this will be a better option than using an outputText.

JSF ReRender support with selectBooleanCheckbox

I have a JSF page on which I want to have a checkbox that, when clicked, will add/remove certain other form fields from the page. Here is the (simplified) code I currently have for the checkbox:
<h:selectBooleanCheckbox title="showComponentToReRender" value="#{backingBean.showComponentToReRender}">
<a4j:support event="onsubmit" reRender="componentToReRender" />
</h:selectBooleanCheckbox>
Here is the code for the component I want to hide:
<h:selectOneMenu id="componentToReRender" value="#{backingBean.value}" rendered="#{valuesList.rowCount>1 && backingBean.showComponentToReRender}">
<s:selectItems value="#{valuesList}" var="value"/>
</h:selectOneMenu>
Currently, clicking the checkbox does nothing; that "selectOneMenu" will not go away. What am I doing wrong?
You need to wrap the componentToReRender in either:
<h:panelGroup id="componentToReRenderWrapper">
or
<a4j:outputPanel id="componentToReRenderWrapper">
So, effectively you will have:
<h:panelGroup id="componentToReRenderWrapper">
<h:selectOneMenu id="componentToReRender" value="#{backingBean.value}" rendered="#{valuesList.rowCount>1 && backingBean.showComponentToReRender}">
<s:selectItems value="#{valuesList}" var="value"/>
</h:selectOneMenu>
</h:panelGroup>
and change the reRender="componentToReRenderWrapper" in case you use panelGroup, or remove that attribute, in case you use outputPanel.
Found the exact explanation in the RichFaces docs:
Most common problem with using reRender is pointing it to the component that has a "rendered" attribute. Note, that JSF does not mark the place in the browser DOM where the outcome of the component should be placed in case the "rendered" condition returns false. Therefore, after the component becomes rendered during the Ajax request, RichFaces delivers the rendered code to the client, but does not update a page, because the place for update is unknown. You need to point to one of the parent components that has no "rendered" attribute. As an alternative, you can wrap the component with layout="none" .
Don't forget to set ajaxRendered="true" on the a4j:outputPanel

Resources