Ajax và PHP XTemplate khi làm dropdown list [Archive]

trungxp2004

10-12-2011, 14:51

Chào các bạn,

Mình đang làm cái form để add thêm các khách sạn vào các thành phố. Trong đó mình có 2 cái dropdown list, một cái tên là city, trong đó có 2 dòng là Hanoi và Ho Chi Minh, dữ liệu được lấy từ bảng cities (gồm 2 cột: city_id và city), cái thứ 2 tên là district là tên các quận tương ứng với 2 thành phố. Chẳng hạn Hanoi thì có Hoan Kiem, Ba Dinh, Hai Ba Trung...; Ho Chi Minh thì có Quan 1, Quan 2, Tan Binh... Dữ liệu được lấy từ bảng district (gồm 3 cột: district_id, city_id và district).

File chứa cái dropdown như sau (mấy cái lằng nhằng như kết nối csdl... mình bỏ không đưa vào đây):

<?php

@$city_id=$_GET['city_id'];

$template = new XTemplate('templates/new_hotel.tpl'); //Mình sử dụng XTemplate

$query_2 = mysql_query("SELECT DISTINCT city,city_id FROM cities ORDER BY city") or die(mysql_error());

while($result_2 = mysql_fetch_array($query_2)){

if($result_2['city_id'] == @$city_id){

$city_option = "<option value='$result_2[city_id]' selected>$result_2[city_name]</option>"."<BR>";
}
else{

$city_option = "<option value='$result_2[city_id]'>$result_2[city_name]</option>";
}

$template->assign('city_list',$city_option);

$template->parse('main.body.city_list');

}
$template->parse('main.body');

$template->parse('main');

eval("?".">".$template->text("main"));

}
?>

Cái template của nó như thế này (file new_hotel.tpl, ngắn gọn):


<head>
<SCRIPT language=JavaScript>
function getXMLHTTP() { //fuction to return the xml http object
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}

return xmlhttp;
}

function getDistrict(city_id) {

var strURL="get_district.php?district_id="+district_id;
var req = getXMLHTTP();

if (req) {

req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('districtdiv').innerHTML=r eq.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
</head>
<body>

<form name="form1" id="form1" method="POST" action="add_link.php" enctype="multipart/form-data">
<select class="dropdown" name="city_id" size="1" style="width: 160px" onchange="getDistrict(this.value)">
<option value="">Select A City</option>

{city_list}

</select>
<div id="districtdiv">
<select class="dropdown" name="district_id" size="1" style="width: 160px">
<option value="">Select A District</option>

</select>
</form>

</body>


Còn file get_district.php thì như thế này:

<?php

$city_id=intval($_GET['city_id']);

include("../library/dbconnect.php");

$query="SELECT district_id,district FROM district WHERE city_id='$city_id'";

$result=mysql_query($query);

echo "<select class='dropdown' name='district_id' size='1' style='width: 160px'>";

echo "<option value=''>Select A District</option>";

while($district=mysql_fetch_array($result)){

echo "<option value='$district[district_id]'>$district[district]</option>";
}
echo "</select>";

?>

Kết quả là khi mình chọn một thành phố trên dropdown thứ nhất, hệ thống tự chọn các quận tương ứng. Mình nhìn thấy rõ ràng trên trang web nhưng khi mở source code ở dạng HTML thì mình không thấy mấy cái option tương ứng với các quận đó. Kết quả là khi submit thì nó báo là undefined index district_id.

Cũng dạng tương tự nhưng nếu chạy theo dạng gom cả code PHP và HTML vào một file (tức không dùng XTemplate thì chạy ngon lành.

Bạn nào biết chỉ giúp cách xử lý.

Thanks,