pe:layout and p:calendar possible collision on iPad

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

02 Nov 2012, 18:58

Below is a response to a topic in PrimeFaces Core forum, but wanted to share here.
kukeltje wrote:No Sudheer... this is the normal primefaces components nothing related to primefaces mobile. I can confirm this on my ipad...
huangyi00 wrote:The PF application works well on both iPad and Android Pads, although we need to use h:selectOneMenu while not p:selectOneMenu. There are also some strange issues about p:calendar.
Today, my father showed me an issue on his iPad with p:calendar; when he clicks on the p:calendar button, the dropdown appears and then disappears; we duplicated that behavior a few times.

He said it was working well about 1 or 2 weeks ago. I recently added pe:layout, and there may be some type of collision between pe:layout and p:calendar. I also asked him to go to a different page in the web app that has pe:layout, p:calendar, AND pe:timePicker. The p:calendar does not have the p:calendar button on that page. We duplicated the same behavior there. From what I remember, pe:timePicker worked as designed, though; I didn't see that behavior occur with pe:timePicker, but then again, I don't remember really testing pe:timePicker when I was just at my dad's house.

I prefer h:selectOneMenu over p:selectOneMenu, since I'm trying to keep it simple with/for the endusers. I like the latest/recent features added to/for p:selectOneMenu, and decided to add it to my app, but then I pulled it out, since endusers not really using that/those added feature(s), and I still prefer consistency throughout my app, as much as possible; consistency with the look-n-feel of h:selectOneMenu.

Anyway, I need to figure out what I'm going to do about p:calendar issue in my app for iPad enduser. Android endusers are fine with the Android popup 'calendar' dialog via HTML5 type="date", but when I added HTML5 type="date" for mobile devices, my father preferred p:calendar over HTML5 type="date". I think I will at least add type="date" to p:calendar, OR, I may force him to use HTML5 type="date" on p:inputText (same implementation that Android endusers are loving, right now... myself included). :)

CLARIFICATION: this defect can be duplicated in Google Chrome browser on iPad
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

02 Nov 2012, 19:18

Searched google for the following:

stackoverflow ipad jquery datepicker

and found the following (for starters), so I guess I will try one of these and ask my father to test this possible fix/hack:

ipad web application: How do I prevent the keyboard from popping up on jquery datepicker

Ipad + How to prevent the keyboard from popping up on jquery datepicker

Might be better for me to set the inputText/field as 'disabled' via javascript/jQuery instead of JSF disabled="..." attribute of p:calendar, since I do NOT want to disable the datepicker, too.
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

04 Nov 2012, 09:12

These approaches above did not work for me, or maybe I just didn't code it correctly, but the following is a workaround or resolves this issue for me.

How can I suppress keyboard popup on an iPad HTML5 app?

So, the jQuery/javascript is as follows:

Code: Select all

function suppressDatePickerKeyboard() {

    // How can I suppress keyboard popup on an iPad HTML5 app?
    // http://stackoverflow.com/questions/3320404/how-can-i-suppress-keyboard-popup-on-an-ipad-html5-app
    $(".hasDatepicker").focus(function() {
        $(this).blur();
    });
    
    // look at 2nd answer at following URL
    // http://stackoverflow.com/questions/9985090/jquery-on-does-not-work-but-live-does
    // http://api.jquery.com/on/
    $('body').on("focus", '.hasDatepicker', function(){
        $(this).blur();
    });
    
 }

$(function(){

    suppressDatePickerKeyboard();
    
 });
And I added the following to all occurrences of <h:head> in my index.xhtml, since index.xhtml is the parent xhtml, which contains multiple <h:head> for conditional rendering and/or including resources, conditionally:

Code: Select all

<h:outputScript name="js/mcms_iPad.js" rendered="#{pf_usersController.loggedInViaIpad == 'Y'}"/>
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

08 Nov 2012, 05:04

My father just told me that the issue is not fixed yet. Shaking my head. Back to the drawing board. Hmmm, i hope I won't have to build a separate xhtml page (or pages) for iPad endusers, when view contains pe:layout and p:calendar.

I may need to build separate xhtml pages for iPad endusers, and render p:layout instead of pe:layout. OR, I could use HTML5 type="date", but my father preferred p:calendar (jQuery datepicker) popup, and I think I heard that iPad does not have a popup dialog for HTML5 type="date|time|datetime". shaking my head. :(
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