PF3.4 SNAPSHOT, Mobile 0.9.3 p:ajax inside p:dataList

UI Components for JSF
Post Reply
smithh032772
Posts: 6144
Joined: 10 Sep 2011, 21:10

09 Aug 2012, 19:00

DEFECT: p:ajax does not submit changed data values, and p:ajax update="..." resets data values to original values on page

Issue # 4488 in Issue Tracker

JSF/PrimeFaces web/mobile xhtml pages using PrimeFaces 3.4-SNAPSHOT and Mobile 0.9.3, and the same software to provide data to xhtml pages.

In web app, I have following xhtml, which works fine:

Code: Select all

<p:selectOneMenu label="Vehicle" value="#{driverVehicle.vehicle}" style="width: 100px"
                 filter="true" filterMatchMode="contains"
                 disabled="#{pf_ordersController.renderDriverDetailsOriginDestination or driverVehicle.costDetailsId == null or driverVehicle.costDetailsId == 0}"
                 rendered="#{driverVehicle.serviceVehicleType == 'Y' and pf_orderCostDetailsController.getMCTFlagForOrderCostDetailsId(driverVehicle.costDetailsId) == 'Y'}">
    <f:selectItem itemLabel="Select One" itemValue=""/>
    <f:selectItems value="#{pf_vehicleController.getItemsAvailableSelectOne(driverVehicle.serviceAbbr)}"
                var="d" itemLabel="#{d.vehicleNumber}" itemValue="#{d.vehicleId}"/>
    <p:ajax partialSubmit="false" listener="#{pf_ordersController.changedDriverVehicle(driverVehicle)}"/>
</p:selectOneMenu>
In mobile app, I have following p:dataList:

Code: Select all

<p:dataList id="dl_driverVehicles" var="driverVehicle"
                value="#{pf_ordersController.driverVehicles}">
.
.
.
</p:dataList>
In mobile app, the following selectOneMenu with p:ajax does not work in p:dataList:

Code: Select all

<h:selectOneMenu label="Vehicle" value="#{driverVehicle.vehicle}"
                 disabled="#{pf_ordersController.renderDriverDetailsOriginDestination or driverVehicle.costDetailsId == null or driverVehicle.costDetailsId == 0}"
                 rendered="#{driverVehicle.serviceVehicleType == 'Y' and pf_orderCostDetailsController.getMCTFlagForOrderCostDetailsId(driverVehicle.costDetailsId) == 'Y'}">
    <f:selectItem itemLabel="Select One" itemValue=""/>
    <f:selectItems value="#{pf_vehicleController.getItemsAvailableSelectOne(driverVehicle.serviceAbbr)}"
                var="d" itemLabel="#{d.vehicleNumber}" itemValue="#{d.vehicleId}"/>
    <p:ajax partialSubmit="false" listener="#{pf_ordersController.changedDriverVehicle(driverVehicle)}"/>
</h:selectOneMenu>
WORKAROUND includes: onchange, p:ajax onstart, p:commandButton, javascript to invoke p:commandButton clicked() event, h:inputHidden for rowNumber, new bean events triggered by commandButtons

h:panelGroup with style="display: none" for p:commandButtons

Code: Select all

