I am Using
WebSphere Application Server 7.0.0.25,
Myfaces 2.0.7,
Primefaces 3.4.1
I have the following page which is using p:tabView has 3 tabs
dashboard.xhtml
Dashboard is main page which has header.xhtml. and first tab has 4 radio buttons. on clicking of each radio button would load different code piece written in ui:composite using AJAX.
Second tabs has some buttons in footer of the p:dataTable. When I click on the button a dialog will show up the selected row in the datatable.
I see the following error in server logs.
Error Rendering View[/dashboard.xhtml]
javax.faces.FacesException: Cannot find component with identifier “:tabView:panelGridNewUserDialog” referenced from “tabView:userList:addUserButton”.
But when I see “View Source” in browser, HTML code is incomplete. I have put the p:dialog tags bottom of the AppUserManagement.xhtml. All that code is not rendered as HTML. And commandButton is not showing in dataTable footer
<?xml version="1.0" encoding="UTF-8"?>
<!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:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<c:set var="webCtxRoot" value="#{request.contextPath}" />
<f:view locale="#{language.locale}">
<h:head>
<link rel="stylesheet" type="text/css"
href="#{webCtxRoot}/theme/ldapmanager.css" />
<title>Welcome To Ldap Manager Application</title>
<h:outputScript name="jsf.js" library="javax.faces" id="script_id" />
</h:head>
<h:body>
<h:form id="headerForm" prependId="false">
<h:inputHidden value="#{authenticatedBackingBean.session}"
id="sessionValidator" />
<ui:include src="header.xhtml" />
<p:spacer height="8" width="160" />
<p:tabView id="tabView" dynamic="true" cache="true">
<p:tab id="applicationUserManagementTab"
title="Application User Mgmt">
<ui:include src="AppUserManagement.xhtml" />
</p:tab>
<p:tab id="userManagementTab" title="User Management">
<p:panelGrid id="dashboardContentGrid" styleClass="panelDiv">
<p:row>
<p:column>
<p:panelGrid>
<p:row>
<p:column>
<p:fieldset legend="Choose User Operation" id="buttonPanel">
<p:selectOneRadio id="userOperationType"
value="#{userAct.userAction}">
<f:selectItem id="newUser" itemLabel="New User"
itemValue="UMNewUser" />
<f:selectItem id="modifyUser" itemLabel="Modify User"
itemValue="UMModifyUser" />
<f:selectItem id="deleteUser" itemLabel="Delete User"
itemValue="UMDeleteUser" />
<f:selectItem id="modifyPassword"
itemLabel="Change / Reset Password"
itemValue="UMModifyPassword" />
<p:ajax update="ContentPanel"
listener="#{userAct.returnSelectedValue}" />
</p:selectOneRadio>
</p:fieldset>
</p:column>
</p:row>
<p:row>
<p:column>
<p:growl id="growl" showDetail="true" life="20000"
autoUpdate="true" />
<p:outputPanel id="ContentPanel" layout="block">
<ui:include src="#{userAct.userAction}.xhtml" />
</p:outputPanel>
</p:column>
</p:row>
</p:panelGrid>
</p:column>
<p:column>
<p:outputPanel id="helpPanel">
<p:inputTextarea id="helpWindow" rows="18" cols="80"
value="Move your mouse over various fields for instant help" />
</p:outputPanel>
</p:column>
</p:row>
</p:panelGrid>
</p:tab>
<p:tab id="userGroupManagementTab" title="User Group Mgmt">
</p:tab>
</p:tabView>
</h:form>
</h:body>
</f:view>
</html>
header.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<p:panelGrid id="pnlgLocaleChange" border="0">
<p:row>
<p:column rowspan="2">
<p:graphicImage value="images/TelenorLogoWhite.png" />
</p:column>
<p:column colspan="3" style="width:16%">
<h:outputText id="ApplicationBanner" class="bannerLabel"
value="#{msgs.title}" />
<h:outputText id="ApplicationVersion" value="#{msgs.Version} #{UsersBean.releaseLabel}" class="ApplicationVersion"/>
</p:column>
</p:row>
<p:row>
<p:column styleClass="LoginBannerLocale" style="padding-right: 0px !important;">
<h:outputText id="languageLabel" value="#{msgs.locale}" />
</p:column>
<p:column style="width:5%;">
<p:selectOneMenu value="#{language.locale}" styleClass="localeSelectClass">
<f:selectItems value="#{language.countries}" />
<p:ajax update="@form" />
</p:selectOneMenu>
</p:column>
</p:row>
<p:row rendered="#{not empty request.remoteUser}">
<!-- <p:column styleClass="HeaderWelcomeMsg" >
<h:outputText value="#{msgs.Welcome}, #{authenticatedBackingBean.userFullName}" style="float:middle !important; "/>
</p:column> -->
<p:column styleClass="LoginBannerLocale" colspan="2">
<h:outputText id="loggedInUser" value="#{msgs.loginUserMessage} #{request.remoteUser } (#{authenticatedBackingBean.roleDescription})| " />
<h:commandLink value=" #{msgs.Logout}" onclick="document.getElementById('headerForm').action='ibm_security_logout?logoutExitPage=/Login.xhtml';" />
</p:column>
</p:row>
</p:panelGrid>
</ui:composition>
AppUserManagement.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<p:fieldset id="fieldAppUserMgmt">
<p:panelGrid id="filterUsers" style="width:100%;">
<p:row>
<p:column style="left: 40%;">
<h:outputText id="applicationNameLabel" value="#{msgs.AppUserMgmt_AppName_Label}" />
<p:selectOneMenu value="#{AppUserManagementBean.applicationName}" styleClass="localeSelectClass" id="applicationName">
<f:selectItem itemLabel="Select One" itemValue="-1" />
<f:selectItems value="#{AppUserManagementBean.systemDetails}" />
<p:ajax update="groupName,userList" listener="#{AppUserManagementBean.loadGroupDetails}" />
</p:selectOneMenu>
</p:column>
</p:row>
<p:row>
<p:column style="left: 40%;">
<h:outputText id="groupNameLabel" value="#{msgs.AppUserMgmt_AppGroup_Label}" />
<p:selectOneMenu value="#{AppUserManagementBean.groupName}" styleClass="localeSelectClass" id="groupName">
<f:selectItem itemLabel="Select One" itemValue="-1" />
<f:selectItems value="#{AppUserManagementBean.groupDetails}" />
<p:ajax update="userList" listener="#{AppUserManagementBean.loadUserDetails}" />
</p:selectOneMenu>
</p:column>
</p:row>
<p:row>
<p:column>
<p:dataTable id="userList" var="user" value="#{AppUserManagementBean.lstUsrDetails}"
paginatorAlwaysVisible="false" paginator="true" rows="10"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} #{msgs.AppUserMgmt_AppUsers_List_PageSizeLabel} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15" rowIndexVar="rowNum" filteredValue="#{AppUserManagementBean.lstFilteredUsrDetails}"
widgetVar="usersFilter" rowKey="#{user.userId}" selectionMode="single" selection="#{AppUserManagementBean.selectedUser}">
<f:facet name="header">
<h:outputText id="appUsrMgmtUserListHeader" style="float:left" value="#{AppUserManagementBean.applicationName} #{msgs.AppUserMgmt_AppUsers_List_Title}"/>
<p:inputText id="globalFilter" onkeyup="usersFilter.filter()" style="float:right"/>
<p:watermark forElement="tabView:userList:globalFilter" value="#{msgs.AppUserMgmt_AppUsers_List_Find}"/>
</f:facet>
<p:column id="colRowNo" headerText="#{msgs.AppUserMgmt_AppUsers_List_RowNo}">
<h:outputText value="#{rowNum+1}" />
</p:column>
<p:column id="colUserID" headerText="#{msgs.AppUserMgmt_AppUsers_List_UserID}" filterBy="#{user.userId}" filterMatchMode="contains" style="text-align:bottom" filterStyle="display:none;visibility:hidden">
<h:outputText value="#{user.userId}" />
</p:column>
<p:column id="colName" headerText="#{msgs.AppUserMgmt_AppUsers_List_FullName}" filterBy="#{user.firstName} #{user.lastName}" filterMatchMode="contains" style="text-align:bottom" filterStyle="display:none;visibility:hidden">
<h:outputText value="#{user.firstName} #{user.lastName}" />
</p:column>
<p:column id="colRole" headerText="#{msgs.AppUserMgmt_AppUsers_List_Group}" filterBy="#{user.role}" filterMatchMode="contains" style="text-align:bottom" filterStyle="display:none;visibility:hidden">
<h:outputText value="#{user.role}" />
</p:column>
<p:column id="colEmail" headerText="#{msgs.AppUserMgmt_AppUsers_List_Email}" filterBy="#{user.email}" filterMatchMode="contains" style="text-align:bottom" filterStyle="display:none;visibility:hidden">
<h:outputText value="#{user.email}" />
</p:column>
<p:column id="colExpiryDate" headerText="#{msgs.AppUserMgmt_AppUsers_List_ExpiresOn}" filterBy="#{user.expiryDate}" filterMatchMode="contains" style="text-align:bottom" filterStyle="display:none;visibility:hidden">
<h:outputText value="#{user.expiryDate}" />
</p:column>
<f:facet name="footer">
<p:commandButton id="addUserButton" value="#{msgs.AppUserMgmt_AppUsers_NewUser_ButtonLabel}" icon="ui-icon-circle-plus" update=":headerForm:panelGridNewUserDialog" oncomplete="addNewUserDialog.show()"/>
</f:facet>
</p:dataTable>
</p:column>
</p:row>
</p:panelGrid>
</p:fieldset>
<p:dialog id="addNewUserDialog" header="#{msgs.AppUserMgmt_AppUsers_NewUser_Dialog_Header} #{AppUserManagementBean.groupName},#{AppUserManagementBean.applicationName}" widgetVar="addUserDialog" resizable="false"
width="400" showEffect="clip" hideEffect="fold">
<p:panelGrid id="panelGridNewUserDialog" styleClass="insertPage">
<p:row>
<p:column>
<h:outputText id="userIDDialog" value="#{msgs.userId}" />
</p:column>
</p:row>
</p:panelGrid>
</p:dialog>
</ui:composition>
Am I missing some thing here? I have tried to find the related question in stack but could not find any. I am happy to be redirected to right question or link if any.
I would appreciate anyone’s help.
<tfoot>
<tr>
<td class="ui-datatable-footer ui-widget-header"
colspan="6">
<button id="tabView:userList:addUserButton" name="tabView:userList:addUserButton"
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
Rest of the code is not sent to browser. Lot of HTML code is not rendereed. May be some HTTP header are missing?
You set
dynamic="true"which means that tabs are lazy loaded. That’s why is your html code incomplete. Remove this attribute and see what’s happening.Also you wrote addNewUserDialog.show(), but your widget var name is addUserDialog, so try with addUserDialog.show().