?
Solved

Richfaces modal panel text display problem

Posted on 2009-02-07
4
Medium Priority
?
16,185 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

0
Comment
Question by:qrahman
  • 3
4 Comments
 
LVL 22

Accepted Solution

by:
mbonaci earned 1500 total points
ID: 23585443
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¤
0
 

Author Comment

by:qrahman
ID: 23587182
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.
0
 
LVL 22

Expert Comment

by:mbonaci
ID: 23587227
Bind the field value to the property in backing bean so you can easily get it in your method.
0
 
LVL 22

Expert Comment

by:mbonaci
ID: 23587245
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.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
A solution for Fortify Path Manipulation.
The viewer will learn how to implement Singleton Design Pattern in Java.
This tutorial covers a practical example of lazy loading technique and early loading technique in a Singleton Design Pattern.

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question