p:inputText does not work correct in composite component

UI Components for JSF
Post Reply
mario_
Posts: 36
Joined: 17 Feb 2011, 12:49

17 Feb 2011, 13:06

Hi,

i have this composite component:

Code: Select all

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:output="http://java.sun.com/jsf/composite/components/simple/output"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:composite="http://java.sun.com/jsf/composite">

<!-- INTERFACE -->
<composite:interface>
	<composite:attribute name="value" required="true" />
	<composite:attribute name="label" required="true" />
	<composite:attribute name="update" required="false" />
	<composite:attribute name="size" required="false" default="30"/>
	<composite:attribute name="maxlength" required="false" default="100"/>
	<composite:attribute name="required" required="false" default="false"/>
	<composite:attribute name="space" required="false" default="20"/>
</composite:interface>

<!-- IMPLEMENTATION -->
<composite:implementation>
	<div id="#{cc.clientId}">
		<output:label value="#{cc.attrs.label}"  for="text"/>
		<p:spacer width="#{cc.attrs.space}"/>
		<h:inputText id="text" value="#{cc.attrs.value}" required="#{cc.attrs.required}" label="#{cc.attrs.label}"
			size="#{cc.attrs.size}" maxlength="#{cc.attrs.maxlength}">
			<p:ajax event="blur" update="#{cc.attrs.update}"/>
		</h:inputText>
	</div>
</composite:implementation>
</html>
when I change the h:inputText to p:inputText the ajax event blur or the update is not performed anymore.

This means growl is not updated anymore when the field is empty and the field is left:

Code: Select all

<input:labelText value="#{testBean.text}" label="Label" maxlength="50" required="true" update="messages"/>
<p:growl id="messages"  showDetail="true" />
greetz
Top
jaideralba
Posts: 51
Joined: 06 Sep 2010, 23:01
Location: São Paulo - Brazil

17 Feb 2011, 15:36

i guess you will need to give an id to your component and the update will look like this:

update=":formId:componentId:messages"

or try to use update="@form" if it's possible.
Mojarra 2.0.2 (FCS b10)
GlassFish 3.0.1
PrimeFaces 2.2.1
Top
mario_
Posts: 36
Joined: 17 Feb 2011, 12:49

17 Feb 2011, 18:45

Thanks for the answer!

I used prependId="false", so update="messages" should be do this.
I also tried your suggestion update="@form", but it does not work.

With h:inputText it works. p:inputText does not work!

For style reasons I want to change to the primefaces tag. The way things are going p:inputText is buggy, so i let h:inputText....
Top
jaideralba
Posts: 51
Joined: 06 Sep 2010, 23:01
Location: São Paulo - Brazil

17 Feb 2011, 19:04

Oh, i see.

It's wierd the "@form" didn't work, since the components are in the same form. Have you tried @all? :?

Well, generally the update it's only the ID of the HTML rendered. So, try to inspectate the HTML objetc to see it's real id.
I suggest the Firebug. It's a Firefox component wich has a "on click inspector", that you can only click in the object to obtain all it's information.

Even with the prependId="false", the component has an Id. You must declare an id for the component, or it will assume something like "j_idt99", so this way the id of the messages would be "j_idt99:messages"

try <component:mycomponent id="myComp" ... /> , so the messages' id would be "myComp:messages". After that, try update=":myComp:messages" ou update="myComp:messages"... (I don't remember if must have the : first)

Glad to help.
Mojarra 2.0.2 (FCS b10)
GlassFish 3.0.1
PrimeFaces 2.2.1
Top
mario_
Posts: 36
Joined: 17 Feb 2011, 12:49

21 Feb 2011, 11:01

Hi,

I think it's a bug. I tried different variants:

Code: Select all

<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.prime.com.tr/ui"
	xmlns:input="http://java.sun.com/jsf/composite/components/simple/input"
	>
	<h:head/>
	<h:body>
	<h:form id="testForm">

	<h:panelGrid>
		<h:inputText id="text1" value="#{testBean.testString}" required="true">
			<p:ajax event="blur" update="testForm:messages"/>
		</h:inputText>

		<p:inputText id="text2" value="#{testBean.testString}" required="true">
			<p:ajax event="blur" update="testForm:messages"/>
		</p:inputText>

		<input:labelText value="#{testBean.testString}" label="test3" maxlength="50"
					required="true" update="testForm:messages"/>
		<input:labelText2 value="#{testBean.testString}" label="test4" maxlength="50"
					required="true" update="testForm:messages"/>
		
	</h:panelGrid>
		<p:growl id="messages"  showDetail="true" />
	
	</h:form>	
	</h:body>
	
</html>
where the components are
labelText:

Code: Select all

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:output="http://java.sun.com/jsf/composite/components/simple/output"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:composite="http://java.sun.com/jsf/composite">

<!-- INTERFACE -->
<composite:interface>
	<composite:attribute name="value" required="true" />
	<composite:attribute name="label" required="true" />
	<composite:attribute name="update" required="false" />
	<composite:attribute name="size" required="false" default="30"/>
	<composite:attribute name="maxlength" required="false" default="100"/>
	<composite:attribute name="required" required="false" default="false"/>
	<composite:attribute name="space" required="false" default="20"/>
</composite:interface>