<h:panelGroup layout="block" style="display: none">
    <h:inputHidden id="driverVehicleRowNumber"
                   value="#{pf_ordersController.driverVehicleRowNumberOnMobile}"/>
    <script language="text/javascript">
        function triggerBtnClick(btnName) {
            var name = "mobileForm:" + btnName;
            document.getElementById(name).click();
        }
        function triggerBtnClickWithRowNumber(btnName, dvRowNumber) {
            var name = "mobileForm:" + btnName;
            document.getElementById('mobileForm:driverVehicleRowNumber').value = dvRowNumber;
            document.getElementById(name).click();
        }
    </script>
    <p:commandButton id="btn_driverVehicleSelectedChanged"
                     value="driverVehicleSelectedChanged"
                     action="#{pf_ordersController.driverVehicleSelectedChanged}"
                     update=":mobileForm:driverVehiclesContentPanel"/>
    <p:commandButton id="btn_changedDriverVehicle"
                     value="changedDriverVehicle"
                     action="#{pf_ordersController.changedDriverVehicleOnMobile('changedDriverVehicle')}"
                     update=":mobileForm:driverVehiclesContentPanel"/>
    <p:commandButton id="btn_changedDriverVehicleAttributes"
                     value="changedDriverVehicleAttributes"
                     action="#{pf_ordersController.changedDriverVehicleAttributes}"
                     update="dl_driverVehicles"/>
    <p:commandButton id="btn_changedDriverVehiclePricing"
                     value="changedDriverVehiclePricing"
                     action="#{pf_ordersController.changedDriverVehicleOnMobile('changedDriverVehiclePricing')}"
                     update=":mobileForm:driverVehiclesContentPanel"/>
    <p:commandButton id="btn_changedServiceVehicleType"
                     value="changedServiceVehicleType"
                     action="#{pf_ordersController.changedDriverVehicleOnMobile('changedServiceVehicleType')}"
                     update=":mobileForm:driverVehiclesContentPanel"/>

</h:panelGroup>
p:dataList with components that use javascript and p:ajax to trigger p:commandButton's

Code: Select all

