2 pe:timePicker components and p:focus behavior

Community Driven Extensions Project
Post Reply
smithh032772
Posts: 6144
Joined: 10 Sep 2011, 21:10

09 Oct 2012, 09:36

Wow, first time I ever seen this. Prior to adding pe:timePicker to one page, the page has p:focus that sets focus on many different components on the page. The first few components on the page is 2 sets of p:calendar and pe:timePicker. On AJAX response/update, p:focus is updated, and there seems to be a dance/animation going on the page, where BOTH pe:timePicker is playing tug-of-war for gaining 'focus'. While they are playing tug-of-war, the ajaxStatus is in the middle of it, taking no sides, but encouraging the two pe:timePicker's to go, go, go, go...infinitely, as long as the page is the active page in the browser. :)

xhtml below

Code: Select all

<p:layoutUnit position="center">
    <p:focus id="columnWithFocus" for="#{pf_orderCostDetailsController.columnWithFocus}"/>

    <!--
    Temoporarily suppress beanvalidation with JSF
    http://stackoverflow.com/questions/2332713/temoporarily-suppress-beanvalidation-with-jsf
    -->
    <f:validateBean disabled="true">

    <p:panel header="Trip Dates, Group Size">

        <h:panelGrid columns="2" cellpadding="3" cellspacing="3" width="100%">

            <h:panelGrid columns="2" cellpadding="1" cellspacing="1"
                         rendered="#{pf_usersController.loggedInViaAndroid == 'Y'}">
                <h:outputText value="Trip Date:" />
                <p:inputText id="tripDateOnMobile"
                             value="#{pf_ordersController.tripDate[0]}"
                             label="Trip Date" type="date">
                    <f:convertDateTime pattern="yyyy-MM-dd" />
                    <p:ajax partialSubmit="false"
                            listener="#{pf_ordersController.tripDateChangedOnAddEdit}"
                            update="returnDateOnMobile :orderAddForm:formMessages :orderAddForm:dt_bookedTrips :orderAddForm:flightDataTable :orderAddForm:columnWithFocus :orderAddForm:_ajax_status"/>
                </p:inputText>
                <h:outputText value="Trip Time:" />
                <p:inputText id="tripTimeOnMobile"
                             value="#{pf_ordersController.tripTime[0]}"
                             label="Trip Time" type="time">
                    <f:convertDateTime pattern="HH:mm" />
                    <p:ajax partialSubmit="false"
                            update="returnTimeOnMobile :orderAddForm:formMessages :orderAddForm:totalCostDiscountPanel :orderAddForm:pricingTabView :orderAddForm:dt_bookedTrips :orderAddForm:columnWithFocus :orderAddForm:_ajax_status"
                            listener="#{pf_ordersController.tripTimeChangedOnAddEdit()}"/>
                </p:inputText>
            </h:panelGrid>

            <h:panelGrid columns="3" cellpadding="3" cellspacing="3"
                         rendered="#{pf_usersController.loggedInViaAndroid == 'N'}">

                <h:outputText value="Trip Date/Time:" />
                <p:calendar id="tripDate" value="#{pf_ordersController.tripDate[0]}"
                            pattern="MM/dd/yyyy" navigator="true"
                            size="12" label="Trip Date">
                    <f:convertDateTime pattern="MM/dd/yyyy" />
                    <p:ajax partialSubmit="false" event="dateSelect"
                            listener="#{pf_ordersController.tripDateSelectedOnAddEdit}"
                            update="returnDate :orderAddForm:formMessages :orderAddForm:dt_bookedTrips :orderAddForm:flightDataTable :orderAddForm:columnWithFocus :orderAddForm:_ajax_status" />
                    <p:ajax partialSubmit="false"
                            listener="#{pf_ordersController.tripDateChangedOnAddEdit}"
                            update="returnDate :orderAddForm:formMessages :orderAddForm:dt_bookedTrips :orderAddForm:flightDataTable :orderAddForm:columnWithFocus :orderAddForm:_ajax_status"/>
                </p:calendar>
                <pe:timePicker id="tripTime" value="#{pf_ordersController.tripTime[0]}"
                               label="Trip Time" mode="popup" showPeriod="true" style="width: 100px;">
                    <f:convertDateTime pattern="hh:mm a" />
                    <p:ajax partialSubmit="false" event="close"
                            listener="#{pf_ordersController.tripTimeChangedOnAddEditClose}"
                            update="returnTime :orderAddForm:formMessages :orderAddForm:totalCostDiscountPanel :orderAddForm:pricingTabView :orderAddForm:dt_bookedTrips :orderAddForm:columnWithFocus :orderAddForm:_ajax_status"/>
                    <p:ajax partialSubmit="false"
                            listener="#{pf_ordersController.tripTimeChangedOnAddEdit()}"
                            update="returnTime :orderAddForm:formMessages :orderAddForm:totalCostDiscountPanel :orderAddForm:pricingTabView :orderAddForm:dt_bookedTrips :orderAddForm:columnWithFocus :orderAddForm:_ajax_status"/>
                </pe:timePicker>
            </h:panelGrid>

            <h:panelGrid columns="2" cellpadding="1" cellspacing="1"
                         rendered="#{pf_usersController.loggedInViaAndroid == 'Y'}">
                <h:outputText value="Return Date:" />
                <p:inputText id="returnDateOnMobile"
                             value="#{pf_ordersController.returnDate[0]}"
                             label="Return Date" type="date">
                    <f:convertDateTime pattern="yyyy-MM-dd" />
                    <p:ajax partialSubmit="false"
                            update=":orderAddForm:formMessages :orderAddForm:dt_bookedTrips :orderAddForm:columnWithFocus :orderAddForm:_ajax_status"
                            listener="#{pf_ordersController.returnDateChangedOnAddEdit()}"/>
                </p:inputText>
                <h:outputText value="Return Time:" />
                <p:inputText id="returnTimeOnMobile"
                             value="#{pf_ordersController.returnTime[0]}"
                             label="Return Time" type="time">
                    <f:convertDateTime pattern="HH:mm" />
                    <p:ajax partialSubmit="false"
                            update="returnTimeOnMobile :orderAddForm:formMessages :orderAddForm:totalCostDiscountPanel :orderAddForm:pricingTabView :orderAddForm:dt_bookedTrips :orderAddForm:columnWithFocus :orderAddForm:_ajax_status"
                            listener="#{pf_ordersController.returnTimeChangedOnAddEdit()}"/>
                </p:inputText>
            </h:panelGrid>

            <h:panelGrid columns="3" cellpadding="3" cellspacing="3"
                         rendered="#{pf_usersController.loggedInViaAndroid == 'N'}">

                <h:outputText value="Return Date/Time:" />
                <p:calendar id="returnDate" value="#{pf_ordersController.returnDate[0]}"
                            pattern="MM/dd/yyyy" navigator="true"
                            size="12" label="Return Date">
                    <f:convertDateTime pattern="MM/dd/yyyy" />
                    <p:ajax partialSubmit="false" event="dateSelect"
                            update=":orderAddForm:formMessages :orderAddForm:dt_bookedTrips :orderAddForm:columnWithFocus :orderAddForm:_ajax_status"
                            listener="#{pf_ordersController.returnDateSelectedOnAddEdit}"/>
                    <p:ajax partialSubmit="false"
                            update=":orderAddForm:formMessages :orderAddForm:dt_bookedTrips :orderAddForm:columnWithFocus :orderAddForm:_ajax_status"
                            listener="#{pf_ordersController.returnDateChangedOnAddEdit}"/>
                </p:calendar>
                <pe:timePicker id="returnTime" value="#{pf_ordersController.returnTime[0]}"
                               label="Return Time" mode="popup" showPeriod="true" style="width: 100px;">
                    <f:convertDateTime pattern="hh:mm a" />
                    <p:ajax partialSubmit="false" event="close"
                            listener="#{pf_ordersController.returnTimeChangedOnAddEditClose}"
                            update="returnTime :orderAddForm:formMessages :orderAddForm:totalCostDiscountPanel :orderAddForm:pricingTabView :orderAddForm:dt_bookedTrips :orderAddForm:columnWithFocus :orderAddForm:_ajax_status"/>
                    <p:ajax partialSubmit="false"
                            listener="#{pf_ordersController.returnTimeChangedOnAddEdit()}"
                            update="returnTime :orderAddForm:formMessages :orderAddForm:totalCostDiscountPanel :orderAddForm:pricingTabView :orderAddForm:dt_bookedTrips :orderAddForm:columnWithFocus :orderAddForm:_ajax_status"/>
                </pe:timePicker>

            </h:panelGrid>

        </h:panelGrid>

