Sunday, May 23, 2010

AJAX තනියෙන් ඉගෙනගන්න - 2

මේකත් අපි කලින් කරපු එකට සමාන එකක්...

Example 2 : යම්කිසි Value එකක් Server එකට Send  කරලා ඊට අදාල  data ටික Menu එකක‍ට  Fill කරගැනීම.
View Example : www.chikugossip.noads.biz/ajax2/ajax-sam2.html
Download Sample_2.zip 




ajax-sam2.html   file එකේ coding  එක.


<html>
<head>
<title>Ajax Sample2 - Chiku Gossips</title>
<script type="text/javascript" src="ajax2.js"></script>
</head>

<body>
<h1>Chaining Combo Boxes (Menu/List)</h1>
<h3>Send Value by Selecting Menu item  and Fill another Menu</h3>

<table width="905" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="173" align="left">Select Route First : </td>
    <td width="192" align="left"><select name="route" id="route" onChange="grabData(this.value)">
      <option selected value="3" style="font-weight:bold">Select Route</option>
      <option value="0">Kelaniya</option>
      <option value="1">Kiribatgoda</option>
      <option value="2">Kadawata</option>
    </select></td>
    <td width="154" align="left">Select Customer then :</td>
    <td width="386" align="left"><div id="cust" ></div></td>
  </tr>
</table>


</body>
</html>

ajax2.js  file එකේ coding  එක. 


var myObj =false; // Define XMLHttpRequest Object and Initilized to false
if(window.XMLHttpRequest){
    myObj=new XMLHttpRequest(); // for Mozilla Firefox
}else if(window.ActiveXObject){
    myObj=new ActiveXObject("Microsoft.XMLHTTP"); // for Internet Explorer
}

function grabData(val){

  if( myObj){ // check myObj is true or not
   
    var source='grabData2.php?val='+val+"&u="+Math.random();  // php file at the server
    myObj.open('GET',source);   //open XMLHttpRequest Object
    myObj.onreadystatechange=function(){
       
        if(myObj.readyState == 4 && myObj.status == 200){
            document.getElementById('cust').innerHTML=myObj.responseText;
            }
        }
        myObj.send();
  }
}



grabData2.php file එකේ coding  එක.  



<?PHP
$i=0;
$route=$_GET['val'];

$custArr=array();
$custArr[0]=array('Gamage','Sarath','Kapila','Kelum','Anoma');
$custArr[1]=array('Srithunga','Kamalsiri','Premasiri','Karunathilaka','Sepalika');
$custArr[2]=array('Saumya','Asha','Piyadasa','Ganegama','Sumathipala');


if ($route <3){
    echo("<select><option selected style='font-weight:bold'>Select Customer</option>");
    for($i=0;$i<count($custArr[$route]);$i++){
        echo("<option value='".$i."'>".$custArr[$route][$i]."</option>");
    }
    echo("</select>");
}
?>


-------------//--------------
 

No comments:

Post a Comment