A-AA+then

สอบถามเกียวกับ ajax ผมจะทำจังหวัดอำเภอตำบลครับ มีปัญหาคือมันไม่

684
สอบถามเกียวกับ ajax ผมจะทำจังหวัดอำเภอตำบลครับ มีปัญหาคือมันไม่
คือ ใช้จังหวัด อำเภอ ตำบล 1 ชุด ทำงานได้ตามปกติ
แต่ผมต้องใช้ 2 ชุดขึ้นไปในหน้าเดียวกัน

ซึ้งโค้ดด้านล่างนี้ ทดสอบใช้ 1 ชุดคือ จังหวัด อำเภอ ตำบล ใช้งานได้ตามปกติ
แต่พอเพิ่มไปอีก 1 ชุด กลับทำงานได้แค่ชุดเดียว คือ ชุดที่เพิ่มมาใหม่อ่ะครับ

สงสัยว่าโค้ดจะชนกันก็เลยเปลี่ยนตัวแปร ทั้งหมดไม่ให้เหมือนกัน ก็ยังทำงานไม่ได้อ่ะครับ
รบกวนสอบถามหน่อยนะครับ
ขอบคุณครับ



test.php

table>
<tr>
<td align="right">จังหวัด</td>
<td>
<span id="provinceDiv_1">
<select class="form-control" name="txtProvince_1" id="txtProvince_1" onchange="dochange('province')">
<option value="<?=$Province_ID;?>">เลือกจังหวัด</option>
</select>
</span>
</td>
<td align="right">อำเภอ</td>
<td>
<span id="amphurDiv_1">
<select class="form-control" name="txtAmphur_1" id="txtAmphur_1" onchange="dochange('amphur')">
<option value="<?=$District_ID;?>">เลือกอำเภอ</option>
</select>
</span>
</td>
<td align="right">ตำบล</td>
<td>
<span id="tumbonDiv_1">
<select class="form-control" name="txtTumbol_1" id="txtTumbol_1" >
<option value="<?=$Sub_District_ID;?>" >เลือกตำบล</option>
</select>
</span>
</td>
</tr>
<tr>
<td align="right">จังหวัด</td>
<td>
                    <span id="provinceDiv_2">
<select class="form-control" name="txtProvince_2" id="txtProvince_2" onchange="dochange1('province1')">
<option value="<?=$Province_ID1;?>">เลือกจังหวัด</option>
</select>
</span>
</td>
<td align="right">อำเภอ</td>
<td>
<span id="amphurDiv_2">
<select class="form-control" name="txtAmphur_2" id="txtAmphur_2" onchange="dochange1('amphur1')">
<option value="<?=$District_ID1;?>">เลือกอำเภอ</option>
</select>
</span>
</td>
<td align="right">ตำบล</td>
<td>
<span id="tumbonDiv_2">
<select class="form-control" name="txtTumbol_2" id="txtTumbol_2" >
<option value="<?=$Sub_District_ID1;?>" >เลือกตำบล</option>
</select>
</span>
</td>
</tr>
<table>


ajax.js



     //AJAX Function จังหวัด อำเภอ ตำบล 1 Function ที่
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 province = document.getElementById( 'txtProvince_1' ).value;
var tumbon = document.getElementById( 'txtTumbol_1' ).value;
if ( obj && obj.name == 'province' )//เมื่อทำการเลือที่จังหวัดมา ให้เคลียร์ค่าอำเภอ
{
var amphur = "";
}
else//เลือกรายการอื่น
{
var amphur = document.getElementById( 'txtAmphur_1' ).value;
};
            
var data = "province=" + province + "&hur=" + amphur + "&tumbon=" + tumbon;
req.onreadystatechange = function()
{
if ( req.readyState == 4 )
{
if ( req.status == 200 )
{
var datas = eval( '(' + req.responseText + ')' );// JSON
document.getElementById( 'provinceDiv_1' ).innerHTML = datas[0].province;
document.getElementById( 'amphurDiv_1' ).innerHTML = datas[0].amphur;
document.getElementById( 'tumbonDiv_1' ).innerHTML = datas[0].tumbon;
};
};
};
req.open( "post" , "regisProvince.php" , true );//สร้าง connection
req.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );// set Header
req.send( data );//ส่งค่า
};

//โหลดครั้งแรก
window.onload = function()
{
dochange( '' );
};

function Inint_AJAX1()
{
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 dochange1( obj )                 
{
var req1 = Inint_AJAX1();
var province1 = document.getElementById( 'txtProvince_2' ).value;
var tumbon1 = document.getElementById( 'txtTumbol_2' ).value;
if ( obj && obj.name == 'province1' )//เมื่อทำการเลือที่จังหวัดมา ให้เคลียร์ค่าอำเภอ
{
var amphur1 = "";
}
else//เลือกรายการอื่น
{
var amphur1 = document.getElementById( 'txtAmphur_2' ).value;
};
var data = "province1=" + province1 + "&hur1=" + amphur1 + "&tumbon1=" + tumbon1;
req1.onreadystatechange = function()
{
if ( req1.readyState == 4 )
{
if ( req1.status == 200 )
{
var datas = eval( '(' + req1.responseText + ')' );// JSON
document.getElementById( 'provinceDiv_2' ).innerHTML = datas[0].province1;
document.getElementById( 'amphurDiv_2' ).innerHTML = datas[0].amphur1;
document.getElementById( 'tumbonDiv_2' ).innerHTML = datas[0].tumbon1;
};
};
};
req1.open( "post" , "regisProvince_2.php" , true );//สร้าง connection
req1.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );// set Header
req1.send( data );//ส่งค่า
};

//โหลดครั้งแรก
window.onload = function()
{
dochange1( '' );
};

5 ความคิดเห็น

จริงๆแล้ว ต้องใช้โค้ดถึง 3 ชุดเลยครับ เนื่องจากมี โค้ดที่ต้องใช้งานถึง 3 ชุด วิธีง่ายๆ ผมแนะนำให้ ใส่ ตัวเลขกำกับ ทั้งในส่วนของ id และ ชื่อฟังก์ชั่นเลยครับ

วิธีที่ดีกว่า แต่ก็ยากกว่า คือ เขียน Class เพื่อใช้งานโดยเฉพาะครับ ซึ่งจะทำให้การเรียกใช้ง่ายขึ้น แต่ก็ต้อง advance กันพอสมควร (class ที่ใช้งานได้มีใช้งานอยู่ใน GCMS ครับ จะไปลองแกะดูก้ได้)
1

ใช่ครับ 3 ชุดตอนนี้เอา สองชุดให้ผ่านก่อน
id function ใส่ตรงไหนอ่ะครับในโค้ดนี้ obj เหรอครับ
รบกวนหน่อยนะครับ
2

อ้างจากคำตอบที่ #1จริงๆแล้ว ต้องใช้โค้ดถึง 3 ชุดเลยครับ เนื่องจากมี โค้ดที่ต้องใช้งานถึง 3 ชุด วิธีง่ายๆ ผมแนะนำให้ ใส่ ตัวเลขกำกับ ทั้งในส่วนของ id และ ชื่อฟังก์ชั่นเลยครับ

วิธีที่ดีกว่า แต่ก็ยากกว่า คือ เขียน Class เพื่อใช้งานโดยเฉพาะครับ ซึ่งจะทำให้การเรียกใช้ง่ายขึ้น แต่ก็ต้อง advance กันพอสมควร (class ที่ใช้งานได้มีใช้งานอยู่ใน GCMS ครับ จะไปลองแกะดูก้ได้)


ผมเจอปัญหาแล้วครับ คือมันโหลด ครั้งล่าสุดออกมาอย่างเดียวครับ


ชุดที่ 1
window.onload = function()
{
dochange( '' );
};

ชุดที่สอง
window.onload = function()
{
dochange1( '' );
};


เอาตัวไหนไว้ล่างสุดมันก็จะทำงานแค่ตัวล่างสุดเท่านั้นครับ

แต่ไม่รู้จะแก้ยังไงจริงๆครับ

รอบกวนด้วยนะครับ
3

ได้แล้วครับพี่
ใช้
$(function(){

dochange( '' );
});
แทนครับ
ความรู้ใหม่จาก http://blog.chonla.com/2008/11/jquery-ready-%E0%B8%81%E0%B8%B1%E0%B8%9A-windowonload-%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1%E0%B9%80%E0%B8%AB%E0%B8%A1%E0%B8%B7%E0%B8%AD%E0%B8%99%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B9%81%E0%B8%95/
4

window.onload สามารถใช้ได้แค่ครั้งเดียวเท่านั้นครับ การใส่เกินกว่า 1 ที่ จึงถูกปฏิบัติเพียงครั้งเดียวเท่านั้น

วิธีที่ถูกต้อง

window.onload = function(){
doChange();
doChange1();
doChange2();
// ฟังก์ชั่นอื่นๆที่ต้องทำเมื่อโหลด Windows เสร็จแล้ว
}
5
^