aspose file tools*
The moose likes JSF and the fly likes How do javascript refer to Jsf input field ID Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Spring in Action this week in the Spring forum!
JavaRanch » Java Forums » Java » JSF
Bookmark "How do javascript refer to Jsf input field ID" Watch "How do javascript refer to Jsf input field ID" New topic
Author

How do javascript refer to Jsf input field ID

Henk Maritz
Greenhorn

Joined: Aug 03, 2008
Posts: 3
Hi

I have a JSF page and want to launch a java script (calendar pick date popup) from it.
The java script pass in the HTML input ID (inputText0) of the input field to populate (result from date pick).

But, I do not know the HTML input ID since JSF generate an ID (_id2:inputText0).

Here is the JSF code:

<h:form>
<script type="text/javascript">
var calDFrom = new CalendarPopup("testdiv1");
calDFrom.showNavigationDropdowns();
</script>

<h:panelGrid columns="2">
<h:panelGroup>
<hutputLabel id="outputLabel0" value="#{msg.repInFromDate}" for="inputText0" styleClass="fieldOutputHeaderLabel"/>
</h:panelGroup>
<h:panelGroup>
<h:inputText id="inputText0" value="#{sessionActionListener.depotSales.fromDate}" required="true">
<f:validator validatorId="dateValidator"/>
</h:inputText>
<h:graphicImage onklick="calDFrom.select(document.forms[0].inputText0,'anchorCalDFrom','yyyy-MM-dd'); return false;" title="calDFrom.select(document.forms[0].inputText0,'anchorCalDFrom','yyyy-MM-dd'); return false;" id="anchorCalDFrom" alt="jsf-sun" url="/images/calendar.gif" />
</h:panelGroup>
</h:panelGrid>
</h:form>

Here is an extract of the HTML rendederd by JSF:

<tr class="detailDataTableRow">
<td class="detailDataTableColumn"><label id="_id2utputLabel0" for="_id2:inputText0" class="fieldOutputHeaderLabel">
From Date</label></td>
<td class="detailDataTableColumn"><input id="_id2:inputText0" type="text" name="_id2:inputText0" class="fieldInputDetailText" /><img id="_id2:anchorCalDFrom" src="/OrderSystem-ViewController-context-root/images/calendar.gif" alt="jsf-sun" onklick="calDFrom.select(document.forms[0].inputText0,'anchorCalDFrom','yyyy-MM-dd'); return false;" title="calDFrom.select(document.forms[0].inputText0,'anchorCalDFrom','yyyy-MM-dd'); return false;" /></td>
</tr>

How do I solve this problem?

Henkie
R Ben Parsons
Greenhorn

Joined: Aug 05, 2008
Posts: 9
Henkie,

Apologies if you've already considered this, but you may be making life difficult for yourself. Why not use one of the JSF Date Picker controls, such as Tomahawk InputDate/Input Calendar or RichFaces Calendar?

Ben.


R. Ben Parsons<br />SCJA
Jerwin Louise Uy
Ranch Hand

Joined: Oct 27, 2007
Posts: 75
Two possible solutions that I can think of:
1. Declare the id's of the form and the component during compile time, i.e. assign an id for the form and component and embed the expected id in the js function.

Cons - Not scalable when you have multiple components using the same jsfunction

2. Implement a custom component that will dynamically embed the jsfunction during the render phase because you can get the formId and the componentId in the FacesContext instance

I hope this helps your problem.


Uy Jerwin Louise Vergara
Junior Developer / Research and Development at Incuventure Partners Corporation
email: jerwin.uy@incuventure.net
Henk Maritz
Greenhorn

Joined: Aug 03, 2008
Posts: 3
Thanks for the response.
I'll try the RichFaces first. It looks very good.
Henk Maritz
Greenhorn

Joined: Aug 03, 2008
Posts: 3
I have assigned an unique ID to the h:form and use document.getElementById() in JS.
It works well.
Siva Meka
Greenhorn

Joined: Aug 11, 2008
Posts: 6

Hi,

I have a similar requirement , can this requirement be achieved only with generic facets?
could you please let me know how you have achieved this requirement?

Thanks a ton in advance.

~Siva(ji)


OCJP1.6, OCA 9i , IBM SOA Certified
Jerwin Louise Uy
Ranch Hand

Joined: Oct 27, 2007
Posts: 75
I don't quite understand your question. ~_~

If you need to know the client id of a certain component during runtime, then I am afraid that feat is left to the NamingContainer of JSF.

Of course, you can tell the NamingContainer not to assign a unique identifier to your components if the id attribute has a value. Note that having two components reference the same id will cause your page not to function. (If I can remember, it will throw an error telling you that it found a Duplicate id in the UIViewRoot)

My another suggestion is to create your own custom component so that you can programatically get the client id at runtime as well as write the javascript function with your component. This way, you don't have to assign static id for each of your component.

Regards.
 
It is sorta covered in the JavaRanch Style Guide.
 
subject: How do javascript refer to Jsf input field ID