...

View Full Version : Multiple Ajax calls to one asp page



Gary Williams
10-28-2010, 10:34 AM
Hi All,

I have a simple information request form (written in asp) that enables a site visitor to submit a request for product literature from a chosen client.

When the form loads, the first dropdown (Client) is populated from the database.

The two further dropdowns (Location & Product) are empty.

Using AJAX and the javascript onChange function, when the visitor selects a Client from the first dropdown, I need the two further dropdowns (Location & Product) to be populated from the database.

I can populate the first dropdown (Location) quite easily but I can't populate both dropdowns.

Searching through Google, I can see that many coders are looking for a solution to this but the solutions offered don't appear to work.

Does anyone know how to make several AJAX calls to a single asp page?

Regards

Gary

Spudhead
10-29-2010, 02:57 PM
Can you post the code that you've got already?

Gary Williams
11-05-2010, 08:21 AM
Hi Spudhead,

Apoligies for not replying sooner. Last weekend I couldn't get near a PC and this week has been a bit manic.

I have found a very crude solution to my problem, which I discovered when I was stripping down my pages ready for uploading to the forum. I basically run the same ajax script 5 times, each version with slightly different object names. I know this can be seriously improved so I'll batch up a small demo of my solution and post it here.

Back soon.

Gary

Gary Williams
11-05-2010, 11:09 AM
Hi Spudhead,

Herewith the code. In the application, the content of all of the dropdowns are drawn from the mysql database.

If the ajaxgetdata.js is looped, ie:

For 1<i<3 then
xmlhttp(i)
next

and the ajax calls made synchronous [xmlhttp.open("GET",url,FALSE);], we can reuse the ajaxgetdata.js as often as required, yes?

Unless you know a cunning solution :)

Regards

Gary


================================




<html>
<head>
<title></title>
<script type="text/javascript" src="ajaxgetdata.js"></script>
</head>
<body>

<form name="form" action="" method="post">

<table>
<tr><td>Company:</td><td>

<SELECT ID="cbo_company" NAME="cbo_company" onChange = "getData(this.value,'getlocations.asp','showLocations');getData1(this.value,'getdepartments.asp','sho wDepartments');getData2(this.value,'getmanagers.asp','showManagers');">
<OPTION VALUE = "">---- SELECT ----</Option>
<OPTION VALUE = "aaa">AAA</Option>
<OPTION VALUE = "bbb">BBB</Option>
</SELECT>
</td>
</tr>

<!-- ................ Create the Locations Dropdown .......................... -->

<tr><td>Locations:</td>
<td>
<div id = "showLocations">Locations Dropdown Here</div>
</td>
</tr>

<!-- ................ Create the Department Dropdown .......................... -->

<tr><td>Departments:</td>
<td>
<div id = "showDepartments">Departments Dropdown Here</div>
</td>
</tr>

<!-- ................ Create the Manager Dropdown .......................... -->

<tr><td>Managers:</td>
<td>
<div id = "showManagers">Managers Dropdown Here</div>
</td>
</tr>

</table>
</body>
</html>



=========================================




var xmlhttp,xmlhttp1,xmlhttp2

function getData(str,file,target)
{
getData.file=file
getData.target=target
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url=getData.file;

url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById(getData.target).innerHTML=xmlhttp.responseText;
}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}

// .... New Function 1 ................

function getData1(str1,file1,target1)
{
getData1.file1=file1
getData1.target1=target1
xmlhttp1=GetXmlHttpObject();
if (xmlhttp1==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url1=getData1.file1;

url1=url1+"?q="+str1;
url1=url1+"&sid="+Math.random();
xmlhttp1.onreadystatechange=stateChanged1;
xmlhttp1.open("GET",url1,true);
xmlhttp1.send(null);
}

function stateChanged1()
{
if (xmlhttp1.readyState==4)
{
document.getElementById(getData1.target1).innerHTML=xmlhttp1.responseText;
}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}

// .... New Function 2 ................

function getData2(str2,file2,target2)
{
getData2.file2=file2
getData2.target2=target2
xmlhttp2=GetXmlHttpObject();
if (xmlhttp2==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url2=getData2.file2;

url2=url2+"?q="+str2;
url2=url2+"&sid="+Math.random();
xmlhttp2.onreadystatechange=stateChanged2;
xmlhttp2.open("GET",url2,true);
xmlhttp2.send(null);
}

function stateChanged2()
{
if (xmlhttp2.readyState==4)
{
document.getElementById(getData2.target2).innerHTML=xmlhttp2.responseText;
}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}



===================================


<table>
<tr>
<td>

<SELECT ID='cbo_client_departments' NAME='cbo_client_departments'>"
<OPTION VALUE = ''>---- SELECT ----</Option>
<OPTION VALUE = 'dept1'>Department1</Option>
<OPTION VALUE = 'dept2'>Department2</Option>
<OPTION VALUE = 'dept3'>Department3</Option>

</td>
</tr>
</table>


=====================================



<table>
<tr>
<td>

<SELECT ID='cbo_client_locations' NAME='cbo_client_locations'>"
<OPTION VALUE = ''>---- SELECT ----</Option>
<OPTION VALUE = 'loc1'>Loc1</Option>
<OPTION VALUE = 'loc2'>Loc2</Option>
<OPTION VALUE = 'loc3'>Loc3</Option>

</td>
</tr>
</table>


=====================================



<table>
<tr>
<td>
<SELECT ID='cbo_client_managers' NAME='cbo_client_managers'>"
<OPTION VALUE = ''>---- SELECT ----</Option>
<OPTION VALUE = 'manager1'>Manager1</Option>
<OPTION VALUE = 'manager2'>Manager2</Option>
<OPTION VALUE = 'manager3'>Manager3</Option>
</td>
</tr>
</table>

==================================



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum