Error in showing a Rich Modal Panel with JSF 1.2 & rich faces

Question

I have a problem in showing a Modal Panel with JSF 1.2 & rich faces. I have to use a jsp because of project restrictions. The a4j commandLink does submit to the server and it comes back to the browser and the browser blinks but nothing shows up.

This is the fragment I used in my jsp

....
....
<f:view>
....
....
<h:form id="buildForm">
....
....
    <a4j:commandLink id="showItem" action="#{popupBean.selectAttributeAction}" oncomplete="Richfaces.showModalPanel('modalPanelId',{width:550, top:200});" reRender="modalPanelId">
        Click Here!
    </a4j:commandLink>
    <rich:modalPanel id="modalPanelId" width="350" height="100">
         <!-- the external content is loaded inside this tag -->
         <div id="modalPanelResult">
              This is test modal popup
          </div>
    </rich:modalPanel>
....
....
</h:form>
</f:view>
....

This is the error I get when I include above fragment in my jsp

panel.component is undefined

...,opts);});};Richfaces.hideModalPanel=function(id,opts,event){var panel=$(id);if(...

If I use the same in a seperate Test jsp (shown below) - which I created to test, it works fine.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>

<f:view>
    <a4j:commandLink id="showItem" action="#{popupBean.selectAttributeAction}" oncomplete="Richfaces.showModalPanel('modalPanelId',{width:550, top:200});" reRender="modalPanelId">
        Click Here!
    </a4j:commandLink>
    <rich:modalPanel id="modalPanelId" width="350" height="100">
         <!-- the external content is loaded inside this tag -->
         <div id="modalPanelResult">
              This is test modal popup
          </div>
    </rich:modalPanel>
</f:view>
</body>
</html>

Thanks and I appreciate any help from you guys. I have spent couple of days struggling to do this. I had another css solution that I used after a4j jsfunction call to server to get info for the popup and show the overlay popup but that does not work in Chrome and it works in IE with a script error in jquery script code and not in my code, but works fine in Firefox, that is when I switched to Richfaces solution thinking it looks very somple but once I include a test working (on seperate page) solution to my jsp it does not work.

Did you try alternative JS API provided like `#{rich:component('mp')}.show()` in link (http://livedemo.exadel.com/richfaces-demo/richfaces/modalPanel.jsf?c=modalPanel#) — Ahamed Mustafa M, May 14 '12 at 14:06
Thanks @AhamedMustafaM for taking time to go thru my question, I tried #{rich:component('mp')}.show() as well it does not work either. SOmethign about my jsp is causing this, I got an HTML from UI designer and changed it to a jsp and added the jsf part as well. — Surya Govi, May 14 '12 at 19:04

score 1 · Answer 1 · answered Aug 14 '12 at 17:51

Have you tried the following code:

<a4j:commandLink id="showItem" action="#{popupBean.selectAttributeAction}" reRender="modalPanelId">
    Click Here!
<rich:componentControl for="modalPanelId" attachTo="showItem" operation="show" event="onclick" />
</a4j:commandLink>

? If not, please do, got that working here

score 0 · Answer 2 · answered May 31 '13 at 10:10

Here is the example how to open rich:modalPanel

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<f:view>
    <head>
        <title>User Registration</title>
    </head>
    <body>
        <jsp:include page="/views/common/styles.jsp"></jsp:include>
        <h:form id="userRegistrationForm">
            <table cellpadding="0" cellspacing="0" border="0" align="center">
                <tr class="rowspace5px"></tr>
                <tr>
                    <td>
                        <table cellpadding="0" cellspacing="3" border="0">
                            <tr>
                                <td>
                                    <h:outputText styleClass="mandatorymarkwidth error" value="*"></h:outputText>
                                </td>
                                <td class="lblwidthfirstpair">
                                    <h:outputText styleClass="labelfont" value="Security Question"></h:outputText>
                                </td>
                                <td>
                                    <h:inputText id="textSecurityQuestionId" styleClass="controlfont" disabled="true" value="#{UserRegistrationBean.textSecurityQuestion}"></h:inputText>
                                </td>
                                <td>
                                    <h:commandButton image="/images/Add_Icon.gif" onclick="Richfaces.showModalPanel('securityQuestionPanel'); return false;">
                                        <a4j:support event="onclick" reRender="userRegistrationForm" oncomplete="Richfaces.showModalPanel('securityQuestionPanel');"></a4j:support>
                                    </h:commandButton>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </h:form>
        <rich:hotKey key="esc" handler="Richfaces.hideModalPanel('securityQuestionPanel');"></rich:hotKey>
        <rich:modalPanel id="securityQuestionPanel" moveable="false" width="450" height="280" resizeable="false">
            <f:facet name="header">
                <h:outputText value="Security Question"></h:outputText>
            </f:facet>
            <f:facet name="controls">
                <h:panelGroup>
                    <h:graphicImage id="securityQuestionImage" value="../../images/close.png" styleClass="hidelink" style="cursor: pointer;" />
                    <rich:componentControl for="securityQuestionPanel" attachTo="securityQuestionImage" operation="hide" event="onclick" />
                </h:panelGroup>
            </f:facet>
            <a4j:form id="securityQuestionForm">
                <table border="0" cellspacing="0" cellpadding="0" width=100%>
                    <tr class="trseperator5"></tr>
                    <tr>
                        <td>
                            <table cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td class="lblwidthfirstpair">
                                        .
                                        .
                                        .
                                        .
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr class="trseperator3"></tr>
                </table>
            </a4j:form>
        </rich:modalPanel>
    </body>
</f:view>

Error in showing a Rich Modal Panel with JSF 1.2 & rich faces

2 Answers2