UIAjax update vs. required="true"

davidfrahm · 04 Mar 2010, 23:29

I have a form with three fields: A text input and two drop-downs. When the first drop-down is selected, the values in the second drop-down are populated.

This all works great except when the text input field uses required="true" and is empty. So I figure its got something to do with that text input field validation failing, but surely there's a way around this? I read the documentation a hundred times.

Here's my page code. Sorry if this is something that should be obvious.

Code: Select all

<h:panelGrid id="masterItemPanel1Grid1" columns="2">
	<h:outputLabel for="color" value="#{localMessages['MasterItem.Field.Color']}:" />
	<h:inputText id="color" value="#{masterItemBean.selectedMasterItem.color}" label="#{localMessages['MasterItem.Field.Color']}"
		size="12" maxlength="10" required="true" />
	
	<h:outputLabel for="selectedCategoryCode" value="#{localMessages['MasterItem.Field.Category']}:" />
	<h:selectOneListbox id="selectedCategoryCode" size="1" value="#{masterItemBean.selectedCategoryCode}" >
		<f:selectItems id="categorySelectItems" value="#{masterItemBean.categoryMap}" />
		<p:ajax actionListener="#{masterItemBean.populateSubcategoryChoices}" event="change" update="selectedSubcategoryCode" />
	</h:selectOneListbox>
	<h:outputLabel for="selectedSubcategoryCode" value="#{localMessages['MasterItem.Field.Subcategory']}:" />
	<h:selectOneListbox id="selectedSubcategoryCode" size="1" value="#{masterItemBean.selectedSubcategoryCode}" >
		<f:selectItems id="subcategorySelectItems" value="#{masterItemBean.subcategoryMap}" />
	</h:selectOneListbox>
</h:panelGrid>

Here's my environment:
PrimeFaces v1.0.0
MyFaces v1.2.6
IBM WebSphere Application Server Community Edition v2.1.1.3

05 Mar 2010, 13:43

Hi,

You need to set process="@this" on p:ajax. So that input text will not be processed.

I even have this example in my PrimeFaces presentations as it is a common use case.

davidfrahm · 08 Mar 2010, 00:55

I tried that (adding process="@this") and now it doesn't run the actionListener no matter if the required field has a value or not.

Code: Select all

<h:form id="masterItemForm">
	<p:panel header="#{localMessages['MasterItem.Panel.1']}">
		<h:panelGrid columns="2">
			<h:outputLabel for="color" value="#{localMessages['MasterItem.Field.Color']}:" />
			<h:inputText id="color" value="#{masterItemBean.selectedMasterItem.color}" label="#{localMessages['MasterItem.Field.Color']}"
				size="12" maxlength="10" required="true" />
			<h:outputLabel for="selectedCategoryCode" value="#{localMessages['MasterItem.Field.Category']}:" />
			<h:selectOneListbox id="selectedCategoryCode" size="1" value="#{masterItemBean.selectedCategoryCode}" >
				<f:selectItems id="categorySelectItems" value="#{masterItemBean.categoryMap}" />
				<p:ajax actionListener="#{masterItemBean.populateSubcategoryChoices}" event="change" update="selectedSubcategoryCode"
					process="@this" />
			</h:selectOneListbox>
			<h:outputLabel for="selectedSubcategoryCode" value="#{localMessages['MasterItem.Field.Subcategory']}:" />
			<h:selectOneListbox id="selectedSubcategoryCode" size="1" value="#{masterItemBean.selectedSubcategoryCode}" >
				<f:selectItems id="subcategorySelectItems" value="#{masterItemBean.subcategoryMap}" />
			</h:selectOneListbox>
		</h:panelGrid>
	</p:panel>
</h:form>

There are no JavaScript errors reports by Firefox error console.

Could it be something else on my page? I have simplified things some, maybe I should try a page with nothing but these three fields?

08 Mar 2010, 02:17

Yes, please try with a simpler page and lets discuss further if the issue persists.

davidfrahm · 08 Mar 2010, 05:44

I created a new, simple test page. Same results.

When I use the process="@this" attribute on the <p:ajax> component, nothing happens when the first drop-down is changed. So not only does it not fix my issue, it is preventing the ajax update from working at all.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui">
	<f:view>
		<head>
			<p:resources />
			<title>Test p:ajax - 21:37</title>
		</head>
		<body>
			<h:form>
				<h:outputLabel for="color" value="#{localMessages['MasterItem.Field.Color']}:" />
				<h:inputText id="color" value="#{masterItemBean.selectedMasterItem.color}" label="#{localMessages['MasterItem.Field.Color']}"
					size="12" maxlength="10" required="true" />
				<h:outputLabel for="selectedCategoryCode" value="#{localMessages['MasterItem.Field.Category']}:" />
				<h:selectOneListbox id="selectedCategoryCode" size="1" value="#{masterItemBean.selectedCategoryCode}" >
					<f:selectItems id="categorySelectItems" value="#{masterItemBean.categoryMap}" />
					<p:ajax actionListener="#{masterItemBean.populateSubcategoryChoices}" event="change" update="selectedSubcategoryCode"
						process="@this" />
				</h:selectOneListbox>
				<h:outputLabel for="selectedSubcategoryCode" value="#{localMessages['MasterItem.Field.Subcategory']}:" />
				<h:selectOneListbox id="selectedSubcategoryCode" size="1" value="#{masterItemBean.selectedSubcategoryCode}" >
					<f:selectItems id="subcategorySelectItems" value="#{masterItemBean.subcategoryMap}" />
				</h:selectOneListbox>
			</h:form>
		</body>
	</f:view>
</html>

davidfrahm · 08 Mar 2010, 05:55

Just to clarify... Something does happen on the "change" event. The first time I use the first drop-down, I get the following in my server console:

Code: Select all

2010-03-07 21:39:58,927 WARN  [UIComponentBase] WARNING: Component j_id0 just got an automatic id, because there was no id assigned yet. If this component was created dynamically (i.e. not by a JSP tag) you should assign it an explicit static id or assign it the id you get from the createUniqueId from the current UIViewRoot component right after creation! Path to Component: {Component-Path : [Class: javax.faces.component.UIViewRoot,ViewId: /test-pajax.xhtml]}

I thought nothing was happening (being sent to the server) because it never calls my actionListener method, but obviously the javascript onchange event IS doing something.

08 Mar 2010, 17:29

Ok, let me try to replicate issue and I'll update this post today.

davidfrahm · 10 Mar 2010, 17:32

Just a thought... Maybe you could add a <h:inputText required="true"> to the Component Showcase, on the AJAX Engine - Select Components page. Specifically for the Double Combo example would be useful, IMHO.

Thanks again for checking into this issue.

davidfrahm · 18 Mar 2010, 14:49

Any updates on this?

I agree that it is a common use case, so is it just not working for me?

I have tried testing this in new, simple projects and no luck.

G-rom · 18 Mar 2010, 15:17

just let you know I have same issue with p:ajax, without required="true", and I'm not the one. Hope a patch is coming :/

UIAjax update vs. required="true"

Who is online