[jboss-user] [JBoss Seam] - Form Element ID changed

[griffitm]

Hello 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

View the original post : http://www.jboss.com/index.html?module=bb&op=viewtopic&p=4097022#4097022

Reply to the post : http://www.jboss.com/index.html?module=bb&op=posting&mode=reply&p=4097022