1 Reply Latest reply on Jul 6, 2007 9:22 AM by c_wigginton

    Ajax help needed

    siriiven Level 1
      I am trying to do 2 or more ajax queries after each other. I can get the first query to work with CF but none after that. Basically I have a drop down list of buildings when you select the buildings it calls a coldfusion page with a query on that returns all of the controllers under that building to a target div on the first page. That all works fine. Another drop down menu is returned with the query results in it. I want to then select a controller in that drop down box and have it go out and query a model and return that. I just don't know how to do query after query with ajax. Here is my code:

      First Page:

      <script language = "javascript">



      var XMLHttpRequestObject = false;

      if (window.XMLHttpRequest) {
      XMLHttpRequestObject = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
      XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
      }

      function getData(dataSource, divID, inputID)
      {
      if(XMLHttpRequestObject) {
      var obj = document.getElementById(divID);
      var data = inputID + '=' + document.getElementById(inputID).value;
      XMLHttpRequestObject.open("POST", dataSource,2);
      XMLHttpRequestObject.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');


      XMLHttpRequestObject.onreadystatechange = function()

      {
      if (XMLHttpRequestObject.readyState == 4 &&
      XMLHttpRequestObject.status == 200) {
      obj.innerHTML = XMLHttpRequestObject.responseText;
      }
      }


      </script>

      <tr valign="top"><td class="wobar" valign="top"><select name="location" id="location" onchange = "getData('controllerquery.cfm', 'targetDiv', 'location')"><option></option>

      <cfoutput query="locations"><option value="#Location#">#Location# #LocName#</option></cfoutput></select></td>

      </form>

      <td class="wobar" valign="top">

      <div id="targetDiv">
      <form>
      <select name="controller" id="controller">
      <option></option>
      </select>
      </form>
      </div>
      </td>
      <form>
      <td class="wobar" valign="top"><div id="targetDiv2"><input type="text" size="10"></div></td>
      <td valign="top" class="wobar"><input name="" type="text" size="10"></td>
      <td valign="top" class="wobar"><input name="" type="text" size="10"></td>

      </tr>

      It then queries this page:

      <cfquery name="controllers" datasource="ds">
      select Controller from inventory
      where Location = '#left(form.location, 4)#'
      </cfquery>

      <form name="form" id="form">
      <select name="controller" id="controller" onchange = "getData2('modelquery.cfm', 'targetDiv2', 'controller')">



      <cfoutput query="controllers"><option>#controller#</option></cfoutput>

      </select>
      </form>

      Does anyone know how I would query another page based on what was returned in the #controller# variable?

      Any ideas are appreciated!