<p:dataList id="dl_driverVehicles" var="driverVehicle"
            value="#{pf_ordersController.driverVehicles}">
    <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-bar-d">
        Driver/Vehicle #{driverVehicle.rowNumber}
    </li>
    <p:selectBooleanCheckbox value="#{driverVehicle.selected}" itemLabel="Select">
        <p:ajax partialSubmit="false"
                onstart="triggerBtnClick('btn_driverVehicleSelectedChanged'); return false;"/>
    </p:selectBooleanCheckbox>
    <h4>Pricing</h4>
    <h:selectOneMenu value="#{driverVehicle.costDetailsId}"
                     disabled="#{pf_ordersController.renderDriverDetailsOriginDestination}"
                     onchange="triggerBtnClickWithRowNumber('btn_changedDriverVehiclePricing', #{driverVehicle.rowNumber})">
        <f:selectItem itemLabel="Select One" itemValue=""/>
        <f:selectItems value="#{pf_orderCostDetailsController.orderCostDetailsListDisplay}"
                        var="ocdForDriverVehicle"
                        itemLabel="#{ocdForDriverVehicle.serviceAbbr}#{ocdForDriverVehicle.nbrOfPassengers}"
                        itemValue="#{ocdForDriverVehicle.costDetailsId}"/>
    </h:selectOneMenu>
    <h4>Driver</h4>
    <h:selectOneMenu label="Driver" value="#{driverVehicle.driver}"
                     disabled="#{pf_ordersController.renderDriverDetailsOriginDestination or driverVehicle.costDetailsId == null or driverVehicle.costDetailsId == 0}"
                     onchange="triggerBtnClickWithRowNumber('btn_changedDriverVehicle', #{driverVehicle.rowNumber})">
        <f:selectItem itemLabel="Select One" itemValue="0"/>
        <f:selectItems value="#{pf_driverController.itemsAvailableSelectOne}"
                        var="d" itemLabel="#{d.driverName}" itemValue="#{d.driverId}"/>
    </h:selectOneMenu>
    <h:panelGroup layout="block"
                  rendered="#{pf_orderCostDetailsController.listHasMCTFlag('Y') == true}">
        <h4>Select Service Vehicle Type?</h4>
        <h:selectOneMenu value="#{driverVehicle.serviceVehicleType}"
                         disabled="#{pf_ordersController.renderDriverDetailsOriginDestination or driverVehicle.costDetailsId == null or driverVehicle.costDetailsId == 0}"
                         rendered="#{pf_orderCostDetailsController.getMCTFlagForOrderCostDetailsId(driverVehicle.costDetailsId) == 'Y'}"
                         onchange="triggerBtnClickWithRowNumber('btn_changedServiceVehicleType', #{driverVehicle.rowNumber})">
            <f:selectItem itemValue="#{bundle.DropdownOptionValueYes}" itemLabel="#{bundle.DropdownOptionLabelYes}"/>
            <f:selectItem itemValue="#{bundle.DropdownOptionValueNo}" itemLabel="#{bundle.DropdownOptionLabelNo}"/>
        </h:selectOneMenu>
    </h:panelGroup>
    <h:panelGroup layout="block"
                  rendered="#{pf_orderCostDetailsController.listHasMCTFlag('Y') == true}">
        <h4>Vehicle</h4>
        <h:selectOneMenu label="Vehicle" value="#{driverVehicle.vehicle}"
                         disabled="#{pf_ordersController.renderDriverDetailsOriginDestination or driverVehicle.costDetailsId == null or driverVehicle.costDetailsId == 0}"
                         rendered="#{driverVehicle.serviceVehicleType == 'Y' and pf_orderCostDetailsController.getMCTFlagForOrderCostDetailsId(driverVehicle.costDetailsId) == 'Y'}"
                         onchange="triggerBtnClickWithRowNumber('btn_changedDriverVehicle', #{driverVehicle.rowNumber})">
            <f:selectItem itemLabel="Select One" itemValue=""/>
            <f:selectItems value="#{pf_vehicleController.getItemsAvailableSelectOne(driverVehicle.serviceAbbr)}"
                        var="d" itemLabel="#{d.vehicleNumber}" itemValue="#{d.vehicleId}"/>
        </h:selectOneMenu>
        <h:selectOneMenu label="Vehicle" value="#{driverVehicle.vehicle}"
                         disabled="#{pf_ordersController.renderDriverDetailsOriginDestination or driverVehicle.costDetailsId == null or driverVehicle.costDetailsId == 0}"
                         rendered="#{driverVehicle.serviceVehicleType == 'N' and pf_orderCostDetailsController.getMCTFlagForOrderCostDetailsId(driverVehicle.costDetailsId) == 'Y'}"
                         onchange="triggerBtnClickWithRowNumber('btn_changedDriverVehicle', #{driverVehicle.rowNumber})">
            <f:selectItem itemLabel="Select One" itemValue=""/>
            <f:selectItems value="#{pf_vehicleController.getItemsAvailableSelectOne()}"
                            var="d" itemLabel="#{d.vehicleNumber}" itemValue="#{d.vehicleId}"/>
        </h:selectOneMenu>
    </h:panelGroup>
    <p:inputText type="date" label="Begin Date"
                 value="#{driverVehicle.beginDate}"
                 disabled="#{pf_ordersController.renderDriverDetailsOriginDestination or driverVehicle.costDetailsId == null or driverVehicle.costDetailsId == 0}">
        <f:convertDateTime pattern="yyyy-MM-dd" />
        <p:ajax partialSubmit="false"
                onstart="triggerBtnClick('btn_changedDriverVehicleAttributes'); return false;"/>
    </p:inputText>
    <p:inputText value="#{driverVehicle.beginTime}" label="Begin Time"
                disabled="#{pf_ordersController.renderDriverDetailsOriginDestination or driverVehicle.costDetailsId == null or driverVehicle.costDetailsId == 0}">
        <f:convertDateTime pattern="hh:mm a" />
        <p:ajax partialSubmit="false"
                onstart="triggerBtnClick('btn_changedDriverVehicleAttributes'); return false;"/>
    </p:inputText>
    <p:inputText type="date" label="End Date"
                 value="#{driverVehicle.endDate}"
                 disabled="#{pf_ordersController.renderDriverDetailsOriginDestination or driverVehicle.costDetailsId == null or driverVehicle.costDetailsId == 0}">
        <f:convertDateTime pattern="yyyy-MM-dd" />
        <p:ajax partialSubmit="false"
                onstart="triggerBtnClick('btn_changedDriverVehicleAttributes'); return false;"/>
    </p:inputText>
    <p:inputText value="#{driverVehicle.endTime}" label="End Time"
                disabled="#{pf_ordersController.renderDriverDetailsOriginDestination or driverVehicle.costDetailsId == null or driverVehicle.costDetailsId == 0}">
        <f:convertDateTime pattern="hh:mm a" />
        <p:ajax partialSubmit="false"
                onstart="triggerBtnClick('btn_changedDriverVehicleAttributes'); return false;"/>
    </p:inputText>
