SOLVED!!!
I'm using p:dataTable and p:subTable to implement a payroll page that fires an action from subtable column.
1. Embedded <a> (anchor tag or hyperlink) in p:subTable
Code: Select all
<p:column>
<h:link title="View" onclick="return clickToViewOrder(#{order.order.orderId})">
<h:outputText escape="false" value="#{order.tripDate}" />
</h:link>
</p:column>
2. Embedded h:inputHidden, javascript, and p:commandButton inside of h:form
Code: Select all
<p:outputPanel layout="block" style="display: none !important;">
<h:inputHidden id="viewOrderId" value="#{pf_ordersController.selectedOrderId}" />
<script language="text/javascript">
function clickToViewOrder(orderId) {
document.getElementById('payrollForm:viewOrderId').value = orderId;
document.getElementById('payrollForm:btn_viewFromPayroll').click()
return false;
}
</script>
<p:commandButton id="btn_viewFromPayroll" update=":pageContentPanel"
actionListener="#{pf_ordersController.prepareViewFromPayroll}"/>
</p:outputPanel>
3. Add selectedOrderId (for h:inputHidden) and getter/setter
Code: Select all
private Integer selectedOrderId;
public Integer getSelectedOrderId() {
return selectedOrderId;
}
public void setSelectedOrderId(Integer selectedOrderId) {
this.selectedOrderId = selectedOrderId;
}
4. bean method responsible for navigating to another ui:include page
Code: Select all
public String prepareViewFromPayroll() {
Integer orderId = selectedOrderId;
current = null;
try {
current = getFacade().getOrder(orderId);
if (current != null) {
currentDetails = current.getDetailsId();
currentNotes = current.getNotesId();
currentRoutes = current.getRoutesId();
browse = false;
add = false;
edit = false;
view = true;
viewToAdd = false;
viewToEdit = false;
getPageNavigation().setPage("/orders/pf_ViewFromPayroll.xhtml");
}
else {
messages.addFormErrorMsg("Error on attempt to view ORDERS data from Payroll (orderId==null)", "");
}
} catch (Exception e) {
e.printStackTrace();
messages.addFormErrorMsg("Error retrieving ORDERS data to view from Payroll", (e.getMessage() != null) ? e.getMessage() : "");
}
return null;
}
pf_BrowsePayroll.xhtml
Code: Select all
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<ui:composition>
<h:form id="payrollForm" onkeypress="disableEnterKey(event)" >
<ui:include src="/pf_ajaxStatus.xhtml"/>
<p:messages id="formMessages" showDetail="true" showSummary="true" />
<p:panel id="payrollPanel" styleClass="panel-title-centeralign" header="PAYROLL">
<h:panelGroup layout="block" style="width: 100% !important; text-align: center !important;" >
<h:panelGrid columns="3" width="100%" style="text-align: center !important;" >
<h:panelGrid columns="2">
<h:outputText value="Driver" />
<p:selectOneMenu id="filterDriver" value="#{pf_ordersController.filterDriver}">
<f:selectItem itemLabel="Select One" itemValue="0" />
<f:selectItems value="#{pf_ordersController.selectOneDriverForPayroll}"
var="selectOneDriver" itemLabel="#{selectOneDriver.driverName}" itemValue="#{selectOneDriver.driverId}"/>
<p:ajax listener="#{pf_ordersController.filterDriverSelected}" update=":pageContentPanel"/>
</p:selectOneMenu>
</h:panelGrid>
<h:panelGrid columns="2">
<h:outputLabel value="Pay Period Begin:" />
<p:calendar id="filterTripDateFrom" value="#{pf_ordersController.filterTripDateFrom}"
mode="popup" showOn="button" navigator="true" effect="fadeIn" pattern="MM/dd/yyyy" size="12">
<p:ajax event="dateSelect" listener="#{pf_ordersController.filterTripDateFromSelected}" update=":pageContentPanel" />
</p:calendar>
</h:panelGrid>
<h:panelGrid columns="2">
<h:outputLabel value="Pay Period End:" />
<p:calendar id="filterTripDateTo" value="#{pf_ordersController.filterTripDateTo}"
mode="popup" showOn="button" navigator="true" effect="fadeIn" pattern="MM/dd/yyyy" size="12">
<p:ajax event="dateSelect" listener="#{pf_ordersController.filterTripDateToSelected}" update=":pageContentPanel" />
</p:calendar>
</h:panelGrid>
</h:panelGrid>
</h:panelGroup>
<p:outputPanel layout="block" style="display: none !important;">
<h:inputHidden id="viewOrderId" value="#{pf_ordersController.selectedOrderId}" />
<script language="text/javascript">
function clickToViewOrder(orderId) {
document.getElementById('payrollForm:viewOrderId').value = orderId;
document.getElementById('payrollForm:btn_viewFromPayroll').click()
return false;
}
</script>
<p:commandButton id="btn_viewFromPayroll" update=":pageContentPanel"
actionListener="#{pf_ordersController.prepareViewFromPayroll}"/>
</p:outputPanel>
<p:dataTable id="payrollDataTable" var="driver" value="#{pf_ordersController.driverPayrollList}"
style="font-size: 85% !important;">
<p:columnGroup type="header">
<p:row>
<p:column headerText="Driver"/>
<p:column colspan="6" headerText="" />
<p:column colspan="3" headerText="Miles" />
<p:column colspan="3" headerText="Hours" />
<p:column colspan="1" headerText="" />
</p:row>
<p:row>
<p:column headerText="Trip Date" />
<p:column headerText="Destination" />
<p:column headerText="Origin" />
<p:column headerText="Customer" />
<p:column headerText="Service" />
<p:column headerText="Order #" />
<p:column headerText="Gratuity" />
<p:column headerText="Live" />
<p:column headerText="Dead" />
<p:column headerText="Total" />
<p:column headerText="Days" />
<p:column headerText="Hrs/Day" />
<p:column headerText="Total" />
<p:column headerText="Pay By" />
</p:row>
</p:columnGroup>
<p:subTable var="order" value="#{driver.orders}">
<f:facet name="header">
#{driver.driver} (#{driver.rowNumber} of #{pf_ordersController.driverPayrollList.size()})
</f:facet>
<p:column>
<h:link title="View" onclick="return clickToViewOrder(#{order.order.orderId})">
<h:outputText escape="false" value="#{order.tripDate}" />
</h:link>
</p:column>
<p:column>
<h:outputText escape="false" value="#{order.destination}" />
</p:column>
<p:column>
<h:outputText escape="false" value="#{order.origin}" />
</p:column>
<p:column>
<h:outputText value="#{order.customer}" />
</p:column>
<p:column>
<h:outputText escape="false" value="#{order.service}" />
</p:column>
<p:column style="text-align: center !important;">
<h:outputText escape="false" value="#{order.orderNumber}">
<f:convertNumber minIntegerDigits="4" groupingUsed="false" integerOnly="true" type="number"/>
</h:outputText>
</p:column>
<p:column style="text-align: right !important;">
<h:outputText escape="false" value="#{order.gratuity}">
<f:convertNumber minFractionDigits="2" type="number"/>
</h:outputText>
</p:column>
<p:column style="text-align: right !important;">
<h:outputText escape="false" value="#{order.liveMiles}">
<f:convertNumber minFractionDigits="2" type="number"/>
</h:outputText>
</p:column>
<p:column style="text-align: right !important;">
<h:outputText escape="false" value="#{order.deadMiles}">
<f:convertNumber minFractionDigits="2" type="number"/>
</h:outputText>
</p:column>
<p:column style="text-align: right !important;">
<h:outputText escape="false" value="#{order.totalMiles}">
<f:convertNumber minFractionDigits="2" type="number"/>
</h:outputText>
</p:column>
<p:column style="text-align: right !important;">
<h:outputText escape="false" value="#{order.nbrOfDays}" />
</p:column>
<p:column style="text-align: right !important;">
<h:outputText escape="false" value="#{order.hoursPerDay}" />
</p:column>
<p:column style="text-align: right !important;">
<h:outputText escape="false" value="#{order.totalHours}">
<f:convertNumber minFractionDigits="2" type="number"/>
</h:outputText>
</p:column>
<p:column>
<h:outputText escape="false" value="#{order.payBy}" />
</p:column>
</p:subTable>
</p:dataTable>
</p:panel>
</h:form>
<script language="JavaScript">
function disableEnterKey(e)
{
var key;
if(window.event)
key = window.event.keyCode; //IE
else
key = e.which; //firefox
if(key == 13)
return false;
else
return true;
}
</script>
</ui:composition>
</html>
References:
I searched googled and read many posts on stackoverflow.com, but as always, BalusC JSF responses and blogs are the best. I was trying to implement what is documented at the URL below (prior to reading this article); after reading the article, it confirmed that I was on the right track.
Pass variables from client side to server side
Edit: This response was when I was using Mojarra 2.1.3 or 2.1.4. Now, I'm using MyFaces 2.1.8 (see next page of this topic, and look for my response).