We help IT Professionals succeed at work.

Richfaces modal panel text display problem

qrahman
qrahman asked
on
Medium Priority
16,339 Views
Last Modified: 2013-11-24
I am new to JSF/Richfaces. I have a a4j:commandButton, clicking on which brings up a modal panel. I am setting 3 properties in the backing bean using a4j:actionparam within the a4j:commandButton code block. My intention is that when the button is clicked, modal window code will read these properties from the backing bean and display message appropriately. Problem: the moment the page that has the button is loaded, the getters (value is null at this point) in modal panel are already being invoked even though I haven't clicked on the button yet. The values being set using actionparam are being completely ignored. If I am not very clear describing the problem, please ask me questions.
-----------------
Button code
-----------------
 
<a4j:commandButton value="Reconcile"
                   disabled="#{ViewResult.reconciliationNotAllowed}"
                   oncomplete="javascript:Richfaces.showModalPanel('confirmPanel');">
      <a4j:actionparam name="contentStatusCS" value="#{contentDetail.contentStatusCS}" assignTo="#{ViewResultDetail.contentStatusCS}"></a4j:actionparam>
     <a4j:actionparam name="contentName" value="#{contentDetail.contentName}" assignTo="#{ViewResultDetail.contentName}"></a4j:actionparam>
     <a4j:actionparam name="moduleName" value="#{contentDetail.moduleName}" assignTo="#{ViewResultDetail.moduleName}"></a4j:actionparam>
</a4j:commandButton>
 
--------------------------------------------------------------
Modal Panel (note the getters in the message body)
---------------------------------------------------------------
 
 <rich:modalPanel id="confirmPanel" autosized="false" keepVisualState="false" width="400" height="150">
    <f:facet name="header">
       <h:outputText value="Confirm Delete" />
    </f:facet>
    <h:panelGroup layout="block" styleClass="scrolls">
       <h:form>
          <center><rich:spacer height="20" /> 
		<h:panelGrid columns="1">
                  <h:outputText value="Do you want to delete the #{ViewResultDetail.contentStatusCS} content #{ViewResultDetail.contentName} from content store [name]?" />
                    </h:panelGrid> <rich:spacer height="30" /> <h:panelGrid columns="2">
                                    <a4j:commandButton value="OK" onclick="Richfaces.hideModalPanel('confirmPanel');" />
                                    <a4j:commandButton value="Cancel" onclick="Richfaces.hideModalPanel('confirmPanel');" />
                     </h:panelGrid>
          </center>
       </h:form>
    </h:panelGroup>
</rich:modalPanel>
 
 
---------------------------------------
The whole file ViewResult.xhtml
----------------------------------------
 