</p:dataList>
On another page I built earlier, p:ajax works fine outside of p:dataList, see code from other page below.

Code: Select all

<pm:content>
    <h:panelGroup id="mainPayrollPanel">
        <p:messages showDetail="true" showSummary="false" escape="false"/>

        <p:panel header="Select Driver/Dates" collapsed="true">
            <pm:field>
                <h:outputLabel for="filterDriver" value="Driver" />
                <h:selectOneMenu id="filterDriver" value="#{pf_ordersController.filterDriver}">
                    <f:selectItem itemLabel="#{pf_ordersController.selectOneFilterDriver}" itemValue="0" />
                    <f:selectItems value="#{pf_ordersController.selectOneDriverForPayroll}"
                                    var="selectOneDriver"
                                    itemLabel="#{selectOneDriver.driverName}"
                                    itemValue="#{selectOneDriver.driverId}"/>
                    <p:ajax listener="#{pf_ordersController.filterDriverSelected}"
                            update=":mobileForm:mainPayrollPanel"/>
                </h:selectOneMenu>
            </pm:field>
            <pm:field>
                <h:outputLabel for="filterTripDateFrom" value="Pay Period Begin" />
                <p:inputText id="filterTripDateFrom" type="date"
                                value="#{pf_ordersController.filterTripDateFrom}">
                    <f:convertDateTime pattern="yyyy-MM-dd" />
                    <p:ajax listener="#{pf_ordersController.filterTripDateFromSelectedOnMobile}"
                            update=":mobileForm:mainPayrollPanel"/>
                </p:inputText>
            </pm:field>
            <pm:field>
                <h:outputLabel for="filterTripDateTo" value="Pay Period End" />
                <p:inputText id="filterTripDateTo" type="date"
                                value="#{pf_ordersController.filterTripDateTo}">
                    <f:convertDateTime pattern="yyyy-MM-dd" />
                    <p:ajax listener="#{pf_ordersController.filterTripDateToSelectedOnMobile}"
                            update=":mobileForm:mainPayrollPanel"/>
                </p:inputText>
            </pm:field>
        </p:panel>

        <p:dataList id="payrollDataList" var="driver"
                    value="#{pf_ordersController.payrollDriverList}">
            <p:column>
                <p:commandLink action="#{pf_ordersController.setPayrollDriverAndDisplayOrders(driver)}"
                            value="#{driver.rowNumber} of #{pf_ordersController.payrollDriverList.size()}: #{driver.driver} #{driver.orders.size()} trip(s)"
                            update=":mobileForm:payrollDriversOrdersPanel"/>
            </p:column>
        </p:dataList>
    </h:panelGroup>
</pm:content>
Howard

PrimeFaces 6.0, Extensions 6.0.0, Push (Atmosphere 2.4.0)
TomEE+ 1.7.4 (Tomcat 7.0.68), MyFaces Core 2.2.9, JDK8
JUEL 2.2.7 | OmniFaces | EclipseLink-JPA/Derby | Chrome

Java EE 6 Tutorial|NetBeans|Google|Stackoverflow|PrimeFaces|Apache

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 14 guests