Form Element ID changed
griffitm Oct 19, 2007 11:04 AMHello All,
Using Seam 2.0.0CR1, I have a form where I want to change the value of a <rich:calendar/> element based on the selection of a DDLB. It seems overkill to use Ajax, and to make a round trip to the server in order to change the value of an HTML input -- so I wrote a simple JS function to change the value:
First the JSF Source:
<rich:simpleTogglePanel label="Deliverable Date Search" switchType="ajax">
<s:decorate template="layout/display.xhtml">
<ui:define name="label">Select Period:</ui:define>
<h:selectOneMenu id="period" onchange="setPeriod(this.value);">
<f:selectItem itemLabel="Next 30 Days" itemValue="30"/>
<f:selectItem itemLabel="Next 60 Days" itemValue="60"/>
<f:selectItem itemLabel="Next 90 Days" itemValue="90"/>
<f:selectItem itemLabel="Next 120 Days" itemValue="120"/>
<f:selectItem itemLabel="Next 365 Days" itemValue="365"/>
</h:selectOneMenu>
</s:decorate>
<s:decorate template="layout/display.xhtml">
<ui:define name="label">From Due Date:</ui:define>
<rich:calendar id="fromDueDate" popup="true" enableManualInput="true"
value="#{deliverableSearch.fromDate}" pattern="MM/dd/yyyy"
event="onclick" reRender="completionDateDecoration" bypassUpdates="true"/>
</s:decorate>
<s:decorate template="layout/display.xhtml">
<ui:define name="label">To Due Date:</ui:define>
<rich:calendar id="toDueDate" popup="true" enableManualInput="true"
value="#{deliverableSearch.toDate}" pattern="MM/dd/yyyy"
event="onclick" reRender="completionDateDecoration" bypassUpdates="true"/>
</s:decorate>
</rich:simpleTogglePanel>
The JS Source:
<script type="text/javascript">
//<![CDATA[
function setPeriod(days){
var today= new Date();
var newDate= new Date(today.getTime() + days*24*60*60*1000);
var form= document.forms[0];
form.fromDueDate.value= today;
form.toDueDate.value= newDate;
form.submit();
return;
}
// ]]>
</script>The problem is that the JS code errors because the id's of the HTML form elements are mangled by RichFaces. How can I get the ID's of the elements as they appear in the cooked page in order to make this JS function work?
Thanks in advance,
MG