There is some bean code that updates the p:focus via AjaxBehaviorEvent on components; to fix this, I'm going to make sure p:focus is not setting focus on the pe:timePicker components. :)

Issue 278 in PrimeFaces Extensions Issue tracker
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

smithh032772
Posts: 6144
Joined: 10 Sep 2011, 21:10

09 Oct 2012, 10:06

The problem is caused by what I documented in issue 277, and the solution was to remove the p:ajax with event="..." that was not defined or demonstrated in showcase; also, I removed p:focus from update="...".

Code: Select all

<pe:timePicker id="tripTime" value="#{pf_ordersController.tripTime[0]}"
               label="Trip Time" mode="popup" showPeriod="true" style="width: 100px;">
    <f:convertDateTime pattern="hh:mm a" />
    <p:ajax partialSubmit="false" event="close"
            listener="#{pf_ordersController.tripTimeChangedOnAddEditClose}"
            update="returnTime :orderAddForm:formMessages :orderAddForm:totalCostDiscountPanel :orderAddForm:pricingTabView :orderAddForm:dt_bookedTrips :orderAddForm:_ajax_status"/>
</pe:timePicker>
Whew, don't know why I didn't test that earlier. i was ready to go to bed and everything, but something told me to test that page (added pe:timePicker to 3 pages, forgot to test that page, because I copied/pasted the xhtml, and that xhtml was invalid/problematic, since it had 2 p:ajax for each pe:timePicker).

Now, I can call it a night/day. :)
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 “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests