JAX บทที่ 22 XML (ตำบล อำเภอ จังหวัด ด้วย GAJAX) ขอถามอ.ว่า
var src = GEvent.element(event); /* element ที่เป็นเจ้าของ event */
มันไม่มีการส่งค่าอะไรเลยคะ ทำอย่างไรคะ
เกิด error
Webpage error details
Message: Object expected
Line: 79
Char: 1
Code: 0
สาเหตุเกิดจากอะไรคะอ.เช็คอย่างไรว่าค่า ที่ถูกเรียก มันจะวิ่งไปหน้า province.php
ติดตั้ง firefox และ firebug
อ.คะ ค่า
var src = GEvent.element(event); /* element ที่เป็นเจ้าของ event */
alert (src);
มันไม่มีค่าอะไรส่งมาเลยคะ
ลองไป echo หน้า province.php แล้วค่าที่คิวรี่มาก็มีนะคะแต่ทำไมมันไม่ส่งค่าไป หน้า index.php
งงมากเลยคะ
code index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>จังหวัด-อำเภอ-ตำบล ด้วย GAJAX</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="gajax.js"></script>
<style type="text/css">
* {
font-family:Tahoma;
font-size:8pt;
}
</style>
</head>
<body>
<form method="get" action="index.php">
<?php
// ค่าที่รับมา หรือค่าจังหวัด ตำบล อำเภอที่เลือก
// หรือค่าที่อ่านได้จากฐานข้อมูล สำหรับแสดงเมื่อโหลดหน้าเพจครั้งแรก
$city = $_GET[city];
$amphur = $_GET[amphur];
$tumbon = $_GET[tumbon];
?>
<p><select id="city" name="city"><option value="<?php echo $city?>">--เลือกจังหวัด--</option></select></p>
<p><select id="amphur" name="amphur"><option value="<?php echo $amphur?>">--เลือกอำเภอ--</option></select></p>
<p><select id="tumbon" name="tumbon"><option value="<?php echo $tumbon?>">--เลือกตำบล--</option></select></p>
<p><input type="submit" /></p>
</form>
<script type="text/javascript">
var doPrivonce = function(event) {
var city = $E('city');
var amphur = $E('amphur');
var tumbon = $E('tumbon');
var src = GEvent.element(event); /* element ที่เป็นเจ้าของ event */
alert (src);
if (!Object.isNull(src) && src.id == 'city') {
/* event เมื่อเลือก จังหวัด */
var query = 'city=' + city.value;
} else if (!Object.isNull(src) && src.id == 'amphur') {
/* event เมื่อเลือก อำเภอ */
var query = 'city=' + city.value + '&hur=' + amphur.value;
} else {
var query = 'city=' + city.value + '&hur=' + amphur.value + '&tumbon=' + tumbon.value;
};
/* Ajax ส่งไปโหลด อำเภอและจังหวัด */
var req = new GAjax();
req.send('province.php' , query , function(xhr){
/* <province> (root) */
var provinceNode = xhr.responseXML.getElementsByTagName('province')[0];
/* <city> */
var cityNode = provinceNode.getElementsByTagName('city')[0];
var items = cityNode.getElementsByTagName('*');
populate(city, items, city.value);
/* <amphur> */
var amphurNode = provinceNode.getElementsByTagName('amphur')[0];
var items = amphurNode.getElementsByTagName('*');
populate(amphur, items, amphur.value);
/* <tumbon> */
var tumbonNode = provinceNode.getElementsByTagName('tumbon')[0];
var items = tumbonNode.getElementsByTagName('*');
populate(tumbon, items, tumbon.value);
});
};
function populate(obj , items, select) {
/* เคลียร์ข้อมูลเก่า เหลือไว้แค่รายการแรก*/
for (var i = obj.options.length - 1 ; i > 0 ; i--) {
obj.removeChild(obj.options[i]);
};
var selectedIndex = 0;
/* เพิ่มรายการใหม่ */
for (var i = 0 ; i < items.length ; i++) {
var key = items[i].tagName.replace('a', '');
selectedIndex = key == select ? i + 1 : selectedIndex;
var option = document.createElement('option');
option.innerHTML = items[i].firstChild.data;
option.value = key;
obj.appendChild(option);
};
/* เลือกรายการที่ต้องการ */
obj.selectedIndex = selectedIndex;
/* เคลียร์ค่าในรายการแรกที่ใส่ไว้ */
obj.options[0].value = '';
};
$G(document).Ready(function(){
/* กำหนด event ให้กับ select แต่ละตัว */
$G('city').addEvent('change',doPrivonce);
$G('amphur').addEvent('change',doPrivonce);
/* โหลดเพจครั้งแรก */
doPrivonce(this);
});
</script>
</body>
</html>
code province.php
<?php
header("content-type: text/xml; charset=tis620");
echo "<?xml version=\"1.0\" encoding=\"tis620\"?>";
echo "<province>";
// ค่าที่รับมา หรือค่าจังหวัด ตำบล อำเภอที่เลือก
$city = $_POST["city"];
$amphur = $_POST["amphur"];
// ติดต่อฐานข้อมูล
$hostname_conn = "localhost";
$username_conn = "root";
$password_conn = "root";
$database_conn = "aaaa";
mysql_connect($hostname_conn, $username_conn, $password_conn);
mysql_query("SET NAMES tis620");
mysql_select_db($database_conn); // เลือกฐานข้อมูล
echo "<city>";
echo $sql1 = "SELECT ID_Catalogmain,Name_Catalogmain FROM tblcatalogmain where Catalogsub='' And Catalogsub2=''";
$result1 = mysql_query($sql1);
while ($fetcharr1 = mysql_fetch_array($result1)) {
echo "<a$fetcharr1[ID_Catalogmain]>$fetcharr1[Name_Catalogmain]</a$fetcharr1[ID_Catalogmain]>";
}
echo "</city>";
echo "<amphur>";
$sql2 = "SELECT ID_Catalogmain,Name_Catalogmain FROM tblcatalogmain WHERE Catalogsub='$city'";
$result2 = mysql_query($sql2);
while ($fetcharr2 = mysql_fetch_array($result2)) {
echo "<a$fetcharr2[ID_Catalogmain]>$fetcharr2[Name_Catalogmain]</a$fetcharr2[ID_Catalogmain]>";
}
echo "</amphur>";
echo "<tumbon>";
$sql3 = "SELECT ID_Catalogmain, Name_Catalogmain FROM tblcatalogmain WHERE Catalogsub2='$amphur'";
$result3 = mysql_query($sql3);
while ($fetcharr3 = mysql_fetch_array($result3)) {
echo "<a$fetcharr3[ID_Catalogmain]>$fetcharr3[Name_Catalogmain]</a$fetcharr3[ID_Catalogmain]>";
}
echo "</tumbon>";
echo "</province>";
mysql_close();
?>
var doPrivonce = function(event) {
alert('doPrivonce'); // ตรวจสอบว่าเกิด event หรือเปล่า
var city = $E('city');
2. มันส่งค่าไปยัง province หรือเปล่า
req.send('province.php' , query , function(xhr){
alert(xhr.responseText); // ตรวจสอบว่าส่งไปยัง province.php หรือเปล่า ถ้ามี ส่งอะไรกลับมา ถูกต้องหรือไม่ ?
/* <province> (root) */
var provinceNode = xhr.responseXML.getElementsByTagName('province')[0];
ทั้งหมดนี่คือตัวอย่างการ debug เพื่อให้รู้ว่าปัญหาเกิดจากอะไร ซึ่งจะต้องเอาคำตอบมาวิเคราห์อีกทีว่าน่าจะมีปัญหาจากตรงไหน
3. ลองเปลี่ยนไปทดสอบตัวอย่างอื่นๆ
อ.ขอบคุณมากคะ ได้แล้วคะ
event ที่ select มันไม่มีค่าออกมาคะ
เลยรองหาตัวอย่างที่เป็นของอ.มาอีกคะได้แล้ว
ดังนี้เยยคะ
หน้า main.php
<?
//ค่าที่ได้รับมาจากการ Submit
$mainmenu = $_POST[mainmenu];
$sub1 = $_POST[sub1];
$sub2 = $_POST[sub2];
if ( !empty( $sub1 ) )
{
echo "<br /><br />ค่าที่ได้จากการ Submit คือ :<br /<br />เมนูหลักที่เลือก : $mainmenu<br />ทะเบียนวัตถุย่อยระดับ1ที่เลือก : $sub1<br />ทะเบียนวัตถุย่อยระดับ2ที่เลือก : $sub2<br /><br /><br />
";
};
echo "<form action=\"?\" method=\"post\">
";
echo '<span id="mainmenuDiv">';
echo "<label for=\"mainmenu\">เมนูหลัก :</label><select name=\"mainmenu\" id=\"mainmenu\" onchange=\"dochange('mainmenu')\">
";
echo "<option value=\"$mainmenu\">--------------</option>
" ;
echo "</select></span>
";
echo '<span id="sub1Div">';
echo "<label for=\"sub1\">วัตถุย่อยระดับ1 :</label><select name=\"sub1\" id=\"sub1\" onchange=\"dochange('sub1')\">
";
echo "<option value=\"$sub1\">--------------</option>
" ;
echo "</select></span>
";
echo '<span id="sub2Div">';
echo "<label for=\"sub2\">วัตถุย่อยระดับ2 :</label><select name=\"sub2\" id=\"sub2\">
"; //รายการสุดท้ายไม่ต้องมี event แล้ว
echo "<option value=\"$sub2\">--------------</option>
" ;
echo "</select></span>
";
// echo "<br /><br /><br /><input type=\"submit\" value=\"ส่ง\" name=\"submit\" />
";
echo "</form>
";
?>
<script type="text/javascript">
//AJAX
function Inint_AJAX()
{
try
{
return new ActiveXObject( "Msxml2.XMLHTTP" );
}
catch ( e )
{
};
try
{
return new ActiveXObject( "Microsoft.XMLHTTP" );
}
catch ( e )
{
};
try
{
return new XMLHttpRequest();
}
catch ( e )
{
};
alert( "XMLHttpRequest not supported" );
return null;
};
function dochange( obj )
{
var req = Inint_AJAX();
var mainmenu = document.getElementById( 'mainmenu' ).value;
var sub2 = document.getElementById( 'sub2' ).value;
if ( obj && obj.name == 'mainmenu' ) //เมื่อทำการเลือที่จังหวัดมา ให้เคลียร์ค่าอำเภอ
{
var sub1 = "";
}
else //เลือกรายการอื่น
{
var sub1 = document.getElementById( 'sub1' ).value;
};
var data = "mainmenu=" + mainmenu + "&sub1=" + sub1 + "&sub2=" + sub2;
req.onreadystatechange = function()
{
if ( req.readyState == 4 )
{
if ( req.status == 200 )
{
var datas = eval( '(' + req.responseText + ')' ); // JSON
document.getElementById( 'mainmenuDiv' ).innerHTML = datas[0].mainmenu;
document.getElementById( 'sub1Div' ).innerHTML = datas[0].sub1;
document.getElementById( 'sub2Div' ).innerHTML = datas[0].sub2;
};
};
};
req.open( "post" , "sub2.php" , true ); //สร้าง connection
req.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" ); // set Header
req.send( data ); //ส่งค่า
};
//โหลดครั้งแรก
window.onload = function()
{
dochange( '' );
};
</script>
หน้า sub2.php
<?
header( "Expires: Sat, 1 Jan 2005 00:00:00 GMT" );
header( "Last-Modified: ".gmdate( "D, d M Y H:i:s" )."GMT" );
header( "Cache-Control: no-cache, must-revalidate" );
header( "Pragma: no-cache" );
header( "content-type: application/x-javascript; charset=tis-620" );
$mainmenu = $_POST[mainmenu];
$sub1 = $_POST[sub1];
$sub2 = $_POST[sub2];
$hostname_conn = "localhost";
$username_conn = "root";
$password_conn = "root";
$database_conn = "aaaa";
mysql_connect( $hostname_conn , $username_conn , $password_conn ) or die( "àª×èÍÁµèÍ°Ò¹¢éÍÁÙÅäÁèä´é" );
mysql_select_db( $database_conn ) or die( "àÅ×Í¡°Ò¹¢éÍÁÙÅäÁèä´é" ); // àÅ×Í¡°Ò¹¢éÍÁÙÅ
mysql_query("SET character_set_results=tis620");
/* mysql_query("SET character_set_client='utf8'");
mysql_query("SET character_set_connection='utf8'");
mysql_query("collation_connection = utf8_unicode_ci");
mysql_query("collation_database = utf8_unicode_ci");
mysql_query("collation_server = utf8_unicode_ci");*/
//ãËé¤×¹¤èҨѧËÇÑ´äÇéà»ç¹Íѹ´Ñºáá
$sql = "SELECT ID_Catalogmain,Name_Catalogmain FROM tblcatalogmain where Catalogsub='' And Catalogsub2=''";
$result = mysql_query( $sql );
echo "[{\"mainmenu\":\"";
echo "<label for='mainmenu'>àÁ¹ÙËÅÑ¡ :</label>";
echo "<select name='mainmenu' id='mainmenu' onchange='dochange(this)'>";
echo "<option value='0'>--¡ÃسÒàÅ×Í¡àÁ¹ÙËÅÑ¡--</option>";
while( $fetcharr = mysql_fetch_array( $result ) )
{
$id = $fetcharr[ID_Catalogmain];
$name = $fetcharr[Name_Catalogmain];
echo "<option value='$id'";
if ( $mainmenu == $id ) //àÅ×Í¡¨Ñ§ËÇÑ´·ÕèàÅ×Í¡äÇé
{
echo " selected='selected'";
};
echo ">$name</option>";
};
echo "</select>\",\"sub1\":\"";
echo "<label for='sub1'>Çѵ¶ØÂèÍÂÃдѺ1:</label>";
echo "<select name='sub1' id='sub1' onchange='dochange(this)'>";
//¶éÒÁÕ¡ÒÃàÅ×Í¡àÁ¹ÙËÅÑ¡ÁÒáÅéÇãËéáÊ´§àÁ¹ÙÂèÍÂ1
if ( $mainmenu != "0" && $mainmenu != "" )
{
echo "<option value='0'>--Çѵ¶ØÂèÍÂÃдѺ1--</option>";
$sql = "SELECT ID_Catalogmain,Name_Catalogmain FROM tblcatalogmain WHERE Catalogsub='$mainmenu'";
$result = mysql_query( $sql );
while( $fetcharr = mysql_fetch_array( $result ) )
{
$id = $fetcharr[ID_Catalogmain];
$name = $fetcharr[Name_Catalogmain];
echo "<option value='$id'";
if ( $sub1 == $id ) //àÅ×Í¡àÁ¹ÙÂèÍÂ1·ÕèàÅ×Í¡äÇé
{
echo " selected='selected'";
};
echo ">$name</option>";
};
}
else
{
echo "<option value=''>--------------</option>";
};
echo "</select>\",\"sub2\":\"";
echo "<label for='sub2'>Çѵ¶ØÂèÍÂÃдѺ2 :</label>";
echo "<select name='sub2' id='sub2'>";
//¶éÒÁÕ¡ÒÃàÅ×Í¡àÁ¹ÙÂèÍÂ1ÁÒáÅéÇãËéáÊ´§àÁ¹ÙÂèÍÂ2
if ( $sub1 != "0" && $sub1 != "" )
{
echo "<option value='0'>--Çѵ¶ØÂèÍÂÃдѺ2--</option>";
$sql = "SELECT ID_Catalogmain,Name_Catalogmain FROM tblcatalogmain WHERE Catalogsub2='$sub1'";
$result = mysql_query( $sql );
while( $fetcharr = mysql_fetch_array( $result ) )
{
$id = $fetcharr[ID_Catalogmain];
$name = $fetcharr[Name_Catalogmain];
echo "<option value='$id'";
if ( $sub2 == $id ) //àÅ×Í¡àÁ¹ÙÂèÍÂ2·ÕèàÅ×Í¡äÇé
{
echo " selected='selected'";
};
echo ">$name</option>";
};
}
else
{
echo "<option value=''>--------------</option>";
};
echo "</select>\"}]";
mysql_close();
?>