inputMask not working in PrimeFaces mobile 0.9.4

UI Components for JSF
fynn
Posts: 5
Joined: 21 Apr 2013, 12:14

02 May 2013, 21:54

Hi,

I updated my application because of viewtopic.php?f=8&t=29884. But now I see that the inputMask isn't working anymore.
This is the result I exspect and got with PrimeFaces mobile 0.9.3:
Image
And here's my result with PrimeFaces mobile 0.9.4:
Image
I also get an Javascript-error in Firebug

Code: Select all

TypeError: $(...).attr(...) is undefined
Here's my test.xhtml

Code: Select all

<f:view xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pm="http://primefaces.org/mobile" contentType="text/html"
	renderKitId="PRIMEFACES_MOBILE">
	<pm:page title="Test">
		<pm:view id="main">
			<h:form>
				<pm:header>
					<f:facet name="left">
						<p:button value="Back" icon="back" href="#main?reverse=true" />
					</f:facet>
					<h1>
						<h:outputText id="header" value="Test" />
					</h1>
				</pm:header>
				<pm:content>
					<p:inputMask mask="99/99/9999" />
				</pm:content>
			</h:form>
		</pm:view>
	</pm:page>
</f:view>
Thanks in advance
Fynn

P.S.: Thank you for your really fast help at my last problem.

lazaronixon
Posts: 172
Joined: 05 Jan 2011, 22:02

03 May 2013, 00:06

On really .. was made changes on p:inputMask of PrimeFaces Core and this new implementation was generated methods with same name of PrimeFaces Core.
Last edited by lazaronixon on 03 May 2013, 00:51, edited 1 time in total.

lazaronixon
Posts: 172
Joined: 05 Jan 2011, 22:02

03 May 2013, 00:48

Workaround:
<pm:page title="mobile">
<h:outputScript name="/primefaces.js" library="primefaces" />
<script type="text/javascript" src="/showcaseMobile/inputMask.js"/>


<pm:view>
<pm:content>
</pm:content>
</pm:view>
</pm:page>

inputMask.js

Code: Select all

