list box 2ชั้น ajax ใช้ไม่ได้กับ firefox ครับ

[lovehinatava]

ผมทำ list box 2 ชั้น จังหวัดกับเขตโดยใช้ ajax ใช้กับ ie,opera ได้ แต่ firefox ไม่้ขึ้นเขต เมื่อเราเลือกจังหวัดครับ
ช่วยดูให้ทีครับ

โค้ด: เลือกทั้งหมด

<script language="javascript">
var xmlHttp;

function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} 
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}

function list_namesub(id) {
var obj = document.getElementById("area");
var obj_default = '--- ทั้งหมด ---';
if(id ==""){
while(obj.childNodes.length>0){obj.removeChild(obj.childNodes[0]);}
obj[0] = new Option(obj_default,'');}else{
var url = "getarea.php?id="+ id;
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;//ใน firefox ฟ้อง error ว่าหาไม่เจอฟังก์ชั่นนี้ครับ
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
var results = xmlHttp.responseText;
while(obj.childNodes.length>0){obj.removeChild(obj.childNodes[0]);}
arr_list=results.split("/");
if(arr_list.length-1!=0){
for (var i=0; i < eval(arr_list.length-1); i++) {
shop_arr=arr_list[i].split(",");
obj.options[i] = new Option(shop_arr[0],shop_arr[1]); 
}}else{
while(obj.childNodes.length>0){obj.removeChild(obj.childNodes[0]);}
obj[0] = new Option(obj_default,'');
}
}
}}
}}
</script>

XMLHttpRequest ผมก็ดัก firefox แล้วนะ แต่แก้ยังไงก็ไม่หายอะครับ

[mindphp]

ลองเปลี่ยนเป็น

โค้ด: เลือกทั้งหมด

ajaxRequest.onreadystatechange = function(){
	if(ajaxRequest.readyState == 4){
		// ข้อมูลจาก Server 
	}
}

จริงๆ การเขียน Ajax แนะนำให้ใช้ ajax lib จะดีกว่านะครับ มันจะช่วยลดปัญหา javascript เข้ากันไม่ได้กับ ทุก browser

[lovehinatava]

ขอบคุณครับแล้วจะลองแก้ดูนะครับ

งั้นรบกวนช่วยแนะนำ framework ที่คนนิยมใช้หน่อยได้ไหมครับ

เห็นหลายที่ แนะนำ framework คนละตัวกัน เลยไม่รู้ว่าจะใช้ของตัวไหนดีครับ (แต่เห็น prototype เยอะสุดอะครับ)

[mindphp]

การเลือก lib การนำมาใช้ มันก็ขึ้นอยู่กับ ลักษณะงาน ของที่ทำอยู่ครับ

[mindphp]

ลองดูที่หมวด
https://www.mindphp.com/forums/viewforum.php?f=25

[indysoft]

ผมติดปัญหาเรื่องนี้อยู่เหมือนกันครับ แต่ไม่ใช้โค๊ดชุดนี้นะ จากลิงค์นี้นะ

ก็ติดปัญหา Firefox เหมือนกัน หากใครเคยแก้ปัญหาได้ หรือมีสคริปอื่นๆช่วยเอามาแนะนำหน่อยนะ

[indysoft]

ตอนนี้แก้ปัญหาได้แล้วนะ เอาสคริปลิงค์ที่ผมให้ไว้ แล้วไปแก้ ตรงหน้า frmMain ทุกตัว ให้ใส่ document. แค่นี้ก็เล่นกับ Firefox ได้เลยครับ

[fitta]

<script>
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}

function list_namesub(id) {
var obj = document.getElementById('model');
var obj_default = 'เลือกรุ่น';
if(id ==''){
while(obj.childNodes.length>0){
obj.removeChild(obj.childNodes[0]);
}
obj[0] = new Option(obj_default,'');
}else{
var url = 'get_subname.php?id=' + id;
createXMLHttpRequest();
xmlHttp.onreadystatechange = function handleStateChange() { //ย้ายฟังชั่น มาแทนที่เลย แก้ปัญหา ใน fire fox ได้
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
var results = xmlHttp.responseText;
while(obj.childNodes.length>0){
obj.removeChild(obj.childNodes[0]);
}
arr_list=results.split('/');
if(arr_list.length-1!=0){
for (var i=0; i < eval(arr_list.length-1); i++) {
shop_arr=arr_list.split(',');
obj.options = new Option(shop_arr[0],shop_arr[1]);
}
}else{
while(obj.childNodes.length>0){
obj.removeChild(obj.childNodes[0]);
}
obj[0] = new Option(obj_default,'');
}
}
}
} //สิ้นสุดฟังชั่น handleStateChange
xmlHttp.open('GET', url, true);
xmlHttp.send(null);
}
}


</script>



//////////////////////////////////////

แก้ไขตรง

xmlHttp.onreadystatechange = handleStateChange;

เป็น ฟังชั่นเลยนะครับ ตาม code ข้างบนแก้ไขแล้ว

ฟันธงครับ ได้ชัว

[touleg]

Jquery ง่ายๆ

ตัวอย่าง Code Javascript (อย่าลืม include jquery ก่อนนะ)

โค้ด: เลือกทั้งหมด

$("select[name=bandid]").change(function(){
     selectSubmit('ajaxcore/product/getoption.php','bandid','modelid');
});

function selectSubmit(url,selectid,showid){
     var data = "selectid="+$("#"+selectid+" option:selected").value()+"&showid="+showid;
     $.ajax({
         url: url,
         type: 'post',
         data: data,
         success: function(text,state) { eval(text); } //รับค่ากลับมาเป็น Javascript
    });
}

ตัวอย่าง Code Select

โค้ด: เลือกทั้งหมด

<select id="bandid" name="bandid">
<option value="-1">--- เลือกยี่ห้อสินค้า ---</option>
    <?php
    $sql = "select * from band order by bandid";
    $result = mysql_query($sql);
    if(!$result)
    {
        echo "อ่านข้อมูลยี่ห้อสินค้าไม่ได้";
    }else{
        while($data = mysql_fetch_assoc($result))
        {
            $bandid = $data['bandid'];
            $bandname = $data['bandname'];
            echo "<option value=\"$bandid\">$bandname</option>";
        }
    }
    ?>
</select>
<select id="modelid" name="modelid">
    <option value="-1">--- เลือกรุ่นสินค้า ---</option>
</select>

ตัวอย่าง Code ประมวลผลทางฝั่ง Server โดย Ajax

โค้ด: เลือกทั้งหมด

<?php
include("includes/configuration.php");

$selectid = $_POST['selectid'];
$showid = $_POST['showid'];

$response = "";

$javascript = <<<JS
    var el = document.getElementById('{$showid}');
    while(el.length>0){
        el.remove(0);
    }
JS;

$response = $javascript;

$sql = "select * from model where bandid='$selectid'";
$sresult = mysql_query($sql);
while($data = mysql_fetch_array($sresult)){
    $modelid = $data['modelid'];
    $modelname = $data['modelname'];
$javascript = <<<JS
    var opt = document.createElement('option');
    opt.value = "{$modelid}";
    opt.text = "{$modelname}";
    document.getElementById('{$showid}').options.add(opt);
JS;
$response .= $javascript;

}

echo  $response;
?>

[aob19148]

สุดยอดเลย หามานาน
แก้ได้แล้วค่ะ
ขอบคุณมากก เลย