GORAGOD.com

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

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

สอบถามเกียวกับ 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( '' );

};
30 ต.ค. 2557 5 2,622

จริงๆแล้ว ต้องใช้โค้ดถึง 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/...8%E0%B9%81%E0%B8%95/
#4

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



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



window.onload = function(){

doChange();

doChange1();

doChange2();

// ฟังก์ชั่นอื่นๆที่ต้องทำเมื่อโหลด Windows เสร็จแล้ว

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