Page is not properly opened: modal panel is not shown.
Hello Community,
We have a weird problem with one of our pages in the web application.
This page represents the step-by-step leasing process (6-step wizard).
Will try to explain what the problem is from the beginning.
We use RichFaces
Basically, this 6-step wizard comprises of 7 JSF sources.
One of these, leasing.jsp, acts as a holder for all other pages and contains a4j:include element,
pointing to the JSP of the first step, like this:
<a4j:region id="leasingwizard" >
<h:panelGroup id="wizard">
<a4j:include id="wizardInclude"
viewId="/pages/leasing/reservation.jsp"
binding= "#{leasing.uiInclude}"
layout="block" styleClass="wizard"/>
</h:panelGroup>
</a4j:region>
So, here "/pages/leasing/reservation.jsp" acts as a JSP for the first step.
Each of these JSPs has submit buttons which perform forward and backward navigation through the wizard.
Here is an excerpt of JSP for one of steps:
...
<h:panelGroup id="schCommandButtons" styleClass="wizard-footer">
...
<a4j:commandButton id="nextBtn" value="next" reRender="wizard"
styleClass="cmd-btn"
ignoreDupResponses="true" requestDelay="200"
onfocus="return createConfiguration(this, event);"
action="#{leasing.createBasketConfiguration}"/>
<a4j:commandButton id="backBtn" value="back" action="back"
reRender="wizard, schContent" styleClass="cmd-btn"
ignoreDupResponses="true" requestDelay="200" />
...
</h:panelGroup>
...And navigation rules like this:
... <navigation-rule> <from-view-id>/pages/leasing/optionsConfiguration.jsp</from-view-id> <navigation-case> <from-outcome>back</from-outcome> <to-view-id>/pages/leasing/serviceConfiguration.jsp</to-view-id> </navigation-case> <navigation-case> <from-outcome>next</from-outcome> <to-view-id>/pages/leasing/additionalInstructions.jsp</to-view-id> </navigation-case> </navigation-rule> ...
So, when user clicks 'back' or 'next' button, a4j:include component rerenders <h:panelGroup>
from core JSP.
Everything worked great except for one of our page for step 4.
I am giving the full code for this page:
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich"%>
<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="x" uri="http://java.sun.com/jstl/xml_rt" %>
<h:panelGroup id="scheduleHeader" styleClass="wizard-header">
<h:panelGroup id="titles" styleClass="pages-titles">
<h:panelGroup styleClass="#{leasing.donePageTitleClass}">
<h:graphicImage value="../../images/checked.png" styleClass="titles-img"/>
<h:outputLabel value="Reservation"/>
</h:panelGroup>
<h:panelGroup styleClass="#{leasing.donePageTitleClass}">
<h:graphicImage value="../../images/checked.png" styleClass="titles-img"/>
<h:outputLabel value="Service Configuration"/>
</h:panelGroup>
<h:panelGroup styleClass="#{leasing.activePageTitleClass}">
<h:graphicImage value="../../images/numbers/3b.gif" styleClass="titles-img"/>
<h:outputLabel value="Options Configuration"/>
</h:panelGroup>
<h:panelGroup styleClass="#{leasing.pageTitleClass}">
<h:graphicImage value="../../images/numbers/4.gif" styleClass="titles-img"/>
<h:outputLabel value="Additional Instructions"/>
</h:panelGroup>
<h:panelGroup styleClass="#{leasing.pageTitleClass}">
<h:graphicImage value="../../images/numbers/5.gif" styleClass="titles-img"/>
<h:outputLabel value="Buyer Information"/>
</h:panelGroup>
<h:panelGroup styleClass="#{leasing.pageTitleClass}">
<h:graphicImage value="../../images/numbers/6.gif" styleClass="titles-img"/>
<h:outputLabel value="Submit Order"/>
</h:panelGroup>
</h:panelGroup>
<h:panelGroup styleClass="header-service-name">
<h:panelGroup styleClass="head-provider-name">
<h:outputText value="#{leasing.currentService.providerName}"/>
</h:panelGroup>
<h:panelGroup styleClass="head-offering-name">
<h:outputText value="#{leasing.currentService.name}"/>
</h:panelGroup>
<%-- Service amount due.--%>
<h:panelGroup styleClass="amount-due">
<h:outputLabel value="Service Fee, $"/>
<h:inputText id="amountDueAll" styleClass="text"
binding="#{leasing.amountDue}"/>
<h:inputText id="periodCount" value="#{reservationBean.periodQuantity}"
styleClass="period-quantity"/>
</h:panelGroup>
</h:panelGroup>
</h:panelGroup>
<h:panelGroup id="schContent" styleClass="wizard-page-content">
<h:panelGroup id="treeHolder" styleClass="tree-holder">
<h:panelGroup id="addItemHolder" styleClass="add-item-holder">
<a4j:commandButton id="addFromTreeBtn" value="Add Configuration"
styleClass="cmd-btn-long"
ignoreDupResponses="true" requestDelay="200"
onclick="Richfaces.showModalPanel('addFromTreeMp');"/>
</h:panelGroup>
<%--
Tree of composite service provider sub services for composite.
Ajax request submited when selecting node.
Component bind to <code>treeComponent</code> in leasing bean.
<code>onSelectedTreeNode</code> an action listener method that will be notified after selection of node.
Client side tree switch algorithm.
treeModel - current value of this component.
--%>
<rich:tree id="basketTree" ajaxSubmitSelection="true"
binding="#{leasing.treeComponent}"
switchType="client" styleClass="service-tree"
var="item" nodeFace="nodeType"
nodeSelectListener="#{leasing.onSelectTreeNode}"
value="#{leasing.treeModel}">
<rich:treeNode type="nodeType">
<h:outputText value="#{item.name}" />
</rich:treeNode>
</rich:tree>
</h:panelGroup>
<h:panelGroup id="srvHolder" styleClass="table-holder">
<%--
Table with subservices
--%>
<rich:datascroller for="serviceTable" id= "serviceListScroller"
styleClass="service-table-scroller"
fastStep="1" ignoreDupResponses="true"
renderIfSinglePage="false" ajaxSingle="true" limitToList="true"
reRender="serviceTable, serviceListScroller"/>
<rich:dataTable id="serviceTable" styleClass="sub-srv-table"
onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
onRowMouseOut="this.style.backgroundColor='#FFFFFF'"
cellpadding="0" cellspacing="0" var="record"
value="#{leasing.records}"
border="0" rows="2"
columnClasses="header-service, header-name, header-annotation, header-actions">
<f:facet name="header">
<rich:columnGroup>
<rich:column><h:outputText value="Item"/></rich:column>
<rich:column><h:outputText value="Name" /></rich:column>
<rich:column><h:outputText value="Description" /></rich:column>
<rich:column><h:outputText value=" " /></rich:column>
</rich:columnGroup>
</f:facet>
<rich:column>
<a4j:commandLink value="#{record.serviceName}"
onfocus="return createConfiguration(this, event);"
reRender="srvHolder, subSpecification"
actionListener="#{leasing.onServiceLinkClicked}" />
</rich:column>
<rich:column>
<h:outputText value="#{record.productName}("></h:outputText>
<a4j:commandLink value="change" onclick="Richfaces.showModalPanel('editNameMp');"
actionListener="#{leasing.onNameLinkClicked}" reRender="inputedName"/>
<h:outputText value=")"></h:outputText>
</rich:column>
<rich:column>
<h:outputText value="#{record.serviceAnnotation}"></h:outputText>
</rich:column>
<rich:column>
<a4j:commandLink value="Clone" actionListener="#{leasing.onCloneLinkClicked}"/>
<a4j:commandLink value="Delete"
actionListener="#{leasing.onDeleteLinkClicked}"
reRender="subSpecification, serviceTable,
serviceListScroller, srvHolder, amountDueAll "/>
</rich:column>
</rich:dataTable>
</h:panelGroup>
<h:panelGroup id="subSpecification" styleClass="specification-view">
<%-- content --%>
<f:verbatim>
<c:import url="../../xslt/productspec/specificationPreview.xsl" var="xsl" />
<c:if test="${sessionScope.leasing.currSubProductTemplateXML != null
&& sessionScope.leasing.currSubProductSpecXML != null}">
<x:parse xml="${sessionScope.leasing.currSubProductTemplateXML}" var="tpl"/>
<x:transform xml="${sessionScope.leasing.currSubProductSpecXML}" xslt="${xsl}">
<x:param name="template" value="${tpl}"/>
</x:transform>
</c:if>
</f:verbatim>
</h:panelGroup>
<h:inputTextarea id="configuration" binding="#{leasing.currentSubConfArea}"
styleClass="config-area"/>
</h:panelGroup>
<h:panelGroup id="schCommandButtons" styleClass="wizard-footer">
<a4j:commandButton id="cancelBtn" value="cancel" disabled="true"
styleClass="cmd-btn"
ignoreDupResponses="true" requestDelay="200" />
<a4j:commandButton id="saveBtn" value="save" styleClass="cmd-btn"
ignoreDupResponses="true" requestDelay="200" disabled="true"/>
<a4j:commandButton id="nextBtn" value="next" reRender="wizard"
styleClass="cmd-btn"
ignoreDupResponses="true" requestDelay="200"
onfocus="return createConfiguration(this, event);"
action="#{leasing.createBasketConfiguration}"/>
<a4j:commandButton id="backBtn" value="back" action="back"
reRender="wizard, schContent" styleClass="cmd-btn"
ignoreDupResponses="true" requestDelay="200" />
</h:panelGroup>
<rich:modalPanel id="editNameMp" minHeight="100" minWidth="150" height="150" width="200" zindex="2000">
<f:facet name="header">
<h:outputText value="Input name" />
</f:facet>
<h:outputText value="Name:"/>
<h:inputText value="#{leasing.inputedName}" id="inputedName"/>
<h:panelGrid columns="2" style="position:relative;top:25px;left:-120px;">
<a4j:commandButton ignoreDupResponses="true" requestDelay="200" value="Cancel" onclick="Richfaces.hideModalPanel('editNameMp');" styleClass="cmd-btn" />
<a4j:commandButton ignoreDupResponses="true" requestDelay="200" value="OK" onclick="Richfaces.hideModalPanel('editNameMp');"
action="#{leasing.onSaveNameClicked}" reRender="srvHolder" styleClass="cmd-btn"/>
</h:panelGrid>
</rich:modalPanel>
<%--
Add from tree modal panel.
--%>
<rich:modalPanel id="addFromTreeMp" minHeight="90" minWidth="220"
height="90" width="220" zindex="2000">
<f:facet name="header"><h:outputText value="Input name" /></f:facet>
<h:outputLabel value="Name:"/>
<h:inputText value="#{leasing.inputedName}" id="inputedName2"/>
<h:panelGroup styleClass="modal-cmd-btns">
<a4j:commandButton ignoreDupResponses="true" value="Cancel"
requestDelay="200" styleClass="cmd-btn"
onclick="Richfaces.hideModalPanel('addFromTreeMp');" />
<%-- Add service to table item. --%>
<a4j:commandButton ignoreDupResponses="true" value="OK"
reRender="srvHolder, amountDueAll, subSpecification"
requestDelay="200"
onclick="Richfaces.hideModalPanel('addFromTreeMp');"
action="#{leasing.onAddFromTreeClicked}" styleClass="cmd-btn"/>
</h:panelGroup>
</rich:modalPanel>The core components of the page is a tree and a table.
User may observe elements in the tree, select particular tree node, click 'Add Configuration' button,
modal panel will appear with the prompt to enter name for the resource.
User specifies name, confirms it and sees the table updated with this new element.
The process looks like inserting items to the cart.
Now about the problem itself.
The problem is that when user enters this very step, modal panel is not opened when
'Add Configuration' button is clicked.
JavaScript error occurs, stating:
panel has no properties
showModalPanel("addFromTreeMp", undefined)modalPanel.js (line 59)
onclick(click clientX=0, clientY=0)leasing.jsp (line 1)
[Break on this error] panel.modalPanel.show(opts);}
The most interesting thing is that such behaviour is not a case when accessing page from localhost,
but it is a case when we application is hosted remotely on our servers.
We installed VNC for Linux and opened the browser on the server
referencing application on localhost: problem is not seen!!!
So that is not the problem of the server-specific config or application version, etc.
When page is accessed from the outside, seems like it is not fully loaded and this weird effect takes place.
One more remark: browser's refresh button resolves the issue:
page is reloaded and all actions may be done without any problem.
Previously we have a problem even with tree: there was no possibility to expand tree items.
After clicking refresh, tree worked fine and modal panel logic worked fine, but elements were not added to the table.
Second refresh for the page helped to solve it.
Once more: no such issues in the local environment.
This is really weird and actually critical for the delivery of our application.
Please help with resolving this.