/*
	Masked Input plugin for jQuery
	Copyright (c) 2007-2011 Josh Bush (digitalbush.com)
	Licensed under the MIT license (http://digitalbush.com/projects/masked-input-plugin/#license) 
	Version: 1.3
*/
(function($) {
	var pasteEventName = ($.browser.msie ? 'paste' : 'input') + ".mask";
	var iPhone = (window.orientation != undefined);

	$.mask = {
		//Predefined character definitions
		definitions: {
			'9': "[0-9]",
			'a': "[A-Za-z]",
			'*': "[A-Za-z0-9]"
		},
		dataName:"rawMaskFn"
	};

	$.fn.extend({
		//Helper Function for Caret positioning
		caret: function(begin, end) {
			if (this.length == 0) return;
			if (typeof begin == 'number') {
				end = (typeof end == 'number') ? end : begin;
				return this.each(function() {
					if (this.setSelectionRange) {
						this.setSelectionRange(begin, end);
					} else if (this.createTextRange) {
						var range = this.createTextRange();
						range.collapse(true);
						range.moveEnd('character', end);
						range.moveStart('character', begin);
						range.select();
					}
				});
			} else {
				if (this[0].setSelectionRange) {
					begin = this[0].selectionStart;
					end = this[0].selectionEnd;
				} else if (document.selection && document.selection.createRange) {
					var range = document.selection.createRange();
					begin = 0 - range.duplicate().moveStart('character', -100000);
					end = begin + range.text.length;
				}
				return { begin: begin, end: end };
			}
		},
		unmask: function() { return this.trigger("unmask"); },
		mask: function(mask, settings) {
			if (!mask && this.length > 0) {
				var input = $(this[0]);
				return input.data($.mask.dataName)();
			}
			settings = $.extend({
				placeholder: "_",
				completed: null
			}, settings);

			var defs = $.mask.definitions;
			var tests = [];
			var partialPosition = mask.length;
			var firstNonMaskPos = null;
			var len = mask.length;

			$.each(mask.split(""), function(i, c) {
				if (c == '?') {
					len--;
					partialPosition = i;
				} else if (defs[c]) {
					tests.push(new RegExp(defs[c]));
					if(firstNonMaskPos==null)
						firstNonMaskPos =  tests.length - 1;
				} else {
					tests.push(null);
				}
			});

			return this.trigger("unmask").each(function() {
				var input = $(this);
				var buffer = $.map(mask.split(""), function(c, i) { if (c != '?') return defs[c] ? settings.placeholder : c });
				var focusText = input.val();

				function seekNext(pos) {
					while (++pos <= len && !tests[pos]);
					return pos;
				};
				function seekPrev(pos) {
					while (--pos >= 0 && !tests[pos]);
					return pos;
				};

				function shiftL(begin,end) {
					if(begin<0)
					   return;
					for (var i = begin,j = seekNext(end); i < len; i++) {
						if (tests[i]) {
							if (j < len && tests[i].test(buffer[j])) {
								buffer[i] = buffer[j];
								buffer[j] = settings.placeholder;
							} else
								break;
							j = seekNext(j);
						}
					}
					writeBuffer();
					input.caret(Math.max(firstNonMaskPos, begin));
				};

				function shiftR(pos) {
					for (var i = pos, c = settings.placeholder; i < len; i++) {
						if (tests[i]) {
							var j = seekNext(i);
							var t = buffer[i];
							buffer[i] = c;
							if (j < len && tests[j].test(t))
								c = t;
							else
								break;
						}
					}
				};

				function keydownEvent(e) {
					var k=e.which;

					//backspace, delete, and escape get special treatment
					if(k == 8 || k == 46 || (iPhone && k == 127)){
						var pos = input.caret(),
							begin = pos.begin,
							end = pos.end;
						
						if(end-begin==0){
							begin=k!=46?seekPrev(begin):(end=seekNext(begin-1));
							end=k==46?seekNext(end):end;
						}
						clearBuffer(begin, end);
						shiftL(begin,end-1);

						return false;
					} else if (k == 27) {//escape
						input.val(focusText);
						input.caret(0, checkVal());
						return false;
					}
				};

				function keypressEvent(e) {
					var k = e.which,
						pos = input.caret();
					if (e.ctrlKey || e.altKey || e.metaKey || k<32) {//Ignore
						return true;
					} else if (k) {
						if(pos.end-pos.begin!=0){
							clearBuffer(pos.begin, pos.end);
							shiftL(pos.begin, pos.end-1);
						}

						var p = seekNext(pos.begin - 1);
						if (p < len) {
							var c = String.fromCharCode(k);
							if (tests[p].test(c)) {
								shiftR(p);
								buffer[p] = c;
								writeBuffer();
								var next = seekNext(p);
								input.caret(next);
								if (settings.completed && next >= len)
									settings.completed.call(input);
							}
						}
						return false;
					}
				};

				function clearBuffer(start, end) {
					for (var i = start; i < end && i < len; i++) {
						if (tests[i])
							buffer[i] = settings.placeholder;
					}
				};

				function writeBuffer() { return input.val(buffer.join('')).val(); };

				function checkVal(allow) {
					//try to place characters where they belong
					var test = input.val();
					var lastMatch = -1;
					for (var i = 0, pos = 0; i < len; i++) {
						if (tests[i]) {
							buffer[i] = settings.placeholder;
							while (pos++ < test.length) {
								var c = test.charAt(pos - 1);
								if (tests[i].test(c)) {
									buffer[i] = c;
									lastMatch = i;
									break;
								}
							}
							if (pos > test.length)
								break;
						} else if (buffer[i] == test.charAt(pos) && i!=partialPosition) {
							pos++;
							lastMatch = i;
						}
					}
					if (!allow && lastMatch + 1 < partialPosition) {
						input.val("");
						clearBuffer(0, len);
					} else if (allow || lastMatch + 1 >= partialPosition) {
						writeBuffer();
						if (!allow) input.val(input.val().substring(0, lastMatch + 1));
					}
					return (partialPosition ? i : firstNonMaskPos);
				};

				input.data($.mask.dataName,function(){
					return $.map(buffer, function(c, i) {
						return tests[i]&&c!=settings.placeholder ? c : null;
					}).join('');
				})

				if (!input.attr("readonly"))
					input
					.one("unmask", function() {
						input
							.unbind(".mask")
							.removeData($.mask.dataName);
					})
					.bind("focus.mask", function() {
						focusText = input.val();
						var pos = checkVal();
						writeBuffer();
						var moveCaret=function(){
							if (pos == mask.length)
								input.caret(0, pos);
							else
								input.caret(pos);
						};
						($.browser.msie ? moveCaret:function(){setTimeout(moveCaret,0)})();
					})
					.bind("blur.mask", function() {
						checkVal();
						if (input.val() != focusText)
							input.change();
					})
					.bind("keydown.mask", keydownEvent)
					.bind("keypress.mask", keypressEvent)
					.bind(pasteEventName, function() {
						setTimeout(function() { input.caret(checkVal(true)); }, 0);
					});

				checkVal(); //Perform initial check for existing values
			});
		}
	});
})(jQuery); 

