Hi,
I have implemented a nearly perfectly working navigation system based on an earlier post:
http://jboss.com/index.html?module=bb&op=viewtopic&t=107843&postdays=0&postorder=asc&start=10
The navigation is working and the pages are being dynimically updated via a4j:include. The problem is that the function on the new pages is compromised by inconsistent javascript issue that arise. This is
richfaces 3.1.4GA, facelets 1.1.2, jsf 1.2.
Code follows:
main code which includes navigation and main body:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8"/>
<title>
<ui:insert name="title"/>
</title>
<link rel="STYLESHEET" type="text/css" href="${facesContext.externalContext.requestContextPath}/css/common.css"/>
<link rel="STYLESHEET" type="text/css" href="${facesContext.externalContext.requestContextPath}/css/holygrail.css"/>
</head>
<body>
<div id="banner ">
<ui:include src="/includes/tables/banner.xhtml" />
</div>
<div id="container">
<a4j:form id="mainform">
<div id="main" class="column">
<!-- tabpanel begin -->
<ui:insert name="body">Body</ui:insert>
<!-- tabpanel end -->
<a4j:log popup="false" level="ALL" style="width: 850px; height: 300px;" rendered="#{msgs.debug eq 'on'}"/>
</div>
<div id="leftcontent" class="column">
<p class="leftlinks">
<!-- LINKS GO HERE -->
<ui:include src="/includes/tables/navlinks.xhtml" />
</p>
</div>
<div id="rightcontent" class="column">
<div id="statusarea" style="visibility: hidden"/>
</div>
</a4j:form>
</div>
</body>
</html>navlinks.xhtml:
<ui:composition 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:a4j="http://richfaces.org/a4j">
<h:panelGrid>
<ui:include src="navlinkrow.xhtml"><ui:param name="linkval" value="New"/></ui:include>
<ui:include src="navlinkrow.xhtml"><ui:param name="linkval" value="Search"/></ui:include>
<ui:include src="navlinkrow.xhtml"><ui:param name="linkval" value="Approval"/></ui:include>
<ui:include src="navlinkrow.xhtml"><ui:param name="linkval" value="Reports"/></ui:include>
<ui:include src="navlinkrow.xhtml"><ui:param name="linkval" value="Migrate"/></ui:include>
<ui:include src="navlinkrow.xhtml"><ui:param name="linkval" value="Docs"/></ui:include>
<ui:include src="navlinkrow.xhtml"><ui:param name="linkval" value="Contacts"/></ui:include>
<ui:include src="navlinkrow.xhtml"><ui:param name="linkval" value="Admin"/></ui:include>
</h:panelGrid>
</ui:composition>
and the actual row, navlinkrow.xhtml:
<ui:composition 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:a4j="http://richfaces.org/a4j">
<a4j:commandLink id="link_#{linkval}" actionListener="#{componentNavigator.viewUserReqPage}" value="#{linkval}" reRender="insertedPage">
<a4j:actionparam name="assignlink" value="#{linkval}" assignTo="#{componentNavigator.userReq}" />
</a4j:commandLink>
</ui:composition>navigation amongst all these is fine. The problem arises when I have an included page which has a large form to complete. Sometime I can enter values in each input field without javascript error, sometimes not.
Clicking on "Search" will load the search.xhtml page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:c="http://java.sun.com/jsp/jstl/core"
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:a4j="http://richfaces.org/a4j">
<ui:composition>
<style>
.gridContent {
vertical-align:top;
}
.outpanelHeader {
height:4px;
border-width: 0;
}
.inpanelBody {
overflow:auto;
}
</style>
<a4j:log/>
<rich:panel id="searchpanel">
<f:facet name="header">Search Page</f:facet>
<ui:include src="panels/searchParamPanel.xhtml">
<ui:param name="titleval" value="Search Releases" />
</ui:include>
<h:panelGrid columns="2">
<a4j:commandButton id="search_rec" type="button" actionListener="#{dBCrudBean.actionSearch}" value="Search"
reRender="searchpanel" oncomplete="javascript:Richfaces.showModalPanel('searchResultsPanel')"/>
<a4j:commandButton id="search_reset" type="button" value="Reset"/>
</h:panelGrid>
</rich:panel>
</ui:composition>
</html>which includes a searchparampanel:
<ui:composition 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:c="http://java.sun.com/jstl/core"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j">
<rich:panel id="searchparampanel">
<f:facet name="header">#{titleval}</f:facet>
<h:panelGrid columns="8" border="0" width="100%">
<h:outputText value="#{msgs.relreq}"/>
<h:inputText id="relreq" value="#{reqmain.relrequest}"/>
<h:outputText value="#{msgs.summary}"/>
<h:inputText id="summary" value="#{reqmain.summary}"/>
<h:outputText value=""/>
<h:outputText value=""/>
<h:outputText value=""/>
<h:outputText value=""/>
<h:outputText value="#{msgs.reltype}"/>
<h:selectOneListbox size="1" id="reltype" value="#{reqmain.reltype}">
<f:selectItems value="#{sel.reltype}"/>
</h:selectOneListbox>
<h:outputText value="#{msgs.relstatus}"/>
<h:selectOneListbox size="1" id="relstatus" value="#{reqmain.status}">
<f:selectItems value="#{sel.statustype}"/>
</h:selectOneListbox>
<h:outputText value="#{msgs.requestor}"/>
<h:panelGrid columns="1" border="0">
<h:inputText id="requestor" value="#{reqmain.requestor}" required="#{titleval eq 'Release Info'}"/>
<rich:message for="requestor"><f:facet name="errorMarker"/></rich:message>
</h:panelGrid>
<h:outputText value="#{msgs.targetdatetime}"/>
<h:panelGrid columns="1" border="0">
<h:inputText id="targetdate" value="#{reqmain.targetdate}" required="#{titleval eq 'Release Info'}">
<f:convertDateTime pattern="yyyyMMdd"/>
</h:inputText>
<rich:message for="targetdate"><f:facet name="errorMarker"/></rich:message>
</h:panelGrid>
<h:outputText value="#{msgs.majrelcomp}"></h:outputText>
<h:panelGrid columns="1" border="0">
<h:inputText id="magrelcomp" value="#{reqmain.majorrelname}" required="#{titleval eq 'Release Info'}"/>
<rich:message for="magrelcomp"><f:facet name="errorMarker"/></rich:message>
</h:panelGrid>
<h:outputText value="#{msgs.relnum}"></h:outputText>
<h:panelGrid columns="1" border="0">
<h:inputText id="relnum" value="#{reqmain.majorrelno}" required="#{titleval eq 'Release Info'}"/>
<rich:message for="relnum"><f:facet name="errorMarker"/></rich:message>
</h:panelGrid>
<h:outputText value="#{msgs.ticketid}"></h:outputText>
<h:panelGrid columns="1" border="0">
<h:inputText id="ticketid" value="#{reqmain.ticketid}" required="#{titleval eq 'Release Info'}" />
<rich:message for="ticketid"><f:facet name="errorMarker"/></rich:message>
</h:panelGrid>
<h:panelGrid columns="1" border="0">
<h:outputText value="#{msgs.affectedarea}"></h:outputText>
<h:outputText value="#{msgs.functionalimpact}"></h:outputText>
</h:panelGrid>
<h:panelGrid columns="1" border="0">
<h:selectOneListbox size="1" id="impactedarea" value="#{reqmain.impactedarea}">
<f:selectItems value="#{sel.impactedarea}"/>
</h:selectOneListbox>
<h:selectOneListbox size="1" id="fimpact" value="#{reqmain.functionalimpact}">
<f:selectItems value="#{sel.functionimpact}"/>
</h:selectOneListbox>
</h:panelGrid>
</h:panelGrid>
</rich:panel>
</ui:composition>The button on the search page fires up and displays the searchresultspanel:
<ui:composition 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:c="http://java.sun.com/jstl/core"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j">
<rich:modalPanel autosized="true" id="searchResultsPanel" minHeight="200" minWidth="600">
<f:facet name="header">
<h:outputText value="Deployment Records"/>
</f:facet>
<f:facet name="controls">
<span style="cursor:pointer" onclick="javascript:Richfaces.hideModalPanel('searchResultsPanel')">X</span>
</f:facet>
<rich:dataTable value="#{dBCrudBean.myDataList}" var="sel" id="deployResultTable">
<rich:column>
<f:facet name="header"><h:outputText value="Req Id"/></f:facet>
<h:outputText value="#{sel.relrequest}"/>
</rich:column>
<rich:column>
<f:facet name="header"><h:outputText value="Summary"/></f:facet>
<h:outputText value="#{sel.summary}"/>
</rich:column>
<rich:column>
<f:facet name="header"><h:outputText value="Type"/></f:facet>
<h:outputText value="#{sel.reltype}"/>
</rich:column>
<rich:column>
<f:facet name="header"><h:outputText value="Rel Name"/></f:facet>
<h:outputText value="#{sel.majorrelname}"/>
</rich:column>
<rich:column>
<f:facet name="header"><h:outputText value="Rel Num"/></f:facet>
<h:outputText value="#{sel.majorrelno}"/>
</rich:column>
<rich:column>
<f:facet name="header"><h:outputText value="Business Sponsor"/></f:facet>
<h:outputText value="#{sel.businesssponsor}"/>
</rich:column>
<rich:column>
<f:facet name="header"><h:outputText value="Tech Reviewer"/></f:facet>
<h:outputText value="#{sel.techreviewer}"/>
</rich:column>
<rich:column>
<f:facet name="header"><h:outputText value="T/P Reviewer"/></f:facet>
<h:outputText value="#{sel.tpreviewer}"/>
</rich:column>
<rich:column>
<f:facet name="header"><h:outputText value="CM Reviewer"/></f:facet>
<h:outputText value="#{sel.cmreviewer}"/>
</rich:column>
<rich:column>
<f:facet name="header"><h:outputText value="Requestor"/></f:facet>
<h:outputText value="#{sel.requestor}"/>
</rich:column>
<rich:column>
<f:facet name="header"><h:outputText value="Rel Date"/></f:facet>
<h:outputText value="#{sel.targetdate}"/>
</rich:column>
<rich:column>
<f:facet name="header"><h:outputText value="Impacted Area"/></f:facet>
<h:outputText value="#{sel.impactedarea}"/>
</rich:column>
<rich:column>
<f:facet name="header"><h:outputText value="Functional Impact"/></f:facet>
<h:outputText value="#{sel.functionalimpact}"/>
</rich:column>
</rich:dataTable>
</rich:modalPanel>
</ui:composition>Inputting the values into the search param panel sometimes raises
javascript runtime errors related to focus. The a4j:log is extensive and clearly warns and lists errors:
debug[14:48:08,332]: Reqest end with state 4
debug[14:48:08,332]: Response with content-type: text/xml;charset=UTF-8
debug[14:48:08,332]: Full response content: <html xmlns="http://www.w3.org/1999/xhtml"><head><link href="/Charms-home/a4j_3_1_4.GAcss/panel.xcss/DATB/eAFjlbr0AAAC6gHS.jsf" type="text/css" rel="stylesheet" /><link href="/Charms-home/a4j_3_1_4.GAorg/richfaces/renderkit/html/css/msg.css.jsf" type="text/css" rel="stylesheet" /><link href="/Charms-home/a4j_3_1_4.GAorg/richfaces/renderkit/html/css/msgs.css.jsf" type="text/css" rel="stylesheet" /><script src="/Charms-home/a4j_3_1_4.GAorg.ajax4jsf.javascript.AjaxScript.jsf" type="text/javascript"></script><script src="/Charms-home/a4j_3_1_4.GAorg/ajax4jsf/javascript/scripts/form.js.jsf" type="text/javascript"></script></head><body><div class="dr-pnl rich-panel " id="mainform:insertedPage:searchpanel"><div class="dr-pnl-h rich-panel-header " id="mainform:insertedPage:searchpanel_header">Search Page</div><div class="dr-pnl-b rich-panel-body " id="mainform:insertedPage:searchpanel_body"><div class="dr-pnl rich-panel " id="mainform:insertedPage:searchparampanel"><div class="dr-pnl-h rich-panel-header " id="mainform:insertedPage:searchparampanel_header">Search Releases</div><div class="dr-pnl-b rich-panel-body " id="mainform:insertedPage:searchparampanel_body"><table border="0" width="100%">
<tbody><tr><td>Request #:</td>
<td><input id="mainform:insertedPage:relreq" type="text" name="mainform:insertedPage:relreq" value="182" /></td>
<td>Summary:</td>
<td><input id="mainform:insertedPage:summary" type="text" name="mainform:insertedPage:summary" value="" /></td>
<td></td><td></td><td></td><td></td></tr><tr><td>Type:</td>
<td><select id="mainform:insertedPage:reltype" name="mainform:insertedPage:reltype" size="1"> <option value="1" selected="selected">Normal</option>
<option value="2">EBF</option></select></td><td>Status:</td>
<td><select id="mainform:insertedPage:relstatus" name="mainform:insertedPage:relstatus" size="1"> <option value="1" selected="selected">Unit Test Completed</option>
<option value="2">QA Submitted</option> <option value="3">QA Approved</option>
<option value="4">QA Migrated</option> <option value="5">QA Sign off</option>
<option value="6">UAT Migrated</option> <option value="7">UAT Sign off</option>
<option value="8">Prod Approved</option>
<option value="9">Prod Migrated</option>
<option value="10">Prod Checkout</option>
<option value="11">Prod Rollback</option></select></td><td>Requestor:</td>
<td><table border="0"><tbody><tr>
<td><input id="mainform:insertedPage:requestor" type="text" name="mainform:insertedPage:requestor" value="" /></td>
</tr><tr>
<td><span id="mainform:insertedPage:j_id52" class="rich-message"><span class="rich-message-label"></span></span></td>
</tr></tbody></table></td><td>Target Date/Time:</td><td><table border="0">
<tbody><tr>
<td><input id="mainform:insertedPage:targetdate" type="text" name="mainform:insertedPage:targetdate" /></td>
</tr><tr>
<td><span id="mainform:insertedPage:j_id55" class="rich-message"><span class="rich-message-label"></span></span></td>
</tr></tbody></table></td></tr><tr><td>Name</td><td><table border="0"><tbody>
<tr>
<td><input id="mainform:insertedPage:magrelcomp" type="text" name="mainform:insertedPage:magrelcomp" value="" /></td>
</tr><tr>
<td><span id="mainform:insertedPage:j_id58" class="rich-message"><span class="rich-message-label"></span></span></td>
</tr></tbody></table></td><td>Release #:</td><td><table border="0"><tbody><tr>
<td><input id="mainform:insertedPage:relnum" type="text" name="mainform:insertedPage:relnum" value="" /></td>
</tr><tr>
<td><span id="mainform:insertedPage:j_id61" class="rich-message"><span class="rich-message-label"></span></span></td>
</tr></tbody></table></td><td>Reference JIRA #:</td><td><table border="0">
<tbody><tr>
<td><input id="mainform:insertedPage:ticketid" type="text" name="mainform:insertedPage:ticketid" value="" /></td>
</tr><tr>
<td><span id="mainform:insertedPage:j_id64" class="rich-message"><span class="rich-message-label"></span></span></td>
</tr></tbody></table></td><td><table border="0"><tbody><tr>
<td>Affected Area:</td></tr><tr><td>Functional Impact:</td></tr></tbody></table>
</td><td><table border="0"><tbody><tr>
<td><select id="mainform:insertedPage:impactedarea" name="mainform:insertedPage:impactedarea" size="1"> <option value="1" selected="selected">NA</option>
<option value="2">EMEA</option> <option value="3">APAC</option>
<option value="4">HK</option> <option value="5">Korea</option>
<option value="6">TK</option> <option value="7">Global</option></select></td>
</tr><tr>
<td><select id="mainform:insertedPage:fimpact" name="mainform:insertedPage:fimpact" size="1"> <option value="1" selected="selected">imp1</option>
<option value="2">imp2</option> <option value="3">imp3</option></select></td>
</tr></tbody></table></td></tr></tbody></table></div></div><table><tbody><tr>
<td><input id="mainform:insertedPage:search_rec" name="mainform:insertedPage:search_rec" onclick="A4J.AJAX.Submit('_viewRoot','mainform',event,{'parameters':{'mainform:insertedPage:search_rec':'mainform:insertedPage:search_rec'} ,'actionUrl':'/Charms-home/charms.jsf?javax.portlet.faces.DirectLink=true','oncomplete':function(request,event,data){javascript:Richfaces.showModalPanel('searchResultsPanel')}} );return false;" value="Search" type="button" /></td>
<td><input id="mainform:insertedPage:search_reset" name="mainform:insertedPage:search_reset" onclick="A4J.AJAX.Submit('_viewRoot','mainform',event,{'parameters':{'mainform:insertedPage:search_reset':'mainform:insertedPage:search_reset'} ,'actionUrl':'/Charms-home/charms.jsf?javax.portlet.faces.DirectLink=true'} );return false;" value="Reset" type="button" /></td>
</tr></tbody></table>
</div></div><meta name="Ajax-Update-Ids" content="mainform:insertedPage:searchpanel" /><span id="ajax-view-state"><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="_id1" /></span><meta id="Ajax-Response" name="Ajax-Response" content="true" /><span id="org.ajax4jsf.oncomplete">javascript:Richfaces.showModalPanel('searchResultsPanel')</span></body></html>
debug[14:48:08,332]: Header Ajax-Expired not found, search in <meta>
debug[14:48:08,332]: search for elements by name 'meta' in element #document
debug[14:48:08,332]: selectNodes found 2
debug[14:48:08,332]: Find <meta name='Ajax-Update-Ids' content='mainform:insertedPage:searchpanel'>
debug[14:48:08,332]: Find <meta name='Ajax-Response' content='true'>
debug[14:48:08,348]: Header Ajax-Update-Ids not found, search in <meta>
debug[14:48:08,348]: search for elements by name 'meta' in element #document
debug[14:48:08,348]: selectNodes found 2
debug[14:48:08,348]: Find <meta name='Ajax-Update-Ids' content='mainform:insertedPage:searchpanel'>
debug[14:48:08,348]: Update page by list of rendered areas from response mainform:insertedPage:searchpanel
debug[14:48:08,348]: search for elements by name 'script' in element #document
debug[14:48:08,348]: selectNodes found 2
debug[14:48:08,348]: <script> in response with src=/Charms-home/a4j_3_1_4.GAorg.ajax4jsf.javascript.AjaxScript.jsf
debug[14:48:08,348]: Such element exist in document
debug[14:48:08,348]: <script> in response with src=/Charms-home/a4j_3_1_4.GAorg/ajax4jsf/javascript/scripts/form.js.jsf
debug[14:48:08,348]: Such element exist in document
debug[14:48:08,348]: search for elements by name 'link' in element #document
debug[14:48:08,348]: selectNodes found 3
debug[14:48:08,348]: <link> in response with src=/Charms-home/a4j_3_1_4.GAcss/panel.xcss/DATB/eAFjlbr0AAAC6gHS.jsf
debug[14:48:08,348]: Such element exist in document
debug[14:48:08,348]: <link> in response with src=/Charms-home/a4j_3_1_4.GAorg/richfaces/renderkit/html/css/msg.css.jsf
debug[14:48:08,348]: Such element exist in document
debug[14:48:08,348]: <link> in response with src=/Charms-home/a4j_3_1_4.GAorg/richfaces/renderkit/html/css/msgs.css.jsf
debug[14:48:08,348]: Such element exist in document
debug[14:48:08,348]: Attempt to update part of page for Id: mainform:insertedPage:searchpanel
debug[14:48:08,348]: call selectSingleNode for id= mainform:insertedPage:searchpanel
debug[14:48:08,363]: Replace content of node by outerHTML()
debug[14:48:08,379]: search for elements by name 'script' in element div
debug[14:48:08,379]: selectNodes found 0
debug[14:48:08,379]: Scripts in updated part count : 0
debug[14:48:08,379]: Update part of page for Id: mainform:insertedPage:searchpanel successful
debug[14:48:08,379]: call selectSingleNode for id= ajax-view-state
debug[14:48:08,379]: Hidden JSF state fields:
debug[14:48:08,379]: Namespace for hidden view-state input fields is undefined
debug[14:48:08,379]: search for elements by name 'input' in element span
debug[14:48:08,379]: selectNodes found 1
debug[14:48:08,379]: Replace value for inputs: 14 by new values: 1
debug[14:48:08,379]: Input in response: javax.faces.ViewState
debug[14:48:08,379]: Found same input on page with type: hidden
debug[14:48:08,379]: search for elements by name 'INPUT' in element span
debug[14:48:08,379]: selectNodes found 0
debug[14:48:08,379]: Replace value for inputs: 14 by new values: 0
debug[14:48:08,395]: call selectSingleNode for id= _A4J.AJAX.focus
debug[14:48:08,395]: No focus information in response
debug[14:48:08,395]: call selectSingleNode for id= org.ajax4jsf.oncomplete
debug[14:48:08,395]: Call request oncomplete function after processing updates
debug[14:48:08,426]: call selectSingleNode for id= _ajax:data
error[14:48:08,426]: Error evaluate oncomplete function undefined
This simple form does not have any dynamic actions until the search button is clicked at which time is goes to the dao objects and locates the proper record. Why so difficult to enter input field?
Thanks,
Henry