<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:c="http://java.sun.com/jstl/core"
      xmlns:a4j="http://richfaces.org/a4j">
    <body>
 
        <ui:composition template="/template.xhtml">
            <ui:define name="body">
 
 
                <h:outputText value= "This report was executed on Jan 27, 2009 at 9:00 PM"/>
                <br/><br/>
 
                <rich:tabPanel switchType="ajax">
                    <c:forEach items="#{ViewResult.distinctModulesForContentReconciliationResultDetails}" var="module">
                        <rich:tab label="#{module}" actionListener="#{ViewResult.currentModuleName}" >
                            <h:form>
                                <rich:dataTable onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
                                                onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
                                                id="reportList" rows="10" value="#{ViewResult.detailsForModuleName}"
                                                var="contentDetail" selectionMode="single">
 
                                    <rich:column align="center">
                                        <f:facet name="header">Package Name</f:facet>
                                        <h:outputText value="#{contentDetail.packageName}" />
                                    </rich:column>
                                    <rich:column align="center">
                                        <f:facet name="header">Provider ID</f:facet>
                                        <h:outputText value="#{contentDetail.providerID}" />
                                    </rich:column>
                                    <rich:column align="center">
                                        <f:facet name="header">Asset ID</f:facet>
                                        <h:outputText value="#{contentDetail.assetID}" />
                                    </rich:column>
                                    <rich:column align="center">
                                        <f:facet name="header">Content Name</f:facet>
                                        <h:outputText value="#{contentDetail.contentName}" />
                                    </rich:column>
                                    <rich:column align="center">
                                        <f:facet name="header">Asset Class</f:facet>
                                        <h:outputText value="#{contentDetail.assetClass}" />
                                    </rich:column>
                                    <rich:column align="center">
                                        <f:facet name="header">Spec</f:facet>
                                        <h:outputText value="#{contentDetail.spec}" />
                                    </rich:column>
                                    <rich:column align="center">
                                        <f:facet name="header">Content Export Status</f:facet>
                                        <h:outputText value="#{contentDetail.contentExportStatus}" />
                                    </rich:column>
                                    <rich:column  align="center">
                                        <f:facet name="header">Content on Content Store</f:facet>
                                        <h:outputText value="#{contentDetail.contentStatusCS}" />
                                    </rich:column>
                                    <rich:column align="center">
                                        <f:facet name="header">Reconcile Result</f:facet>
                                        <h:outputText value="#{contentDetail.reconcileResult}" />
                                    </rich:column>
                                    <rich:column>
                                        <f:facet name="header">Action</f:facet>
                                        <a4j:commandButton value="Reconcile"
                                                           disabled="#{ViewResult.reconciliationNotAllowed}"
                                                           oncomplete="javascript:Richfaces.showModalPanel('confirmPanel');">
                                            <a4j:actionparam name="contentStatusCS" value="#{contentDetail.contentStatusCS}" assignTo="#{ViewResultDetail.contentStatusCS}"></a4j:actionparam>
                                            <a4j:actionparam name="contentName" value="#{contentDetail.contentName}" assignTo="#{ViewResultDetail.contentName}"></a4j:actionparam>
                                            <a4j:actionparam name="moduleName" value="#{contentDetail.moduleName}" assignTo="#{ViewResultDetail.moduleName}"></a4j:actionparam>
                                        </a4j:commandButton>
 
 
                                    </rich:column>
                                </rich:dataTable>
                                <rich:datascroller align="left" for="reportList" maxPages="10"/>
                            </h:form>
                        </rich:tab>
                    </c:forEach>
                </rich:tabPanel>
 
                <rich:modalPanel id="confirmPanel" autosized="false"
                                 keepVisualState="false" width="400" height="150">
                    <f:facet name="header">
                        <h:outputText value="Confirm Delete" />
                    </f:facet>
                    <h:panelGroup layout="block" styleClass="scrolls">
                        <h:form>
                            <center><rich:spacer height="20" /> <h:panelGrid
                                    columns="1">
                                    <h:outputText value="Do you want to delete the #{ViewResultDetail.contentStatusCS} content [content-name] from content store [name]?" />
 
                                </h:panelGrid> <rich:spacer height="30" /> <h:panelGrid columns="2">
                                    <a4j:commandButton value="OK" onclick="Richfaces.hideModalPanel('confirmPanel');" />
                                    <a4j:commandButton value="Cancel" onclick="Richfaces.hideModalPanel('confirmPanel');" />
                            </h:panelGrid></center>
 
                        </h:form>
                    </h:panelGroup>
                </rich:modalPanel>
 
 
            </ui:define>
        </ui:composition>
    </body>
</html>

Open in new window

Comment
Watch Question

Commented:
I think you are complicating unnecessary with use of <a4j:actionparam>?
I suggest you to use "action" param of the commandButton to call the method in the backing bean and there set all values you want shown in Modal Panel. Leave onComplete as it is and call reRender="confirmPanel", like this:

<a4j:commandButton value="Reconcile" disabled="#{ViewResult.reconciliationNotAllowed}" oncomplete="javascript:Richfaces.showModalPanel('confirmPanel');" reRender="confirmPanel" action="#{ViewResult.onShowModal}">

Do the same (use action to call managed bean method) with Command buttons inside Modal panel.


I hope this helps,
Mb¤

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
Not sure how I could make this work without passing params because backing bean does not any knowledge of the user selection, however your post made me realize that I needed to reRender the modal panel to make it work. Once I reRendered the modal window, it's working as expected.Thanks for your help.

Commented:
Bind the field value to the property in backing bean so you can easily get it in your method.

Commented:
Aha, you mean user selection in the modal panel?
Well, same as you do in the commandButton which you use to raise modalPanel, use action or actionListener on both Ok and Cancel commandButtons to call different methods of backing bean.
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.