JSF messes up form component id

S

swe_dev1

Hello,

I am trying to get a JSF-form to call a javascript and passing a
component id as a variable, but somehow the variable remains undefined
when seen by the java script. I simply want to make a drop down menu
("county") to be automatically populated when a choice is made in
another drop down menu ("district") without reloading the page. My jsf
looks like this:

<html>
<head>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<script language="JavaScript" src="autopop.js"></script>
</head>
<body>
<f:view>
<h:form id="searchform1">
<h:selectOneMenu id="district"
onchange="menuSelect(this,document.forms.searchform1.county);">
<f:selectItem itemValue="aa" itemLabel="District 1"/>
<f:selectItem itemValue="ab" itemLabel="District 2"/>
<f:selectItem itemValue="ac" itemLabel="District 3"/>
<f:selectItem itemValue="ad" itemLabel="District 4"/>
</h:selectOneMenu>
<h:selectOneMenu id="county" styleClass="infield"></h:selectOneMenu>
</h:form>
</f:view>
</body>
<html>

As you can see, two variables are passed, "this", which works fine, and
"document.forms.searchform1.county" which gets a null value. When I do
this without JSF it all works fine, but JSF renames the component id:s
(it adds the form name and semicolon). Therefore I can't seem to
reference it properly...

What am I doing wrong? Is there another, more "JSF-ish" way to do this?


Any help is greatly appreciated!

/Erik
 
A

Andrea Desole

swe_dev1 said:
Hello,

I am trying to get a JSF-form to call a javascript and passing a
component id as a variable, but somehow the variable remains undefined
when seen by the java script. I simply want to make a drop down menu
("county") to be automatically populated when a choice is made in
another drop down menu ("district") without reloading the page. My jsf
looks like this:

<html>
<head>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<script language="JavaScript" src="autopop.js"></script>
</head>
<body>
<f:view>
<h:form id="searchform1">
<h:selectOneMenu id="district"
onchange="menuSelect(this,document.forms.searchform1.county);">
<f:selectItem itemValue="aa" itemLabel="District 1"/>
<f:selectItem itemValue="ab" itemLabel="District 2"/>
<f:selectItem itemValue="ac" itemLabel="District 3"/>
<f:selectItem itemValue="ad" itemLabel="District 4"/>
</h:selectOneMenu>
<h:selectOneMenu id="county" styleClass="infield"></h:selectOneMenu>
</h:form>
</f:view>
</body>
<html>

As you can see, two variables are passed, "this", which works fine, and
"document.forms.searchform1.county" which gets a null value. When I do
this without JSF it all works fine, but JSF renames the component id:s
(it adds the form name and semicolon). Therefore I can't seem to
reference it properly...

that's correct. That's how JSF does it. It follows the entire component
hierarchy down to your component, adding, for each component on the
path, the component name and a semicolon
What am I doing wrong? Is there another, more "JSF-ish" way to do this?

You can just change the id in your javascript call, using the convention
that JSF uses. What I'm not sure about is if the separator will always
be a semicolon.
A more JSF-ish way would probably be to make your own component, and
generate your script in the render phase. I'm not sure it's worth it
 
C

Chris Smith

Andrea Desole said:
You can just change the id in your javascript call, using the convention
that JSF uses. What I'm not sure about is if the separator will always
be a semicolon.

In fact, it will NEVER be the semicolon. I'm very confused that you and
Erik both seem to see the semicolon used, but that's not in accordance
with the JSF specification. Section 3.2.3 requires that this delimiter
be a colon, not a semicolon. Perhaps there's a major third-party JSF
implementation that I haven't tried which doesn't comply. MyFaces,
perhaps?

So the spec says you ought to be safe... but obviously your use of a
non-compliant JSF implementation negates that guarantee.

--
www.designacourse.com
The Easiest Way To Train Anyone... Anywhere.

Chris Smith - Lead Software Developer/Technical Trainer
MindIQ Corporation
 
A

Andrea Desole

Chris said:
In fact, it will NEVER be the semicolon. I'm very confused that you and
Erik both seem to see the semicolon used, but that's not in accordance
with the JSF specification. Section 3.2.3 requires that this delimiter
be a colon, not a semicolon. Perhaps there's a major third-party JSF
implementation that I haven't tried which doesn't comply. MyFaces,
perhaps?

sorry, my bad English :-(.
Yes, I meant colon. I assume Erik made the same mistake
 
S

swe_dev1

Chris & Andrea,

You are of course right, it is a colon and nothing else...

However, this still poses a problem since the reference

onchange="menuSelect(this,document.forms.searchform1:county);"

or any other reference with a colon gives an error, and a strange one
too: it says that ")" is missing. I simply assume that component
references can only be made with dot:s (.)

Any ideas?

/Erik







Andrea Desole skrev:
 
A

Andrea Desole

swe_dev1 said:
Chris & Andrea,

You are of course right, it is a colon and nothing else...

However, this still poses a problem since the reference

onchange="menuSelect(this,document.forms.searchform1:county);"

or any other reference with a colon gives an error, and a strange one
too: it says that ")" is missing. I simply assume that component
references can only be made with dot:s (.)

Any ideas?

I'm not a javascript expert, but you are probably doing something wrong.
Colons must work, otherwise JSF wouldn't be able to write its own scripts.
Also, looking at your javascript, I think you are directly referencing
the component, without referencing the form. Try

document.forms.searchform1.searchform1:county

or try to use the syntax that JSF uses for the command link:

document.forms['searchform1']['searchform1:county']

Or, even better, ask the javascript newsgroup :)
 
S

swe_dev1

Andrea,

The follwong worked:

document.forms['searchform1'].elements['searchform1:county']

Thanks for your help!

/Erik
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top