Ana Sayfa   Weblog   Realtime   Galeri   Arşiv   İletişim-Referanslar

Sayfa Yükleniyor...
  Merhaba , kişisel weblog alanıma hoşgeldiniz...  
 
    AJAX ile Dinamik Select Menüsü I 22 Haziran, Perşembe 2006    
 

Turk-PHP FORUM 'da bir script görüp denemek istedim, koca bir hata deposuydu. Düzenledim ve çalışır halini paylaşmak istedim.
İller ve İlçeler tablolarımız var. İlimizi seçince dinamik olarak ilçeler menümüz oluşuyor.

Tablolar ile başlayalım:
»Yeniden düzenlediğim tabloları buradan indirebilirsiniz.

 Bir veritabanında bu sorguları çalıştırıp gerekli tabloları yarattıktan sonra , 2 adet dosyamız var. Bir tanesi bizim html kodumuz arasında yer alacak bölüm, diğeri AJAX vasıtasıyla , xml kullanarak çağırdığımız dosyamız: ilce_sorgula.php

<?php
mysql_connect("localhost","root","") || die ("OoopsI: ".mysql_errno() ." : " .mysql_error()." !!!");
                   mysql_select_db("test") || die ("Ooops: " .mysql_errno() ." : " .mysql_error()." !!!");
                  @mysql_query ("SET NAMES 'latin5' ");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>İLE GÖRE İLÇELER</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-9" />

<script language="javascript"  type="text/javascript">
var http = getHTTPObject(); // HTTP Nesnesi Oluşturuluyor
//Sonuçları Alan Fonksiyon
function handleHttpResponse()
{
  if (http.readyState == 1)
        {
          document.getElementById('mesaj').innerHTML = 'Sorgu Tamamlanıyor ...';
        } else if (http.readyState == 4) {
    if (http.status == 200)
    {
      //XML Verileri Alınıyor
      var xmlDocument = http.responseXML;
      var etiketadi       = xmlDocument.getElementsByTagName('ilce');
      //XML İlçeler Sayısını Alıyoruz
      var ilce_sayi   = etiketadi.length;
      if (ilce_sayi>0)
      {
        var ilce_secim_kutusu = document.getElementById("ilceler");
       
        var ilce_no;
        var ilce_adi;
        var i;
        ilce_kutu_temizle(ilce_secim_kutusu);
        ilce_kutu_olustur(ilce_secim_kutusu,'İlçe Seçiniz','');
                               
        for (i=0; i< ilce_sayi; i++)
        {
          ilce_adi  = etiketadi.item(i).getAttribute('ilceadi');
          ilce_no   = etiketadi.item(i).getAttribute('ilceno');
          ilce_kutu_olustur(ilce_secim_kutusu,ilce_adi,ilce_no);
        }
      }
                        document.getElementById('mesaj').innerHTML = 'İşlem Tamamlandı';
    } else {
      document.getElementById('mesaj').innerHTML = 'Hata Oluştu';
    }      
  }
}
//XML Sayfasından Gelen İlçeleri Seçim Kutusuna Gönderen Fonksiyon
function ilce_kutu_olustur(ilce_secim_kutusu,isim,deger)
{
  var new_option   = document.createElement('option');
  new_option.text  = isim;
  new_option.value = deger;
                  
  try {
    ilce_secim_kutusu.add(new_option, null);
  } 
  catch(ex) {
    ilce_secim_kutusu.add(new_option);
  }
}

function ilce_kutu_temizle(xmlkok_etiket)
{
  while (xmlkok_etiket.length > 0)
  {
    xmlkok_etiket.remove(0);
  }
}

//İstekte Bulunan Fonksiyon
//İl Numarası XML Sayfasına Gönderiliyor
function ilceleri_getir()
{
  var iller = document.getElementById("iller");
        var ilno  = iller.options[iller.selectedIndex].value;
  http.open("POST", 'ilce_xml.php', true);
  http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=iso-8859-9');
  http.onreadystatechange = handleHttpResponse;
  http.send("ilno="+ilno);
}

function getHTTPObject()
{
  var retval=null;
  try
  {
    retval=new ActiveXObject("Msxml2.XMLHTTP");
  }
  catch(e)
  {
    try
    {
      retval=new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch(oc)
    {
      retval=null;
    }
  }

  if(!retval && typeof XMLHttpRequest != "undefined")
  {
    retval=new XMLHttpRequest();
  }
  return retval;
}

İşte AJAX 'ın sevmediğim hantallığı. Halbuki php de herşey ne kadar kısaltılabiliyor (tabi iyice öğrendikten sonra) Gördüğünüz üzere Javascript fonksiyonlarımızı yazıyoruz. Bu kadar fonksiyon mu çalıştıracak scriptimizi, tabiki hayır Surprised

</script>
</head>
<body>

<table align="center" width="300">
<form action="post">
<tr>
<td width="50%" align="center">
<b>İller</b><br />
<select name="iller" id="iller" size="1" onChange="ilceleri_getir();"  />
<option value="">Bir İl seçiniz</option>
<?php
//İLLER SEÇİM KUTUSU
//include_once("baglan.php");
$sql   = "SELECT city_id,city_name FROM iller ORDER BY city_id ASC";
$sonuc = mysql_query($sql);
$sayi  = mysql_num_rows($sonuc);
while ($satir = mysql_fetch_array($sonuc))
{
  $ilno   = $satir["city_id"];
        $iladi  = $satir["city_name"];
  echo ' <option value="'.$ilno.'">'.$iladi.'</option>';
}
mysql_free_result($sonuc);
?>
   </select>
      </td>
      <td width="50%" align="center"><b>İlçeler</b><br />
        <select name="ilceler" id="ilceler" size="1" />
       
        <option value="">İlçe Seçiniz</option>
        </select>
      </td>
    </tr>
    <tr>
      <td colspan="2" align="center"><label id="mesaj">Bir İl Seçiniz</label>
      </td>
    </tr>
    <tr>
      <td colspan="2" align="center"><!--<input type="button" value="İLÇELERİ GETİR" onClick="ilceleri_getir();"  />-->
      </td>
    </tr>
  </form>
</table>
</body>
</html>

<!-- Devamı 2. Bölümde ;) -->
 
     
  EkleBunu Sosyal Paylaşım Butonu  
 
Henüz yorum yapılmamış.
 
   
blank
Arama İpucu
blank
  Temel Kaynaklar
  •  Giriş
  •  Üyelik
  •  
  • Arşiv Arşiv
  • RSS 2.0 RSS
  • Smart RSS Smart RSS
  •  
  •   Add to Technorati Favorites
blank
  Kategoriler
blank
  Tavsiye Linkler