LRB_Brasil
Posts: 6
Joined: 20 Jul 2013, 21:40

12 Aug 2013, 02:28

good night ... I tried to use the script provided by lazaronixon insert next to my project, however it did not work ...



Could someone help

code used:

Code: Select all

<f:view xmlns:f="http://java.sun.com/jsf/core"
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:p="http://primefaces.org/ui"
   xmlns:pm="http://primefaces.org/mobile" contentType="text/html"
   renderKitId="PRIMEFACES_MOBILE">
   <pm:page title="Test">
   <h:outputScript name="/primefaces.js" library="primefaces" /> 
        <script type="text/javascript" src="/js/inputMask.js"/>
      <pm:view id="main">
         <h:form>
            <pm:header>
               <f:facet name="left">
                  <p:button value="Back" icon="back" href="#main?reverse=true" />
               </f:facet>
               <h1>
                  <h:outputText id="header" value="Test" />
               </h1>
            </pm:header>
            <pm:content>
               <p:inputMask mask="99/99/9999" />
            </pm:content>
         </h:form>
      </pm:view>
   </pm:page>
</f:view>

LRB_Brasil
Posts: 6
Joined: 20 Jul 2013, 21:40

12 Aug 2013, 21:10

LRB_Brasil wrote:good night ... I tried to use the script provided by lazaronixon insert next to my project, however it did not work ...



Could someone help

code used:

Code: Select all

<f:view xmlns:f="http://java.sun.com/jsf/core"
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:p="http://primefaces.org/ui"
   xmlns:pm="http://primefaces.org/mobile" contentType="text/html"
   renderKitId="PRIMEFACES_MOBILE">
   <pm:page title="Test">
   <h:outputScript name="/primefaces.js" library="primefaces" /> 
        <script type="text/javascript" src="/js/inputMask.js"/>
      <pm:view id="main">
         <h:form>
            <pm:header>
               <f:facet name="left">
                  <p:button value="Back" icon="back" href="#main?reverse=true" />
               </f:facet>
               <h1>
                  <h:outputText id="header" value="Test" />
               </h1>
            </pm:header>
            <pm:content>
               <p:inputMask mask="99/99/9999" />
            </pm:content>
         </h:form>
      </pm:view>
   </pm:page>
</f:view>

Good afternoon
can someone help

stopped this problem

I created a file JavaScrip put the project however does not work

please help

srbala
Posts: 139
Joined: 02 May 2010, 01:06

14 Aug 2013, 13:39

This could be path issue of your java script include.

Try change from

Code: Select all

 <script type="text/javascript" src="/js/inputMask.js"/>
to

Code: Select all

 <script type="text/javascript" src="./js/inputMask.js"/>
First one takes the path http://servername:port/js/inputMask.js
Fix gives the path as http://servername:port/warname/js/inputMask.js, where war name is your application context path.

LRB_Brasil
Posts: 6
Joined: 20 Jul 2013, 21:40

14 Aug 2013, 16:53

Good afternoon srbala

even with the suggested change did not work.

on the script created a folder in my WebContent (resources / js / inputMask.js)

the jar used are:
Primefaces 3.5
PrimeFaces Mobile 0.9.5-
jsf-api
jsf-impl

not of any kind of error, but also does not appear to mask.

if you can help me I would appreciate.

LRB_Brasil
Posts: 6
Joined: 20 Jul 2013, 21:40

17 Aug 2013, 19:07

LRB_Brasil wrote:Good afternoon srbala

even with the suggested change did not work.

on the script created a folder in my WebContent (resources / js / inputMask.js)

the jar used are:
Primefaces 3.5
PrimeFaces Mobile 0.9.5-
jsf-api
jsf-impl

not of any kind of error, but also does not appear to mask.

if you can help me I would appreciate.

nobody?

User avatar
lauksas
Posts: 4
Joined: 20 Feb 2012, 18:02
Location: Brazil

17 Mar 2014, 16:51

Maybe a little late, but I ha the same issue and managed to get it working applying the mask using the plugin directly a workaround. Se below:

On the XHTML page lement:

Code: Select all

<p:inputText id="telephone"
						label="telephone"
						value="#{bean.telefone}" />
On the page Header:

Code: Select all

$(document).ready(function(){
				$('input[id*="telephone_input"').mask('(99) 99999-9999');
				});
PS: used this selector because JSF changes the id of the element.

I hope that helps.
--
No one is too smart that can't learn and no one is too dumb that can't teach.

jhon17066
Posts: 1
Joined: 26 Feb 2015, 07:12

26 Feb 2015, 07:29

Which mobile is best for the children :arrow: :arrow: :arrow:

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 31 guests