<!-- IMPLEMENTATION -->
<composite:implementation>
	<div id="#{cc.clientId}">
		<output:label value="#{cc.attrs.label}"  for="text"/>
		<p:spacer width="#{cc.attrs.space}"/>
		<h:inputText id="text" value="#{cc.attrs.value}" required="#{cc.attrs.required}" label="#{cc.attrs.label}"
			size="#{cc.attrs.size}" maxlength="#{cc.attrs.maxlength}" class="ui-inputfield ui-widget ui-state-default ui-corner-all">
			<p:ajax event="blur" update="#{cc.attrs.update}"/>
		</h:inputText>
	</div>
</composite:implementation>
</html>
labelText2:

Code: Select all

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:output="http://java.sun.com/jsf/composite/components/simple/output"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:composite="http://java.sun.com/jsf/composite">

<!-- INTERFACE -->
<composite:interface>
	<composite:attribute name="value" required="true" />
	<composite:attribute name="label" required="true" />
	<composite:attribute name="update" required="false" />
	<composite:attribute name="size" required="false" default="30"/>
	<composite:attribute name="maxlength" required="false" default="100"/>
	<composite:attribute name="required" required="false" default="false"/>
	<composite:attribute name="space" required="false" default="20"/>
</composite:interface>

<!-- IMPLEMENTATION -->
<composite:implementation>
		<output:label value="#{cc.attrs.label}"  for="text"/>
		<p:spacer width="#{cc.attrs.space}"/>
		<p:inputText id="text" value="#{cc.attrs.value}" required="#{cc.attrs.required}" label="#{cc.attrs.label}"
			size="#{cc.attrs.size}" maxlength="#{cc.attrs.maxlength}">
			<p:ajax event="blur" update="#{cc.attrs.update}"/>
		</p:inputText>
</composite:implementation>
</html>

For the first 3 input fields the error message is displayed after blur, only the 4th isn't working:

the html code:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form id="testForm" name="testForm" method="post"
	action="/portal/test.jsf" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="testForm" value="testForm" />
<table>
	<tbody>
		<tr>
			<td><input id="testForm:text1" type="text" name="testForm:text1"
				onblur="PrimeFaces.ajax.AjaxRequest('/portal/test.jsf',{formId:'testForm',async:false,global:true,source:this,process:'testForm:text1',update:'testForm:messages',event:'blur'});" /></td>
		</tr>
		<tr>
			<td><input id="testForm:text2" name="testForm:text2" type="text"
				value=""
				class="ui-inputfield ui-widget ui-state-default ui-corner-all" /><script
				type="text/javascript">widget_testForm_text2 = new PrimeFaces.widget.InputText({id:'testForm:text2',behaviors:{blur:[function(event){PrimeFaces.ajax.AjaxRequest('/portal/test.jsf',{formId:'testForm',async:false,global:true,source:this,process:'testForm:text2',update:'testForm:messages',event:'blur'});;}]}});</script></td>
		</tr>
		<tr>
			<td>
			<div id="testForm:j_idt5"><label for="testForm:j_idt5:text">
			test3:</label><img id="testForm:j_idt5:j_idt9" width="20"
				src="/javax.faces.resource/spacer/dot_clear.gif.jsf?ln=primefaces&amp;v=2.2.1" /><input
				id="testForm:j_idt5:text" type="text" name="testForm:j_idt5:text"
				class="ui-inputfield ui-widget ui-state-default ui-corner-all"
				maxlength="50" size="30"
				onblur="PrimeFaces.ajax.AjaxRequest('/portal/test.jsf',{formId:'testForm',async:false,global:true,source:this,process:'testForm:j_idt5:text',update:'testForm:messages',event:'blur'});" />
			</div>
			</td>
		</tr>
		<tr>
			<td><label for="testForm:j_idt11:text"> test4:</label><img
				id="testForm:j_idt11:j_idt13" width="20"
				src="/javax.faces.resource/spacer/dot_clear.gif.jsf?ln=primefaces&amp;v=2.2.1" /><input
				id="testForm:j_idt11:text" name="testForm:j_idt11:text" type="text"
				value="" maxlength="50" size="30"
				class="ui-inputfield ui-widget ui-state-default ui-corner-all" /><script
				type="text/javascript">widget_testForm_j_idt11_text = new PrimeFaces.widget.InputText({id:'testForm:j_idt11:text',behaviors:{blur:[function(event){PrimeFaces.ajax.AjaxRequest('/portal/test.jsf',{formId:'testForm',async:false,global:true,source:this,process:'testForm:j_idt11:text',update:'testForm:messages',event:'blur'});;}]}});</script></td>
		</tr>
	</tbody>
</table>
<span id="testForm:messages"></span><script type="text/javascript">jQuery(function(){});</script><input
	type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState"
	value="-9174702098449753800:4199064490108425497" autocomplete="off" />
</form>
</body>
</html>
I cannot see any different (except the generated names) between input 2 and 4. Both are p:inputText Fields. The only difference is that the 4th is a composite componenet.
Top
mario_
Posts: 36
Joined: 17 Feb 2011, 12:49

24 Feb 2011, 09:44

can anybody confirm this?
Top
Post Reply

Return to “PrimeFaces”

  • Information

  • Who is online

    Users browsing this forum: No registered users and 43 guests