Skip to main content
Inspiring
July 6, 2007
Question

Ajax help needed

  • July 6, 2007
  • 1 reply
  • 348 views
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!
This topic has been closed for replies.

1 reply

Participating Frequently
July 6, 2007