dropdown menu ajax

justinh · August 26, 2009

Okay I'm trying to write some ajax that updates dropdownmenu B based on what is selected in dropdownmenu A.

I found a tutorial and tried my best to follow it, but I'm not the one to just copy and paste something and call it done, I like to understand how it works.

Heres the code from the form page.

<html>
<head>
<script type="text/JavaScript">

var xmlHttp;
function createXMLHttpRequest(){
    if (window.ActiveXObject){
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                        else if (window.XMLHttpRequest){
                                    xmlHttp = new XMLHttpRequest();
                                        }
}

function doIt(dd1) {
     var idx = dd1.selectedIndex;
     var val = dd1[idx].text;
     var par = document.forms["addentry"];
     var parelmts = par.elements;
     var varcountry = parelmts["country"];

          createXMLHttpRequest();
          xmlHttp.onreadystatechange = handleStateChange(varcountry);
          xmlHttp.open("GET", "/Agents/templates/testings.pl?region=" + val , true);
          xmlHttp.send(null);
}


function handleStateChange(countryelmt){

     if (xmlHttp.readyState == 4){
      if(xmlHttp.status == 200){
        var countri = xmlHttp.responseText;
        var countries = countri.split("|");
        countryelmt.length = 1;
       countryelmt.length = countries.length;
        for(o=1; o < countries.length; o++){
            countryelmt[o].text = countries[o];
            }
}
}
}

            
                                                                                                                                                                                                                                          </script>
</head>
<div id="content">
<p class="contentheader">Add Entry</p>
<div id="content">
<div id="spitout"></div>
<form name="addentry" id="addentry" method="POST" action="http://www.cwwebapps.craneww.com/Agents/index2.pl?display=add_entry&insert=1">
<Fieldset>
<legend>Add Entry</legend>

<ol><li>
<label for="entrytype">Entry Type</label> <select name="entrytype"> 
                   <option value="gln">GLN</option>
                   <option value="agent">Agent</option>
                   <option value="crane">Crane</option>
                   </select></li>
                   
<li>
<label for="region">Region</label> <select name="region" onchange="doIt(this);">

            <option value="">Select Region</option>
            
            <option value="EMEA">EMEA</option>
            
            <option value="LATAM">LATAM</option>
            
            <option value="ASPAC">ASPAC</option>
            
            <option value="NORTAM">NORTAM</option>
            
            <option value="CENTAM">CENTAM</option>

            
            </select>
            </li>
            <li>
            <label for="country">Country</label><select name="country">
            <option value="">Select Country</option>
            
            </select>
            </li>
            </ol>

            </fieldset>
            <fieldset class="submit">
            <input class="submit" type="submit" value="Add">
            </fieldset>
            </form>

and heres the code to testings.pl ( the page the ajax calls to)

#!/usr/bin/perl -w
use strict;
use CGI;
use DBI;.
my $cgi = CGI->new();
print $cgi->header();

my $region = $cgi->param('region');
my $dbh = DBConnect();
my $query = "SELECT DISTINCT country from stations WHERE region =\"". $region."\"";
my $sth = $dbh->prepare($query);
$sth->execute();
while( my $ref = $sth->fetchrow_hashref()){
    print $ref->{country}."|";
}

sub DBConnect {

my $db = shift || "agent_info";
my $dn = "DBI:mysql:$db";
my $dbh = DBI->connect($dn, "*****", "******") or die("Error connecting to Database:" . $DBI::errstr);
            }

Now I have tested just the xmlHttp.responseText to see if its the output not coming out right, but it prints out just fine every time i change the dropdownmenu A. So that's working, just can't get it to add into dropdownmenu B.

Any help would be greatly appreciated.

Thanks

jkewlo · August 29, 2009

my $query = "SELECT DISTINCT country from stations WHERE region =\"". $region."\"";
[\code]

how come you are doing region=\"". $region."\""; 

??

try

[code]
my $query = "SELECT DISTINCT country from stations WHERE region ='". $region ."'";
[\code]

jkewlo · August 29, 2009

Also shouldnt you have the class called in the Div tag's? im new to Ajax, just shooting some bullets.

Sign In

dropdown menu ajax

Recommended Posts

justinh

Link to comment

Share on other sites

jkewlo

Link to comment

Share on other sites

jkewlo

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information