Topic: xajax PHP Dynamic Drop Down Menu
Hi there,
I have posted this message in PHP help but didn't get a response in a week so I thought of putting it here as well hoping for a reply :
__________________________________________________________________________________________
I have been struggeling lately to adapt the tutorialized script to pull data from my database, but to no avail.
It doesn't work. Therefore I am posting here my code so that someone could tell me what am I doing wrong.
So here it goes :
1. I have 2 tables in my database, table "province" and table "city".
2. Table province has 2 rows: "id" and "name"
3. Table city has 3 rows: "id", "fk_province_id" and "name"
4. I have a functions repository file called delegate.php that is referenced in every file on my site.
5. Obviously I want that when a dropdown # 1 (province) changes, the respective cities in that province show up in dropdown # 2
In my delegate.php file I have 2 functions that I reference in dropdown.php file:
Code: PHP
function getProvinces(){
$provinces = array();
$con = getConnection();
$query = "SELECT * FROM province";
$result = executeSQL($query, $con);
while($row = mysql_fetch_array($result, MYSQL_ASSOC)){
//get province
$province = new Province($row['id'], $row['name']);
$provinces[] = $province;
}
return $provinces;
}
//get cities for province
function getCitiesForProvince($provinceId){
$cities = array();
$con = getConnection();
$query = "SELECT * FROM city WHERE fk_province_id=$provinceId";
$result = executeSQL($query, $con);
while($row = mysql_fetch_array($result, MYSQL_ASSOC)){
$city = new City($row['id'], $row['name'], $row['fk_province_id']);
$cities[] = $city;
}
return $cities;
}
And now here's the code of my dropdown.php file:
Code: PHP
require('common/delegate.php');
require('assets/js/xajax_core/xajax.inc.php');
$xajax = new xajax();
//$xajax->configure('debug',true);
class myXajaxResponse extends xajaxResponse {
function addCreateOptions($sSelectId, $options) {
$this->script("document.getElementById('".$sSelectId."').length=0");
if (sizeof($options) >0) {
foreach ($options as $option) {
$this->script("addOption('".$sSelectId."','".$option."','".$option."');");
}
}
}
}
$provinces = getProvinces();
$cities = getCitiesForProvince($provinces[0]->id);
// adds an option to the select
function addCities($selectId, $provinces) {
global $cities;
$objResponse = new myXajaxResponse();
$data = $cities[$provinces];
$objResponse->addCreateOptions($selectId, $data);
// return $objResponse->getXML();
return $objResponse;
}
$xajax->registerFunction("addCities");
$xajax->processRequest();
?>
<?
if (isset($_POST['Submit'])) {
print_r($_POST);
}
?>
<html>
<head>
<title>AJAX Dynamic Drop Down Tutorial</title>
<?
$xajax->printJavascript("assets/js/");
?>
<script type="text/javascript">
function addOption(selectId, val, txt) {
var objOption = new Option(txt, val);
document.getElementById(selectId).options.add(objOption);
}
</script>
</head>
<body>
<form name="form1" method="POST" action="">
Province :
<select name="province" id="province" onchange="xajax_addCities('cities', document.form1.province.value)">
<? foreach ($provinces as $province) { ?>
<option value="<?= $province->id?>"><?= $province->name?></option>
<? } ?>
</select>
City :
<select name="city" id="city">
<? foreach ($cities as $city) { ?>
<option value="<?= $city->id?>"><?= $city->name?></option>
<? } ?>
</select>
<input type="submit" value="Submit" name="Submit" id="Submit">
</form>
</body>
</html>
Output looks well but when I change a province, the cities dropdown doesn't change AT ALL.
I have enabled the xajax debugger and here's what I get the moment I change the province dropdown :
Code: PHP
Fri Sep 12 23:45:15 UTC+0300 2008
DONE [156ms]Fri Sep 12 23:45:15 UTC+0300 2008
ERROR: ExecuteCommand (#2, ):TypeError: Object doesn't support this property or methodFri Sep 12 23:45:15 UTC+0300 2008
ERROR: ExecuteCommand (#1, ):TypeError: Object doesn't support this property or methodFri Sep 12 23:45:15 UTC+0300 2008
ERROR: ExecuteCommand (#0, ):TypeError: Object doesn't support this property or methodFri Sep 12 23:45:15 UTC+0300 2008
RECEIVED [status: 200, size: 240 bytes, time: 78ms]:<?xml version="1.0" encoding="utf-8" ?><xjx><cmd cmd="js">Sdocument.getElementById('cities').length=0</cmd><cmd cmd="js">SaddOption('cities','6','6');</cmd><cmd cmd="js">SaddOption('cities','Aiudul de Sus','Aiudul de Sus');</cmd></xjx>Fri Sep 12 23:45:15 UTC+0300 2008
SENT [66 bytes]Fri Sep 12 23:45:15 UTC+0300 2008
SENDING REQUESTFri Sep 12 23:45:15 UTC+0300 2008
CALLING: xjxfun: addCitiesURI: http://localhost/v1/dropdown.phpFri Sep 12 23:45:15 UTC+0300 2008
POST: xjxfun=addCities&xjxr=1221252315703&xjxargs[]=Scities&xjxargs[]=S5Fri Sep 12 23:45:15 UTC+0300 2008
INITIALIZING REQUEST OBJECTFri Sep 12 23:45:15 UTC+0300 2008
PREPARING REQUESTFri Sep 12 23:45:15 UTC+0300 2008
PROCESSING PARAMETERS [2]Fri Sep 12 23:45:15 UTC+0300 2008
INITIALIZING REQUESTFri Sep 12 23:45:15 UTC+0300 2008
STARTING XAJAX REQUEST
Can somebody enlighten me PLEEEEEEASE why this doesn't work?
Thanks a zzzillion guys.
Luc
I do apologise for my absolute ignorance. It's got to the point where I've been sat there with tears in my eyes with the sheer frustration. It's like my old school reports: "Could do better". F