2 Replies Latest reply on Oct 14, 2008 6:04 AM by Val Sw

    using ajax javascript in seam

    Val Sw Expert
      Hi,

      I have a pair of dropdown list. A selection in the first box should affect list in the second box.

      I tried as per below xhtml file, but when I load the page it is blank with no error.

      Please suggest how this can be achieved in Seam framework, any sample ?

      Example scenario : Dropdown 1 contains list of states, on selecting any state corresponding cities should be populated in second dropdown (I can read the values from text file).

      <ui:define name="bodyScripts">
      <script type="text/javascript" src="seam/remoting/resource/remote.js">
              <!--
              // This space intentionally left blank
              //-->
        </script>
       
      <script type="text/javascript" src="request.js">
              <!--
              // This space intentionally left blank
              //-->
        </script>

      <script type="text/javascript">
      //<![CDATA[
              function handleOnChange(dd1)
              {
                var idx = dd1.selectedIndex;
                var val = dd1[idx].text;
                var par = document.forms["frmSelect"];
                var parelmts = par.elements;
                var citysel = parelmts["city"];
                var country = val;
                if (country != "Select country")
                {
                 var directory = ""+document.location;
                 directory = directory.substr(0, directory.lastIndexOf('/'));

                 Http.get({
                              url: "./" +  country + ".txt",
                              callback: fillcity,
                              cache: Http.Cache.Get
                      }, [citysel]);
                }
              }
              function fillcity(xmlreply, cityelmt)
              {
                if (xmlreply.status == Http.Status.OK)
                {
                 var cityresponse = xmlreply.responseText;
                 var cityar = cityresponse.split("|");
                 cityelmt.length = 1;
                 cityelmt.length = cityar.length;  
                 for (o=1; o < cityar.length; o++)
                 {
                       cityelmt[o].text = cityar[o];
                 }
                }
                else
                {
                 alert("Cannot handle the Ajax call.");
                }
              }
              // ]]>
      </script>
      </ui:define>
                                         
      <ui:define name="main">
              <h:form id="select">
              <s:decorate id="experimentTypeDecoration" template="layout/edit.xhtml">
              <ui:define name="label">Country</ui:define>
              <h:selectOneMenu value="country" onchange="handleOnChange(this);">
              <f:selectItem itemValue="Select State" itemLabel="Select State"/>
              <f:selectItem itemValue="NJ" itemLabel="NJ"/>
              <f:selectItem itemValue="CA" itemLabel="CA"/>  
              <f:selectItem itemValue="FL" itemLabel="FL"/>                  
              </h:selectOneMenu>
              </s:decorate>        

              <h:selectOneMenu value="city">
              <f:selectItem itemValue="Select City" itemLabel="Select City"/>
              </h:selectOneMenu>
             
      </h:form>
      </ui:define>
      </ui:composition>