JAX บทที่ 22 XML (ตำบล อำเภอ จังหวัด ด้วย GAJAX)

usericon เด็กคอมตุ่นได้อีก

JAX บทที่ 22 XML (ตำบล อำเภอ จังหวัด ด้วย GAJAX)  ขอถามอ.ว่า

var src = GEvent.element(event); /* element ที่เป็นเจ้าของ event */

มันไม่มีการส่งค่าอะไรเลยคะ ทำอย่างไรคะ

เกิด error

Webpage error details
Message: Object expected
Line: 79
Char: 1
Code: 0
 

 

29 มิ.ย. 2553 6 2,446
usericon goragod

ปกติแล้ว GEvent.element(event); จะคืนค่า element ของตัวที่เกิด event ครับ
#1
usericon เด็กคอมตุ่นได้อีก

สาเหตุเกิดจากอะไรคะอ.เช็คอย่างไรว่าค่า ที่ถูกเรียก มันจะวิ่งไปหน้า province.php

#2
usericon goragod

ดู การ debug ajax

ติดตั้ง firefox และ firebug
#3
usericon เด็กคอมตุ่นได้อีก

อ.คะ ค่า
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 + '&amphur=' + amphur.value;
 } else {
  var query = 'city=' + city.value + '&amphur=' + 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();
?>

#4
usericon goragod

1. มันเกิด event เมื่อเลือก select หรือเปล่า

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. ลองเปลี่ยนไปทดสอบตัวอย่างอื่นๆ
#5
usericon เด็กคอมตุ่นได้อีก

อ.ขอบคุณมากคะ ได้แล้วคะ
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();
?> 

#6
ความคิดเห็น
ไฟล์อัปโหลด ชนิด jpg, jpeg ขนาดไฟล์ไม่เกิน 1024
^