Earlier my p:dialog was getting invoked properly when i was doing a .show() on the widgetVar defined on it. but recently after taking an update it stopped working and i am getting this error in browser :
Webpage error details:
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; MS-RTC LM 8)
Timestamp: Fri, 28 Mar 2014 04:04:49 UTC
Message: Object doesn't support this property or method
Line: 12
Char: 4302
Code: 0
URI: http://localhost:8282/OMNIVue/javax.faces.resource/primefaces.js.jsf?ln=primefaces
Message: Object doesn't support this property or method
Line: 16
Char: 1
Code: 0
URI: http://localhost:8282/OMNIVue/orders/orderSearch.jsf
Message: Could not complete the operation due to error 80020101.
Line: 81
Char: 17
Code: 0
URI: http://localhost:8282/OMNIVue/javax.faces.resource/jsf.js.jsf?ln=javax.faces&stage=Development
Message: 'confirmation' is undefined
Line: 83
Char: 1
Code: 0
URI: http://localhost:8282/OMNIVue/orders/orderSearch.jsf
Message: 'confirmation' is undefined
Line: 83
Char: 1
Code: 0
URI: http://localhost:8282/OMNIVue/orders/orderSearch.jsf
I have a main page like this where i have defined my dialog box.
<!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:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:t="http://myfaces.apache.org/tomahawk"
xmlns:mdw="http://www.qwest.com/mdw/jsf"
xmlns:mwt="http://www.centurylink.com/mwt/jsf"
xmlns:q="http://www.qwest.com/mdw/jsf"
xmlns:p="http://primefaces.org/ui"
xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<ui:composition>
<script language="javascript" type="text/javascript">
function solutionButtonClickHandler(){
#{rich:component('addSolutionDlg')}.show();
document.getElementById('addSolutionId').setAttribute('disabled', 'disabled');
}
function removeSearchParam(checkbox){
var parentDiv = checkbox.parentNode;
parentDiv.style.display = "none";
}
function displayErrorDialog(status){
if(status == 'taskSelectedError'){
#{rich:component('addSolutionTaskErrorDlg')}.show();
}
}
function disableButtons(){
if(document.getElementById('addSolution') != null)
document.getElementById('addSolution').setAttribute('disabled', 'disabled');
if(document.getElementById('escalateWorkItemTask') != null)
document.getElementById('escalateWorkItemTask').setAttribute('disabled', 'disabled');
}
function removeEscalation(escalationId, taskInstanceId, taskId){
if(document.getElementById('escalationid') != null)
document.getElementById('escalationid').value = escalationId;
if(document.getElementById('taskinstanceid') != null)
document.getElementById('taskinstanceid').value = taskInstanceId;
if(document.getElementById('taskid') != null)
document.getElementById('taskid').value = taskId;
}
function redirectToActivityCenter(taskId){
if(document.getElementById('taskid') != null)
document.getElementById('taskid').value = taskId;
}
</script>
<rich:panel id="detailPanel" styleClass="floatL iconbdrNone bgcTransparent w790P "
rendered="#{filterManager.orderFilter.showSearchPanel}">
<!-- <br style="background-color:white;" /> -->
<h:form id="selectedParamForm" prependId="false">
<h:inputHidden id="orderRefreshSubmit" forceId="true" value="false" />
<rich:collapsiblePanel styleClass="marLmin1 iconbdrNone W788P" id="selectedSearchParams"
header="Selected Search Parameters"
switchType="client"
expanded="#{orderSearchMenuBean.expandSearchParameters}"
rendered="#{filterManager.orderFilter.showSearchPanel}">
<!-- <table style="margin-left: 10px; padding-top: 10px; padding-bottom: 25px;"> -->
<table class="wrapperW100P" >
<ui:repeat var="searchParams"
value="#{filterManager.orderFilter.selectedSearchParameters}"
varStatus="serachParamsStatus">
<tr>
<ui:repeat var="searchParam"
value="#{searchParams}"
varStatus="status">
<td>
<div style="margin-right:39px;">
<h:selectBooleanCheckbox styleClass="floatL"
value="#{filterManager.orderFilter.searchParamCheckbox}"
label="#{searchParam.label}"
valueChangeListener="#{ordersListActionController.refreshOrders}"
onclick=" removeSearchParam(this); document.getElementById('orderRefreshSubmit').value='true'; ">
<a4j:ajax event="change" execute="#this"
render="orderFilterPanel orderDetailPanel orderMessage " />
<h:inputHidden value="#{searchParam.label}" />
</h:selectBooleanCheckbox>
<h:outputLabel value="#{searchParam.label}" styleClass="font floatL marT2"/>
<!-- <br style="background-color:white;" /> -->
<h:outputLabel value="#{searchParam.value}" styleClass="font floatL clearL marL20"/>
</div>
</td>
</ui:repeat>
</tr>
<tr>
<td colspan="4">
<h:graphicImage value="../images/param_line.png" styleClass="wrapperW100P height1P"/>
</td>
</tr>
</ui:repeat>
</table>
</rich:collapsiblePanel>
<a4j:outputPanel ajaxRendered="true">
<a4j:status onstart="#{rich:component('refreshOrders')}.show()"
onstop="#{rich:component('refreshOrders')}.hide()">
</a4j:status>
</a4j:outputPanel>
<rich:popupPanel id="refreshOrders" autosized="true" domElementAttachment="parent">
<h:panelGrid style="text-align:center !important;">
<h:graphicImage styleClass="floatL marL81" value="../images/loading.gif"/>
<h:outputText value="Please wait while the search refreshes" styleClass="font floatL clearL"></h:outputText>
<h:commandLink value="Cancel" onclick="#{rich:component('refreshOrders')}.hide()"
styleClass="green_addMoreLink floatL clearL marL81"/>
</h:panelGrid>
</rich:popupPanel>
</h:form>
<br style="background-color:white;" />
<h:form id="ordSearchList" prependId="false">
<mwt:expandableRowList id="ordersLst" listId="#{filterManager.orderFilter.dynamicListId}"
listEntity="#{listManager.getMyOrders(filterManager.orderFilter.dynamicListId)}"
label="Records"/>
<p:dialog modal="true" widgetVar="confirmation" style="background:white !important;" closable="true"
header="Cancel Device Build Order" styleClass="stylePDialogHeader" width="500" id="confGirish" appendToBody="true">
<h:panelGroup styleClass="wrapperW100P">
<h:outputText
value="Canceling device build order will cancel all new devices and Ethernet bearers associated to this request, and release all reserved ports. Do you wish to continue ? "
styleClass="font floatL" />
<h:panelGroup styleClass="floatR">
<a4j:commandButton value="Yes"
styleClass="cmdButton marL5 marR5 clearL"
action="#{orderListScopeActionCtrl.cancelDeviceBuildOrder}"
oncomplete="if(#{orderListScopeActionCtrl.displayPortAssignmentErrorDialog}){confirmation.hide();portassignment.show(); return false;}else if(#{orderListScopeActionCtrl.displayCancelSuccessDialog}){confirmation.hide();successDialog.show();return false;}else {confirmation.hide();errorCancelDialog.show();return false;}">
</a4j:commandButton>
<!-- Yes button onclick="if(#{orderListScopeActionCtrl.orderToCancelHasNIDDeviceStatus}){portassignment.show(); return false;}" -->
<h:commandButton value="No"
onclick="confirmation.hide();return false;"
styleClass="cmdButton marL5 clearL">
</h:commandButton>
</h:panelGroup>
</h:panelGroup>
</p:dialog>
<p:dialog header="Cancel Device Build Order" modal="true" widgetVar="successDialog" closable="true"
style="background:white !important;" styleClass="stylePDialogHeader1" width="500">
<h:panelGroup>
<h:outputText
value="Cancellation Process is initiated in DSP successfully."
styleClass="font floatL" />
<!-- <h:commandButton value="OK"
onclick="successDialog.hide();return false;"
styleClass="cmdButton floatR marL5 clearL">
</h:commandButton> -->
<!-- action="#{orderListScopeActionCtrl.refreshPageAfterUpdate}" -->
<a4j:commandButton value="OK"
styleClass="cmdButton floatR marL5 clearL"
action="#{orderListScopeActionCtrl.updateOrderStatusAndRefresh}"
oncomplete="successDialog.hide();return false;">
</a4j:commandButton>
</h:panelGroup>
</p:dialog>
<p:dialog header="Confirm Cancel Device Build Order" modal="true" widgetVar="portassignment" closable="true"
style="background:white !important;" styleClass="stylePDialogHeader1" width="500">
<h:panelGroup>
<h:outputText
value="There are UNI/ENNIs assigned to ports on NID device. Please remove UNI/ENNIs and try again."
styleClass="font floatL" />
<h:commandButton value="OK"
onclick="portassignment.hide();return false;"
styleClass="cmdButton floatR marL5 clearL">
</h:commandButton>
</h:panelGroup>
</p:dialog>
<p:dialog header="Cancel Device Build Order" modal="true" widgetVar="errorCancelDialog" closable="true"
style="background:white !important;" styleClass="stylePDialogHeader1" width="500">
<h:panelGroup>
<h:outputText
value="Some error occured during Cancellation Process in DSP. Please try later."
styleClass="font floatL" />
<h:commandButton value="OK"
onclick="errorCancelDialog.hide();return false;"
styleClass="cmdButton floatR marL5 clearL">
</h:commandButton>
</h:panelGroup>
</p:dialog>
<ui:include src="escalationDlg.xhtml" />
<ui:include src="addSolutionDlg.xhtml" />
<h:inputHidden id="escalationid" value="#{ordersListActionController.escalationId}"></h:inputHidden>
<h:inputHidden id="taskid" value="#{ordersListActionController.taskId}"></h:inputHidden>
<h:inputHidden id="taskinstanceid" value="#{ordersListActionController.taskInstanceId}"></h:inputHidden>
</h:form>
</rich:panel>
</ui:composition>
</html>
i am calling these dialogs from a composite component xmthml which is like this through p:commandLink :
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:t="http://myfaces.apache.org/tomahawk"
xmlns:p="http://primefaces.org/ui"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:mdw="http://www.qwest.com/mdw/jsf"
xmlns:mwt="http://www.centurylink.com/mwt/jsf"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head></h:head>
<ui:composition>
<script type="text/javascript" src="#{request.contextPath}/script/listSupport.js"/>
<rich:panel styleClass="ordsearchDetail iconbdrNone floatL " headerClass="headerBGWhite" >
<f:facet name="header">
<h:outputText value="Search Results" ></h:outputText>
</f:facet>
<div class="clearB"></div>
<h:panelGroup styleClass="marT5">
<h:graphicImage value="../images/divider_line.png"></h:graphicImage></h:panelGroup>
<h:panelGroup id="#{listId}_dataTablePanelGrid"
rendered="#{rendered == null ? true : rendered}" columns="1"
width="100%" cellpadding="0" cellspacing="0">
<p:dataTable value="#{listEntity.items}"
id="#{listId}"
var="listItem"
rowIndexVar="rowIdxVar"
style="#{webUtil.ie ? 'border-collapse:collapse;' : ''};"
styleClass="mdw_ORD_upperLine bdrC3C3C3"
rows="#{listEntity.displayRows}"
cellspacing="0"
width="750px"
emptyMessage="Item(s) requested cannot be found"
lazy="true"
first="#{listEntity.firstRow}"
paginator="true"
paginatorPosition="top"
currentPageReportTemplate="#{label == null ? listEntity.name : label} ({startRecord} - {endRecord} of {totalRecords})"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {NextPageLink} {LastPageLink}">
<p:columns value="#{listEntity.headerList}" var="colHeader"
columnIndexVar="colIdx" sortBy="#{listItem[colHeader.attribute]}" headerText="#{colHeader.label}" rendered="#{not empty listEntity.headerList}">
<f:facet name="header">
<h:selectBooleanCheckbox
rendered="#{listEntity.hasItems && colHeader.checkbox && colHeader.linkAction != 'removeWorkItemEscalation'}"
onclick="#{userRole == null?'':'selectAllOrders(this.form, this.checked);enableDisableAddWorkItem(this.form, this.checked);enableDisableAddSolution(this.form, this.checked);enableDisableEscalate(this.form, this.checked);'}"/>
<h:outputText id="#{listId}_header"
rendered="#{!colHeader.checkbox}" value="#{colHeader.label}"
immediate="true">
</h:outputText>
</f:facet>
<p:commandLink actionListener="#{listEntity.performLinkAction(colHeader)}"
rendered="#{colHeader.commandLink && colHeader.linkAction != 'removeWorkItemEscalation' && colHeader.linkAction == 'orderCancellation' && listItem.cancelOrder}"
disabled="#{listItem.disabledOrder}" update="#form" process="#form" oncomplete="confirmation.show();"
title="Cancel Device Build Order" styleClass="#{listEntity.getStyleClass(colHeader)} mdw_listLinks">
<h:graphicImage value="#{colHeader.valueImage}" styleClass="marLR10 iconbdrNone"></h:graphicImage>
<f:setPropertyActionListener
target="#{orderListScopeActionCtrl.orderToCancelHasNIDDeviceStatus}" value="#{listItem.cancelOrderNICDeviceStatus}"/>
<f:setPropertyActionListener
target="#{orderListScopeActionCtrl.orderDeviceClli}" value="#{listItem.clliCode}"/>
<f:setPropertyActionListener
target="#{orderListScopeActionCtrl.orderDeviceName}" value="#{listItem.deviceName}"/>
</p:commandLink>
</rich:panel>
</ui:composition>
</html>
try with
oncomplete="PF('confirmation').show()"
I solved the issue using:
Converted my p:dialog to rich:popupPanel and used this for showing and hiding popup:
{rich:component('addSolutionTaskErrorDlg')}.show() / .hide().
Using this error disappeared from browser when invoking commandLink.
I tried using p:widgetVar('id').show() / .hide() but that did not work.
Related
after so many search I couldn't find a way to update my datatable after a command button clicked in a primeface's dialog.
My mainMenu.xhtml has a datatable like:
<section id="ownermanagement">
<h:form id="ownermanagementform">
<p:commandButton class="btn icon-cart" actionListener="#{ownerControl.viewNewOwnerDialog()}" value="کارفرما جدید"/>
<br></br><br></br>
<p:growl id="growl" showDetail="true"/>
<p:dataTable filterEvent="enter" id="ownerdatatable" value="#{ownerControl.ownerList}" var="owners" dir="rtl" emptyMessage="موردی با این مشخصات یافت نشد." style="border: 1px solid black;">
<p:column filterBy="#{owners.id}" filterMatchMode="contains">
<f:facet name="header">شناسه</f:facet>
#{owners.id}
</p:column>
<p:column filterBy="#{owners.name}" filterMatchMode="contains">
<f:facet name="header">نام</f:facet>
#{owners.name}
</p:column>
<p:column>
<f:facet name="header">عملیات</f:facet>
<p:commandButton value="ویرایش کارفرما"
actionListener="#{ownerControl.viewEditOwnerDialog(owners)}" update="ownerdatatable"/> |
<p:commandButton value="حذف کارفرما"
action="#{ownerControl.removeOwner(owners)}"
onclick="return confirm('آیا از حذف کارفرما اطمینان دارید؟')"
update="ownerdatatable"/>
</p:column>
</p:dataTable>
</h:form>
</section>
I open my dialog like this:
<p:commandButton class="btn icon-cart" actionListener="#{ownerControl.viewNewOwnerDialog()}" value="کارفرما جدید"/>
The viewNewOwnerDialog method is:
public void viewNewOwnerDialog() {
Map<String, Object> options = new HashMap<String, Object>();
//options.put("modal", true);
options.put("resizable", false);
resetInputs();
RequestContext.getCurrentInstance().openDialog("createOwner", options, null);
}
This will open my createOwner page in a dialog:
<?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://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>کارفرما جدید</title>
<link rel="stylesheet" type="text/css" href="resources/style/elements.css" />
</h:head>
<h:body dir="rtl">
<h:form id="newOwnerForm">
<p:growl id="growl" showDetail="true" sticky="true"/>
نام: <h:inputText class="InputField" value="#{ownerControl.owner.name}"/>
<br></br><br></br>
توضیحات: <p:inputTextarea class="textArea" value="#{ownerControl.owner.description}" rows="5" cols="100" counter="display" maxlength="500" counterTemplate="{0}" autoResize="false" />
<h:outputText id="display" /><br></br>
<p:commandButton class="btn icon-cart" value="ثبت" action="#{ownerControl.insertOwner()}" process="#all" update=":ownermanagementform:ownerdatatable"/>
</h:form>
</h:body>
</html>
How can I update a growl to show a message and after that I update the mainMenu's datatable?
At the moment, I get this error:
Cannot find component with expression ":ownermanagementform:ownerdatatable" referenced from "newOwnerForm:j_idt10".
Thanks!
I solved it like this:
<p:commandButton value="Open Dialog" actionListener"...">
<p:ajax event="dialogReturn" update="datatableID"/>
</p:commandButton>
I am not able to get the value from the text box in the overlay panel to the text box in the main form on clicking the submit button on the overlay panel.
<?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:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<style>
.link{
color:blue;
font-size: 15px;
}
.form{ width: 300px;
margin: 0 auto;
}
.button{
}
</style>
<title>Calendar</title>
<script>
function checkPasswords() {
alert("hii");
alert(document.getElementById("form:pass").value);
alert("test");
window.opener.document.getElementById("form:pass").value = document.getElementById("overPanel1:newpass").value;
// document.getElementById("overPanel1").hide();
return false;
}
</script>
</h:head>
<h:body>
<h:form styleClass="form" id="form">
Username : <p:inputText id="username"
value="#{userBean.username}">
<f:validateLength minimum="5" maximum="7" />
</p:inputText>
<h:message for="username" style="color:red" />
<br />
<br />
Password : <p:password id="pass"
value="#{userBean.password}" />
<br />
<p:commandLink styleClass="link"
value="change Password" id="commandlink"
style="height:20px" />
<p:overlayPanel id="overPanel1"
for="commandlink"
dynamic="true"
widgetVar="overpanel"
hideEffect="fade">
<h:form id="innerform">
<h:panelGrid columns="1" cellpadding="1">
New Password : <p:password id="newpass"
value="#{userBean.password}" />
<br />
<p:commandButton styleClass="button"
id="change" value="Change"
onclick=" return checkPasswords();
overpanel.hide()">
<!-- <p:ajax event="change" update="pass" partialSubmit="true" /> -->
</p:commandButton>
</h:panelGrid>
</h:form>
</p:overlayPanel>
<br />
<br />
Date Of Birth : <p:calendar value="#{dateBean.date}"
mode="popup" showOn="button" />
<br />
<br />
<p:commandButton value="Submit" action="user" />
</h:form>
</h:body>
</html>
First of all you should not use nested forms.
As for your question you need to update the second form after you submit the first for example:
<p:commandButton value="Submit" action="user" update="form" />
I am developing a project in JSF2.1 ,prettyfaces, hibernate 4 , primefaces
I am getting a problem here… I ve one p:commandbutton which calls ajax request where condition checks that, financial year is opened or not
<p:commandButton id="isFinancialYearSubmitId" value="submit" update="isFinancialYearBooleanPanelGridId scenarioTabViewId:budgetAnalysisDataTableId" action="#{budgetAnalysisAction.isFinancialYearOpened}" oncomplete="isFinancialYearOpenedOnComplete();"/>
There are 3 value… if financial year is opened then ‘1’ if financial year is closed then ‘0’ if invalid then ‘ -1’
If financial year is closed or invalid then an image is loaded with some text ,but problem is here
If financial year is opened then I want to generate a p:dataTable
<h:panelGrid columns="2" id="isFinancialYearBooleanPanelGridId" styleClass="panelGridCenter" >
<h:column>
<ui:fragment rendered="#{budgetAnalysisAction.budgetFinancialYearBean.financialYearForProposalsBean == '-1'}">
<ui:fragment rendered="#{budgetAnalysisAction.util.errorCode == '-1'}" >
<h:outputText value="<div class='n_error'><p>Error . #{budgetAnalysisAction.util.errorMessage}</p></div>" escape="false"/>
</ui:fragment>
</ui:fragment>
<ui:fragment rendered="#{budgetAnalysisAction.budgetFinancialYearBean.financialYearForProposalsBean == '0'}">
<ui:fragment rendered="#{budgetAnalysisAction.util.errorCode == '-1'}" >
<h:outputText value="<div class='n_error'><p>Error . #{budgetAnalysisAction.util.errorMessage}</p></div>" escape="false"/>
</ui:fragment>
</ui:fragment>
</h:column>
<h:column>
<ui:fragment rendered="#{budgetAnalysisAction.budgetFinancialYearBean.financialYearForProposalsBean == '1'}">
<p:tabView id="scenarioTabViewId" style="width:850px" >
<p:tab title="Scenario One" id="scen">
<p:dataTable id="budgetAnalysisDataTableId" editable="true" scrollable="true" scrollWidth="800" resizableColumns="true" value="#{budgetAnalysisAction.budgetScenarioHescoProposalBean.budgetScenarioHescoProposalListBean}" var="budgetScenarioHescoProposalList">
… HERE ARE SOME COLUMNS
</p:dataTable>
</p:tab>
</p:tabView>
</ui:fragment>
</h:column>
</h:panelGrid>
When I submit the command button update=” isFinancialYearBooleanPanelGridId scenarioTabViewId:budgetAnalysisDataTableId”
It will process successfully when financial year is closed or invalid
But it will not generate p:dataTable id="budgetAnalysisDataTableId values when financial year is opened
but when i put
<p:tabView id="scenarioTabViewId" style="width:850px" >
<p:tab title="Scenario One" id="scen">
<p:dataTable id="budgetAnalysisDataTableId" editable="true" scrollable="true" scrollWidth="800" resizableColumns="true" value="#{budgetAnalysisAction.budgetScenarioHescoProposalBean.budgetScenarioHescoProposalListBean}" var="budgetScenarioHescoProposalList">
… HERE ARE SOME COLUMNS
</p:dataTable>
</p:tab>
</p:tabView>
outside the
<h:panelGrid columns="2" id="isFinancialYearBooleanPanelGridId" styleClass="panelGridCenter" >
p:dataTable works fine for me
Any idea thanks (Y)
Here is my full xhtml file
<?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:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<!-- <link rel="stylesheet" type="text/css" href="/css/style.css"></link> -->
<h:head>
<h:outputStylesheet name="style.css" library="css" target="head"/>
<h:outputScript name="validate.js" library="js" target="head"/> <!-- no need here because this file called by mastertemplate due to insert and define tag of jsf -->
<h:outputScript name="jsf.js" library="javax.faces" target="head" />
<h:outputStylesheet name="login.css" library="css" target="head"/>
</h:head>
<!-- <body class="main_background"> -->
<h:body >
<p>hello </p>
<ui:composition template="/template/mastertemplate.xhtml">
<ui:define name="content">
<f:view>
<div id="main">
<div class="full_w" style="height: auto; max-width: 1045px; overflow: hidden;">
<div class="h_title">Formation's Proposal</div>
<h:form styleClass="form" prependId="false" id="anaForm">
<p:panel id="formationsproposalPenel" header="Analysis The Budget">
<div class="divPanel">
<div align="right" class="divContent">
<div align="left" style="margin-top: 10px;">
<h:panelGrid columns="4" id="isFinancialYearPanelGridId">
<h:column>
<h:outputLabel value="Enter financial year " />
</h:column>
<h:column>
<p:inputMask id="isFinancialYearFromId" style="width:50px" mask="9999" value="#{budgetAnalysisAction.budgetFinancialYearBean.isFinancialYearFromBean}" /> -
</h:column>
<h:column>
<p:inputMask id="isFinancialYearToId" style="width:50px" mask="9999" value="#{budgetAnalysisAction.budgetFinancialYearBean.isFinancialYearToBean}" />
</h:column>
<h:column>
<p:commandButton id="isFinancialYearSubmitId" value="submit" update="isFinancialYearBooleanPanelGridId scenarioTabViewId:budgetAnalysisDataTableId" action="#{budgetAnalysisAction.isFinancialYearOpened}" oncomplete="isFinancialYearOpenedOnComplete();"/>
</h:column>
</h:panelGrid>
<p:separator id="separatorId" style="border:1px solid #b8b8b8;margin-top:5px; width:80%;"/>
</div>
<h:panelGrid columns="2" id="isFinancialYearBooleanPanelGridId" styleClass="panelGridCenter" >
<h:column>
<ui:fragment rendered="#{budgetAnalysisAction.budgetFinancialYearBean.financialYearForProposalsBean == '-1'}">
<ui:fragment rendered="#{budgetAnalysisAction.util.errorCode == '-1'}" >
<h:outputText value="<div class='n_error'><p>Error . #{budgetAnalysisAction.util.errorMessage}</p></div>" escape="false"/>
</ui:fragment>
</ui:fragment>
<ui:fragment rendered="#{budgetAnalysisAction.budgetFinancialYearBean.financialYearForProposalsBean == '0'}">
<ui:fragment rendered="#{budgetAnalysisAction.util.errorCode == '-1'}" >
<h:outputText value="<div class='n_error'><p>Error . #{budgetAnalysisAction.util.errorMessage}</p></div>" escape="false"/>
</ui:fragment>
</ui:fragment>
</h:column>
<h:column>
<ui:fragment rendered="#{budgetAnalysisAction.budgetFinancialYearBean.financialYearForProposalsBean == '1'}">
<p:tabView id="scenarioTabViewId" style="width:850px" >
<p:tab title="Scenario One" id="scen">
<p:dataTable id="budgetAnalysisDataTableId" editable="true" scrollable="true" scrollWidth="800" resizableColumns="true" value="#{budgetAnalysisAction.budgetScenarioHescoProposalBean.budgetScenarioHescoProposalListBean}" var="budgetScenarioHescoProposalList">
<!-- <p:ajax event="rowEdit" listener="#{}"/> -->
<p:column headerText="Edit" width="30">
<p:rowEditor />
</p:column>
<p:column headerText="Sub Head Of Accounts" width="150" >
<h:outputText value="#{budgetScenarioHescoProposalList.budgetSubHeadOfAccountsBean.subHeadOfAccountNameBean}" />
</p:column>
<p:column width="150" headerText="Average of #{budgetScenarioHescoProposalList.labelLastThreeYearAvgActualExpBean}" styleClass="wwrapTh wrapTd">
</p:column>
<p:column width="150" headerText="Actual Expenditure Of #{budgetScenarioHescoProposalList.labelLastThreeYearActualExpenditureBean}" styleClass="wwrapTh wrapTd">
</p:column>
<p:column width="150" headerText="Actual Expenditure Of #{budgetScenarioHescoProposalList.labelLastTwoYearActualExpenditureBean}" styleClass="wwrapTh wrapTd">
</p:column>
<p:column width="150" headerText="Actual Expenditure Of #{budgetScenarioHescoProposalList.labelLastYearActualExpenditureBean}" styleClass="wwrapTh wrapTd">
</p:column>
<p:column width="150" headerText="Average Of Allocated Budget #{budgetScenarioHescoProposalList.labelLastThreeYearAvgAllocateBudgetBean}" styleClass="wwrapTh wrapTd">
</p:column>
<p:column width="150" headerText="Allocated Budget Of #{budgetScenarioHescoProposalList.labelLastThreeYearAllocateBudgetBean}" styleClass="wwrapTh wrapTd">
</p:column>
<p:column width="150" headerText="Allocated Budget Of #{budgetScenarioHescoProposalList.labelLastTwoYearAllocateBudgetBean}" styleClass="wwrapTh wrapTd">
</p:column>
<p:column width="150" headerText="Allocated Budget Of #{budgetScenarioHescoProposalList.labelLastYearAllocateBudgetBean}" styleClass="wwrapTh wrapTd">
</p:column>
<p:column width="150" headerText="Expected Expenditure" styleClass="wwrapTh wrapTd">
</p:column>
<p:column width="150" headerText="Next Year Budget" styleClass="wwrapTh wrapTd">
</p:column>
<p:column width="150" headerText="" styleClass="wwrapTh wrapTd">
</p:column>
</p:dataTable>
</p:tab>
<p:tab title="Scenario Two">
</p:tab>
<p:tab title="Scenario Three">
</p:tab>
<p:tab title="Scenario Four">
</p:tab>
</p:tabView>
</ui:fragment>
</h:column>
</h:panelGrid>
</div>
</div>
</p:panel>
</h:form>
</div>
</div>
</f:view>
</ui:define>
</ui:composition>
</h:body>
<!-- </body> -->
</html>
I would like to add this as comment, but maybe I found what is your problem:
In p:commandbutton you have:
update="isFinancialYearBooleanPanelGridId scenarioTabViewId:budgetAnalysisDataTableId"
Shouldn't it be (did you eat colon?)
update="isFinancialYearBooleanPanelGridId:scenarioTabViewId:budgetAnalysisDataTableId"
i ve solved my problem using
.java
RequestContext requestContext = RequestContext.getCurrentInstance();
requestContext.addCallbackParam("budgetFinancialYearBean", this.budgetFinancialYearRefObj);
.xhtml
<p:commandButton id="isFinancialYearSubmitId" value="submit" update="panelGridId scenarioTabViewId:budgetAnalysisDataTableId" action="#{budgetAnalysisAction.isFinancialYearOpened}" oncomplete="handleComplete(xhr, status, args); isFinancialYearOpenedOnComplete();"/>
.js
function handleComplete(xhr, status, args) {
var financialYearForProposalsBeanVar = args.budgetFinancialYearBean.financialYearForProposalsBean;
if(financialYearForProposalsBeanVar == 1) {
//rendering data table
// alert('value: '+financialYearForProposalsBeanVar);
document.getElementById("budgetAnalysisDataTableDivId").style.display = "block";
}
}
I have a problem which I cannot solve. When I open JSF tab and I try to click on the buttons the page is not working.
Main page:
<?xml version='1.0' encoding='UTF-8' ?>
<!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" xml:lang="en" lang="en"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<ui:insert name="header">
<ui:include src="header.xhtml"/>
</ui:insert>
<style type="text/css">
.settingsHashMap { font: 80% "Trebuchet MS", sans-serif;}
</style>
</h:head>
<h:body>
<h1><img src="resources/css/images/icon.png" alt="DX-57" /> Rack Management Center</h1>
<!-- layer for black background of the buttons -->
<div id="toolbar" style="margin: 0 auto; width:100%; height:30px; position:relative; background-color:black">
<!-- Include page Navigation -->
<ui:insert name="Navigation">
<ui:include src="Navigation.xhtml"/>
</ui:insert>
</div>
<div id="logodiv" style="position:relative; top:35px; left:0px;">
<h:graphicImage alt="Datacenter Profile" style="position:relative" value="resources/images/logo_datacenter_profile.png" />
</div>
<div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute; background-color:transparent; top:105px">
<div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute; background-color:transparent; top:80px">
<div id="settingsHashMapz" class="settingsHashMap" style="width:1150px; height:400px; position:absolute; top:20px; left:1px">
<h:form prependId="false">
<h:panelGroup id="tabs" layout="block">
<ul>
<c:forEach items="#{DatacenterProfileController.tabs}" var="tab">
<li>#{tab.tabid}</li>
<h:commandButton id="button_#{tab.tabid}" value="TabClick" action="#{DatacenterProfileController.switchPages(tab.tabid)}" style="display:none">
<f:ajax render="tabs"></f:ajax>
</h:commandButton>
</c:forEach>
</ul>
<c:forEach items="#{DatacenterProfileController.tabs}" var="tab">
<h:panelGroup id="#{tab.tabid}" layout="block" rendered="#{tab.tabid eq DatacenterProfileController.selectedTab}">
<ui:include src="#{tab.tabfilename}"></ui:include>
</h:panelGroup>
</c:forEach>
</h:panelGroup>
</h:form>
</div>
</div>
</div>
</h:body>
</html>
Tab page:
<?xml version='1.0' encoding='UTF-8' ?>
<!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" xml:lang="en" lang="en"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
</h:head>
<h:body>
<ui:composition>
<h:panelGroup>
<h:form id="zones" >
<p:growl id="growl" showDetail="true" sticky="true" />
<!-- The sortable data table -->
<h:dataTable onmouseover="addOnclickToTabsDatatableRows();" id="dataTable" headerClass="columnHeader" value="#{DCProfileTabZonesController.dataList}" binding="#{zones}" var="item">
<!-- Check box -->
<h:column>
<f:facet name="header">
<h:selectBooleanCheckbox style="margin-left: 0px;" value="#{DCProfileTabZonesController.mainSelectAll}" class="checkall" >
<f:ajax listener="#{DCProfileTabZonesController.selectAll}" render="#form" />
</h:selectBooleanCheckbox>
</f:facet>
<h:selectBooleanCheckbox onclick="highlight(this)" value="#{DCProfileTabZonesController.selectedIds[item.datacenterid]}" >
<!-- if the user deselects one row deselect the main checkbox -->
<f:ajax listener="#{DCProfileTabZonesController.deselectMain}" render="#form" />
</h:selectBooleanCheckbox>
<!-- Click on table code -->
<h:outputLink id="lnkHidden" value="ZoneProfile.jsf" style="text-decoration:none; color:white; background-color:black">
<f:param name="id" value="#{item.datacenterid}" />
</h:outputLink>
</h:column>
............
</h:dataTable>
<!-- The paging buttons -->
<h:commandButton styleClass="bimage" value="first" action="#{DCProfileTabZonesController.pageFirst}"
disabled="#{DCProfileTabZonesController.firstRow == 0}" >
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
<h:commandButton styleClass="bimage" value="prev" action="#{DCProfileTabZonesController.pagePrevious}"
disabled="#{DCProfileTabZonesController.firstRow == 0}" >
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
<h:commandButton styleClass="bimage" value="next" action="#{DCProfileTabZonesController.pageNext}"
disabled="#{DCProfileTabZonesController.firstRow + DCProfileTabZonesController.rowsPerPage >= DCProfileTabZonesController.totalRows}" >
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
<h:commandButton styleClass="bimage" value="last" action="#{DCProfileTabZonesController.pageLast}"
disabled="#{DCProfileTabZonesController.firstRow + DCProfileTabZonesController.rowsPerPage >= DCProfileTabZonesController.totalRows}" >
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
<h:outputText value="Page #{DCProfileTabZonesController.currentPage} / #{DCProfileTabZonesController.totalPages}" />
<br />
<!-- The paging links -->
<ui:repeat value="#{DCProfileTabZonesController.pages}" var="page">
<h:commandLink value="#{page}" actionListener="#{DCProfileTabZonesController.page}"
rendered="#{page != DCProfileTabZonesController.currentPage}" style="text-decoration:none;color:white;">
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandLink>
<h:outputText value="#{page}" escape="false"
rendered="#{page == DCProfileTabZonesController.currentPage}" style="text-decoration:none;color:gray;"/>
</ui:repeat>
<br />
<!-- Set rows per page -->
<h:outputLabel for="rowsPerPage" value="Rows per page" />
<h:inputText id="rowsPerPage" value="#{DCProfileTabZonesController.rowsPerPage}" size="3" maxlength="3" />
<h:commandButton styleClass="bimage" value="Set" action="#{DCProfileTabZonesController.pageFirst}" >
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
<h:message for="rowsPerPage" errorStyle="color: red;" />
<!-- hidden button -->
<h:commandButton id="deleterow" value="HiddenDelete" action="#{DCProfileTabZonesController.deleteSelectedIDs}" style="display:none">
<f:ajax render="#form"></f:ajax>
</h:commandButton>
<!-- the delete button -->
<h:button styleClass="bimage" value="Delete" onclick="deletedialog(this, 'Do you want to delete the selected rows?'); return false;" />
<!-- New Zone -->
<h:button id="newzone" styleClass="lbimage" value="New Zone" outcome="/NewZone.xhtml"/>
<script type="text/javascript" src="resources/js/tabs.js"></script>
</h:form>
</h:panelGroup>
</ui:composition>
</h:body>
</html>
When I remove the ui:composition tag and I insert all the code into one page the buttons are working.
As you pointed out in one of your comments, you cannot use nested forms. You need to restructure your layout. Place your outer form around your <ul>:
<h:panelGroup id="tabs" layout="block">
<h:form prependId="false">
<ul>
...
</ul>
</h:form>
<c:forEach items="#{DatacenterProfileController.tabs}" var="tab">
...
</c:forEach>
</h:panelGroup>
The rest of you code should be OK. By this way you avoid nested forms.
I am using JSF 2.0 with PrimeFaces 3.0 M3. When I set dynamic="false" on <p:tabView>, then it works fine. But when I set it to true, then only the currently active tab works. Other tabs does not run. In the 1st tab I have a command link in a data table, this is also not working.
Below is my tabletabview.xhtml:
<!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:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
</h:head>
<h:body>
<f:view>
<h:form>
<p:growl id="growl" showDetail="true" />
<p:tabView cache="false" dynamic="true" activeIndex=0 >
<p:ajax event="tabChange" listener="ActivityController.onChange"/>
<p:tab title="Search Results 1">
<p:dataTable var="dataItem" value="#{ActivityController.dataList}">
<p:column>
<p:panel style="font-size:12px;width:600px">
<f:facet name="header">
<h:outputText value="#{dataItem.activityname}" />
</f:facet>
<div style="background-color: #DEB887;">
<h:outputText value="Location:" style="color:#FF0000;"></h:outputText>
<h:outputText value="#{dataItem.address}" />
<br></br>
</div>
<div style="background-color: #DEB887;">
<h:outputText value="Start Date:" style="color:#FF0000;"></h:outputText>
<h:outputText value="#{dataItem.startingdate}" />
<br></br>
</div>
<div style="background-color: #DEB887;">
<h:outputText value="Start Date:" style="color:#FF0000;"></h:outputText>
<h:outputText value="#{dataItem.endingdate}" />
</div>
<div style="background-color: #DEB887;">
<h:outputText value="Description:" style="color:#FF0000;"></h:outputText>
<h:outputText value="#{dataItem.description}" />
<br></br>
</div>
<p:commandLink action="#{ActivityController.editDataItem}">
<div style="display: none">
<h:outputText value="#{dataItem.activityname}" />
</div>
<h:outputText value="more....."></h:outputText>
<f:setPropertyActionListener target="#{ActivityController.dataItem}" value="#{dataItem}" />
</p:commandLink>
</p:panel>
</p:column>
</p:dataTable>
</p:tab>
<p:tab title="Search Results 2">
<p:panel style="width:600px;height:600px">
<p:schedule id="sche" value="#{searchController.eventModel}"
editable="true" draggable="false" resizable="false"
widgetVar="myschedule">
<p:ajax event="eventSelect"
listener="#{searchController.onEventSelect}" update="red"
process="#this" />
</p:schedule>
</p:panel>
</p:tab>
<p:tab id="gmap" title="Search Results 3">
<ui:include src="/locationpointers.xhtml"></ui:include>
</p:tab>
</p:tabView>
</h:form>
</f:view>
</h:body>
</html>
This is the relevant part of my ActivityController.java
public List<ActivityRegBean> getDataList() {
return dataList;
}
public void setDataList(List<ActivityRegBean> dataList){
this.dataList=dataList;
}
private ActivityRegBean dataItem;
private HtmlInputHidden dataItemId = new HtmlInputHidden() ;
public String editDataItem() throws IOException {
FacesContext context = FacesContext.getCurrentInstance();
System.out.println(dataItem.activityname);
dataItemId.setValue(dataItem.activityid);
System.out.println(dataItem.activityid);
retfromtable(dataItem.activityname);
return "edit"; // Navigation case.
}
public void onChange(TabChangeEvent event) {
System.out.println("tab id = " + event.getTab().getId());
}
The ActivityRegBean has a getter and setter.
How can I use dynamic="true" on the <p:tabView> without problems?
Can you try this instead of p:ajax
<p:tabView cache="false" dynamic="true" tabChangeListener="#{ActivityController.onChange}" onTabChangeUpdate="growl">
I have noticed that you are using xmlns:p="http://primefaces.prime.com.tr/ui" . It is for primefaces 2.2 and if you are indeed using primefaces 3, then it will complain about no taglibrary exists for that namespace. for PF3 you should be using xmlns:p="http://primefaces.org/ui" . may be you should clean your work directory.