p:calendar loses styling on ajax update, PF5 related problem

UI Components for JSF
Post Reply
krayman
Posts: 2
Joined: 07 Aug 2013, 18:46

05 Jul 2014, 13:31

Hí,

I´m having trouble with p:calender in relation to mobile render kit in PF5. The style is lost as soon as you do an ajax update.

I found this difference in the generated html output for the component:

When initally rendered:

Code: Select all

<div id="visItem:idmaxBetalingsDato" class="ui-calendar ui-calendar-popup">	
	<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
	<input id="visItem:idmaxBetalingsDato_input" class="hasDatepicker" type="text" name="visItem:idmaxBetalingsDato_input">
	</div>
</div>
After ajax update:

Code: Select all

<div id="visItem:idmaxBetalingsDato" class="ui-calendar ui-calendar-popup">

	<input id="visItem:idmaxBetalingsDato_input" class="hasDatepicker" type="text" name="visItem:idmaxBetalingsDato_input">
</div>
As you can se this line <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"> is missing in the output after update.

I would really appreciate any suggestions for a workaround or a quick fix since we an application that we have ported from PF3.5.x, PFM 0.9.5 --> PF 5 that we need to have in production soon. I´m very sure that this problem is related to PF5.

NB: Problem can easily be reproduced by the following code:

Code: Select all

<!DOCTYPE html>
<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"
    xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
    xmlns:pm="http://primefaces.org/mobile">
    
<f:view renderKitId="PRIMEFACES_MOBILE"/>

<h:head>
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
</h:head>
  
  <h:body>
    <pm:page id="visItem" swatch="a">
      <pm:header title="e-arkiv">
    </pm:header>
      <pm:content>
       <h:form id="dokinfoForm">
			<p:commandButton style="font-size:small;" styleClass="ui-btn-inline" icon="ui-icon-arrow-r" title="Næste" iconPos="right"
				value="Næste"  update="idmaxBetalingsDato" />
				<p:outputLabel style="font-size: 12px " value="Nyeste dato: " />
				<p:calendar id="idmaxBetalingsDato" 
								navigator="true"
								pattern="dd-MM-yyyy">
				</p:calendar>
       </h:form>
      </pm:content>
    </pm:page>
 </h:body>
</html>
Thx a lot in advance....Kenneth ;-)
PrimeFaces 5.1.11 | Tomcat 7.0.55 | Mojarra 2.2.8 | Firefox 24.6.0

KedLBO
Posts: 12
Joined: 29 Apr 2013, 14:45

28 Aug 2014, 18:23

Hi Kenneth,

Did you find a solution for this problem ? I've the same and cannot find anything on the web :(

Thanks a lot
Regards
Ludo

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

28 Aug 2014, 20:52

I would avoid using p:calendar, and use HTML5 datepicker

Code: Select all

p:inputText type="date"
or attach jquery datepicker to p:inputText (similar to PrimeFaces Core does to non-PrimeFaces-Mobile xhtml pages via HTML_BASIC render kit).

Currently, in my app, I do the following for Android devices

Code: Select all

p:inputText type="date"
and jquery datepicker + p:inputText for iPad, since my iPad users prefer jquery datepicker more than HTML5 datepicker.
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

miguelz
Posts: 2
Joined: 04 May 2015, 00:11

04 May 2015, 00:34

I got similar issues with Primefaces 5.2:

1. The calendar input component loses style during ajax request. I was not able to apply any workaround for this e.g. using enhanceWithin() method of JQuery mobile. Any hints?

2. The calendar datepicker takes z-index from the calendar input component. As this is by default 1 a mobile selectOneRadio component which has a z-index of 2 by default would shine through the datepicker.

Btw, I found two more issues requiring workarounds during the migration from Primefaces Mobile 0.9X to PF 5.2:

- The clear button of inputText cannot be disabled by param - at least in Firefox the clear buttons get included into the tab field order what results in poor usability

- The pm:inputSlider lacks ajax functionality (client behavior) which requires HTML5 workarounds

To be able to reproduce all mentioned issues a working ajax form example in the mobile showcase would help a lot.

Cheers,

Miguelz

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: Google [Bot] and 27 guests