2 Replies Latest reply on Oct 19, 2007 12:24 PM by Michael Griffith

    Form Element ID changed

    Michael Griffith Newbie

      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