GORAGOD.com

GORAGOD.com

freelance, web developer, web designer, hosting, domain name

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

ฟงหวิน ขี่พายุทะลุโกรธ

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 3,646
กรกฎ วิริยะ

ปกติแล้ว GEvent.element(event); จะคืนค่า element ของตัวที่เกิด event ครับ
#1
ฟงหวิน ขี่พายุทะลุโกรธ

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

#2
กรกฎ วิริยะ

ดู การ debug ajax

ติดตั้ง firefox และ firebug
#3
ฟงหวิน ขี่พายุทะลุโกรธ

อ.คะ ค่า
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
กรกฎ วิริยะ

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
ฟงหวิน ขี่พายุทะลุโกรธ

อ.ขอบคุณมากคะ ได้แล้วคะ
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 ขนาดไฟล์ไม่เกิน 64M
^