Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Sep 2002
    Location
    South East UK. 35 miles east of London, in sight of the River Thames.
    Posts
    300
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Multiple Ajax calls to one asp page

    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

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Can you post the code that you've got already?

  • #3
    Regular Coder
    Join Date
    Sep 2002
    Location
    South East UK. 35 miles east of London, in sight of the River Thames.
    Posts
    300
    Thanks
    10
    Thanked 0 Times in 0 Posts
    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

  • #4
    Regular Coder
    Join Date
    Sep 2002
    Location
    South East UK. 35 miles east of London, in sight of the River Thames.
    Posts
    300
    Thanks
    10
    Thanked 0 Times in 0 Posts
    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


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

    [CODE - new_call.asp]

    <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','sh owDepartments');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>

    [/CODE]

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

    [CODE - ajaxgetdata.js]

    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;
    }

    [/CODE]

    ===================================
    [CODE - getdepartments.asp]
    <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>
    [/CODE]

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

    [CODE - getlocations.asp]
    <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>
    [/CODE]

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

    [CODE - getmanagers.asp]
    <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>
    [/CODE]
    ==================================
    Attached Files Attached Files


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •