How do javascript refer to Jsf input field ID

[Henk Maritz]

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>
<h:outputLabel 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="_id2:outputLabel0" 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]

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.

[Jerwin Louise Uy]

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.

[Henk Maritz]

Thanks for the response.
I'll try the RichFaces first. It looks very good.

[Henk Maritz]

I have assigned an unique ID to the h:form and use document.getElementById() in JS.
It works well.

[Siva Meka]

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)

[Jerwin Louise Uy]

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.