Link to home
Start Free TrialLog in
Avatar of qrahman
qrahman

asked on

Richfaces modal panel text display problem

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

ASKER CERTIFIED SOLUTION
Avatar of mbonaci
mbonaci
Flag of Croatia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of qrahman
qrahman

ASKER

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.
Bind the field value to the property in backing bean so you can easily get it in your method.
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.