Ajax + PHP + mySQL: 3lü Select

[ayturka.com]

selam arkadaslar,

ajax VE php ile su sorunun cözmek istiyorum:

[il sec] --sectikten hemen sonra ajax ile--> [ilce sec] --sectikten hemen sonra ajax ile--> [mahalle sec]

il sectikten sonra mySQL'den secilen il'e bagli ilceler SELECT kutusuna alinacak.
ilce sectikten sonra mySQL'den secilen ilceye bagli mahalleler SELECT kutusuna alinacak.

ajax ile buna benzer bir örnek var mi acaba?

yardimlariniz icin simdiden tesekkürler,

[mcwebteam]

@ayturka.com  proje dosyanı paylaşda beraber yapalım, projeni.

sitede ajax uygulama anlatımıyla ilgili yazı mevcut hatta makaleler kısmında da makale mevcut  Arama Yapalım.

[ayturka.com]

ilce_xml.php

Kod:

<?php
ob_start();
header("Cache-Control: no-cache");
$dbHost = "localhost";
$dbUser = "root";
$dbPass = "************";
$dbName = "*******";
$connect = @mysql_connect($dbHost, $dbUser, $dbPass) or die("Konnte keine Verbindung zum Datenbankserver aufbauen!");
$selectDB = @mysql_select_db($dbName, $connect) or die("Konnte die Datenbank <b>$dbName</b> nicht auswählen!");
header('Content-Type: text/xml');
echo "<?xml version='1.0' encoding='iso-8859-9' standalone='yes'?>";
echo '<ilcelerxml etiketadi="ilce">';
//POST Metoduyla Gelen &#221;l Numaras&#253;n&#253;n Al&#253;m&#253;
@ $ilno = intval($_POST['ilno']);
if ($ilno)
{
//Veritaban&#253;ndan &#221;le Göre &#221;llerin Çekilmesi
$ilceler_sql = mysql_query("SELECT ilce_id,ilce_ad FROM list_ilceler_tr WHERE il_id=$ilno");
$sayi = mysql_num_rows($ilceler_sql);
if ($sayi > 0)
{
while($ilce = mysql_fetch_object($ilceler_sql))
{
$ilceno  = $ilce->ilce_id;
$ilceadi = $ilce->ilce_ad;
echo '<ilce ilceno="'.$ilceno.'" ilceadi="'.$ilceadi.'" />';
}
}
else
{
echo '<ilce ilceno="'.$ilceno.'" ilceadi="İlçe Bulunamadı" />';
}
}
echo '</ilcelerxml>';
?>

javascript.php

Kod:

<script language="javascript"  type="text/javascript">
var http = getHTTPObject(); // HTTP Nesnesi Olu&#254;turuluyor
//Sonuçlar&#253; Alan Fonksiyon
function handleHttpResponse()
{
  if (http.readyState == 1)
{
  document.getElementById('mesaj').innerHTML = 'Sorgu Tamamlan&#253;yor ...';
} else if (http.readyState == 4) {
    if (http.status == 200)
    {
      //XML Verileri Al&#253;n&#253;yor
      var xmlDocument = http.responseXML;
      var etiketadi   = xmlDocument.getElementsByTagName('ilce');
      //XML &#221;lçeler Say&#253;s&#253;n&#253; Al&#253;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,'&#221;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 = '&#221;&#254;lem Tamamland&#253;';
    } else {
      document.getElementById('mesaj').innerHTML = 'Hata Olu&#254;tu';
    }    
  }
}
//XML Sayfas&#253;ndan Gelen &#221;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);
  }
}

//&#221;stekte Bulunan Fonksiyon
//&#221;l Numaras&#253; XML Sayfas&#253;na Gönderiliyor
function ilceleri_getir()
{
  var iller = document.getElementById("iller");
var ilno  = iller.options[iller.selectedIndex].value;
  http.open("POST", 'ajax/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;
}
</script>

index.php

Kod:

<? include ("javascript.php"); ?>
<select id="iller" name="iller" size="1" class="form" style="width:100%;" onchange="ilceleri_getir()">
<option value="">İl Seçiniz</option>
<?php
//&#221;LLER SEÇ&#221;M KUTUSU
$sql   = "SELECT il_id,il_ad FROM list_iller_tr ORDER BY il_ad ASC";
$sonuc = mysql_query($sql);
$sayi  = mysql_num_rows($sonuc);
while ($satir = mysql_fetch_array($sonuc))
{
  $ilno   = $satir["il_id"];
$iladi  = $satir["il_ad"];
  echo '<option value="'.$ilno.'">'.$iladi.'</option>';
}
mysql_free_result($sonuc);
?>
</select>

<select id="ilceler" name="ilceler" size="1" class="form" style="width:100%;">
<option value="">İlçe Seçiniz</option>
</select>

<select id="mahalle" name="mahalle" size="1" class="form" style="width:100%;">
<option value="">Mahalle Seçiniz</option>
</select>

[mcwebteam]

gönderdiğin kodlarda çalışmayan nokta neresi?
şöyle bir gözattımda bir hataya rastlamadım. sanırım bir eksik noktası var istediğinize göre oda o ilçeye ait mahalle kısmı.
yanılıyormuyum?

[ayturka.com]

aynen...
buraya kadar hepsi tamam, süper calisiyor...
ama simdi ilcelere göre mahalle secimini nasil yapacagim?

ufak bir iki fikir toplayabilsem baslayacagim...

[mcwebteam]

ilce_xml.php

Kod:

<?php
ob_start();
header("Cache-Control: no-cache");
$dbHost = "localhost";
$dbUser = "root";
$dbPass = "************";
$dbName = "ilceler";
$connect = @mysql_connect($dbHost, $dbUser, $dbPass) or die("Konnte keine Verbindung zum Datenbankserver aufbauen!");
$selectDB = @mysql_select_db($dbName, $connect) or die("Konnte die Datenbank <b>$dbName</b> nicht auswählen!");
header('Content-Type: text/xml');
echo "<?xml version='1.0' encoding='iso-8859-9' standalone='yes'?>";

//POST Metoduyla Gelen &#221;l Numaras&#253;n&#253;n Al&#253;m&#253;
if (isset($_POST['ilno'])) {

echo '<ilcelerxml etiketadi="ilce">';
@ $ilno = intval($_POST['ilno']);
if ($ilno)
{
   
//Veritaban&#253;ndan &#221;le Göre &#221;llerin Çekilmesi
$ilceler_sql = mysql_query("SELECT ilce_id,ilce_ad FROM list_ilceler_tr WHERE il_id=$ilno");
$sayi = mysql_num_rows($ilceler_sql);
if ($sayi > 0)
{
while($ilce = mysql_fetch_object($ilceler_sql))
{
$ilceno  = $ilce->ilce_id;
$ilceadi = $ilce->ilce_ad;
echo '<ilce ilceno="'.$ilceno.'" ilceadi="'.$ilceadi.'" />';
}
}
else
{
echo '<ilce ilceno="'.$ilceno.'" ilceadi="İlçe Bulunamadı" />';
}

}
echo '</ilcelerxml>';
}

if (isset($_POST['ilceno'])) {
    echo '<mahellexml etiketadi="mahelle">';
@ $ilceno = intval($_POST['ilceno']);
if ($ilceno)
{   
   
//Veritaban&#253;ndan &#221;le Göre &#221;llerin Çekilmesi
$mahalleler_sql = mysql_query("SELECT mah_id,mah_ad FROM list_mahalle_tr WHERE ilce_id=$ilceno");
$sayi = mysql_num_rows($mahalleler_sql);
if ($sayi > 0)
{
while($ilce = mysql_fetch_object($mahalleler_sql))
{
$mahno  = $ilce->mah_id;
$mahadi = $ilce->mah_ad;
echo '<mahelle mahno="'.$mahno.'" mahadi="'.$mahadi.'" />';
}
}
else
{
echo '<mahelle mahno="'.$mahno.'" mahadi="Mahelle Bulunamadı" />';
}


}
echo '</mahellexml>';
}
?>

javascript.php

Kod:

<script language="javascript"  type="text/javascript">
var http = getHTTPObject(); // HTTP Nesnesi Olu&#254;turuluyor
//Sonuçlar&#253; Alan Fonksiyon

function handleHttpResponseSecond()
{
  if (http.readyState == 1)
{
  document.getElementById('mesaj').innerHTML = 'Sorgu Tamamlanıyor ...';
} else if (http.readyState == 4) {
    if (http.status == 200)
    {
     
      //XML Verileri Al&#253;n&#253;yor
      var xmlDocument = http.responseXML;
     
        var etiketadi   = xmlDocument.getElementsByTagName('mahelle');
        //XML &#221;lçeler Say&#253;s&#253;n&#253; Al&#253;yoruz
        var mahelle_sayi   = etiketadi.length;
        if (mahelle_sayi>0)
        {
        var mahelle_secim_kutusu = document.getElementById("mahelle");
        var mah_no;
        var mah_adi;
        var i;
        mahelle_kutu_temizle(mahelle_secim_kutusu);
        mahelle_kutu_olustur(mahelle_secim_kutusu,'Mahelle Seçiniz','');

        for (i=0; i< mahelle_sayi; i++)
        {
          mah_adi  = etiketadi.item(i).getAttribute('mahadi');
          mah_no   = etiketadi.item(i).getAttribute('mahno');
          mahelle_kutu_olustur(mahelle_secim_kutusu,mah_adi,mah_no);
        }
        }
     
document.getElementById('mesaj').innerHTML = 'İşlem Tamamlandı';
    } else {
      document.getElementById('mesaj').innerHTML = 'Hata Oluştu';
    }    
  }
}

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&#253;n&#253;yor
      var xmlDocument = http.responseXML;
      var etiketadi   = xmlDocument.getElementsByTagName('ilce');
      //XML &#221;lçeler Say&#253;s&#253;n&#253; Al&#253;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&#253;ndan Gelen &#221;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);
  }
}
//&#221;stekte Bulunan Fonksiyon
//&#221;l Numaras&#253; XML Sayfas&#253;na Gönderiliyor
function ilceleri_getir()
{
  var iller = document.getElementById("iller");
  var ilno  = iller.options[iller.selectedIndex].value;
  http.open("POST", 'ajax/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  mahelle_kutu_olustur(mahelle_secim_kutusu,isim,deger)
{
  var new_option   = document.createElement('option');
  new_option.text  = isim;
  new_option.value = deger;
 
  try {
    mahelle_secim_kutusu.add(new_option, null);
  } 
  catch(ex) {
    mahelle_secim_kutusu.add(new_option);
  }
}

function mahelle_kutu_temizle(xmlkok_etiket)
{
  while (xmlkok_etiket.length > 0)
  {
    xmlkok_etiket.remove(0);
  }
}
function mahelle_getir()
{
    var ilceler = document.getElementById("ilceler");
    var ilceno  = ilceler.options[ilceler.selectedIndex].value;
    http.open("POST", 'ajax/ilce_xml.php', true);
    http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=iso-8859-9');
    http.onreadystatechange = handleHttpResponseSecond;   
    http.send("ilceno="+ilceno);
}


/*


*/
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;
}
</script>

index.php

Kod:

<? include ("javascript.php"); ?>


<select id="iller" name="iller" size="1" class="form" style="width:100%;" onchange="ilceleri_getir()">
<option value="">İl Seçiniz</option>
<?php
//&#221;LLER SEÇ&#221;M KUTUSU
$connect   = mysql_connect("localhost","root");
$select    = mysql_select_db("ilceler",$connect);
$sql   = "SELECT il_id,il_ad FROM list_iller_tr ORDER BY il_ad ASC";
$sonuc = mysql_query($sql);
$sayi  = mysql_num_rows($sonuc);
while ($satir = mysql_fetch_array($sonuc))
{
  $ilno   = $satir["il_id"];
$iladi  = $satir["il_ad"];
  echo '<option value="'.$ilno.'">'.$iladi.'</option>';
}
mysql_free_result($sonuc);
?>
</select>

<select id="ilceler" name="ilceler" size="1" onchange="mahelle_getir()" class="form" style="width:100%;">
<option value="">İlçe Seçiniz</option>
</select>

<select id="mahelle" name="mahelle" size="1" class="form" style="width:100%;">
<option value="">Mahalle Seçiniz</option>
</select>
<div id="mesaj"></div>

mahalleleri tutacağın kısmıda aynı dbye eklersin ilce_xml.php dosyasını incelersen hangi şekilde tablo oluşturacağını görebilirsin.

[ayturka.com]

süper! oldu! tesekkürler ve izmir'e bol bol selamlar;)

[busy]

sevgili ayturka bu kodlar çalıştı yani öyle mi?
bu konuda ben de takıldım
örneğin ili seçtikten sonra ilçeyi getirdik buraya kadar sorun yok
ilçeler tablomuz şöyle olsun

ilceler:
ilce_no       il_no     ilce_adi       nufusu

ben ilceler selectboxının altına bir textbox koyup il ve ilce secildikten sonra o ilceye ait nüfusun textbox a yazılmasını yapmak istiyorum
ne gibi bir sey önerirsiniz?

[vahapburhan]

Arkadaşlar banada böyle 3 aşamalı combo lazım.Kodları denedim bende de ili seçtikten sonra ilçeler gelmiyor.javascript.php içindeki ilce_sayi değişkenini şu şekilde yazdırıyorum

Kod:

document.getElementById('mesaj2').innerHTML = ilce_sayi;

   

ama sonuç 0 dönüyor.Ve ilce_xml.php ye de hiç gitmiyor?Kodları aynen kullandım bir değişikilkte yapmadım.Sorun ne olabilir?

Oluşturduğum Veri Tabanıda şöyle

Kod:

SET FOREIGN_KEY_CHECKS=0;
use ilceler;
#----------------------------
# Table structure for list_iller_tr
#----------------------------
CREATE TABLE `list_iller_tr` (
  `il_id` int(11) NOT NULL auto_increment,
  `il_ad` varchar(20) default NULL,
  PRIMARY KEY  (`il_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin5;
#----------------------------
# Records for table list_iller_tr
#----------------------------


insert  into list_iller_tr values
(1, 'Ankara'),
(2, 'Ad?yaman'),
(3, 'Afyon'),
(4, 'Elaz??'),
(5, '?stanbul'),
(6, 'Trabzon');
#----------------------------
# Table structure for list_ilceler_tr
#----------------------------
CREATE TABLE `list_ilceler_tr` (
  `ilce_id` int(11) NOT NULL auto_increment,
  `ilce_ad` varchar(35) default NULL,
  `il_id` int(11) default NULL,
  PRIMARY KEY  (`ilce_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin5;
#----------------------------
# Records for table list_ilceler_tr
#----------------------------


insert  into list_ilceler_tr values
(1, 'Eryaman', 1),
(2, 'Sincan', 1),
(3, 'Etimesgut', 1),
(4, 'Yenimahalle', 1),
(5, 'Elmada?', 1),
(6, 'Bala', 1),
(7, 'Ad?yaman_ilçe1', 2),
(8, 'Ad?yaman_ilçe2', 2),
(9, 'Ad?yaman_ilçe3', 2),
(10, 'Afyon_ilçe1', 3),
(11, 'Afyon_ilçe2', 3),
(12, 'Afyon_ilçe3', 3),
(13, 'Elaz??_ilçe1', 4),
(14, 'Elaz??_ilçe2', 4),
(15, 'Elaz??_ilçe3', 4);
#----------------------------
# Table structure for list_mahalle_tr
#----------------------------
CREATE TABLE `list_mahalle_tr` (
  `mah_id` int(11) NOT NULL auto_increment,
  `mah_ad` varchar(35) default NULL,
  `ilce_id` int(11) default NULL,
  PRIMARY KEY  (`mah_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin5;
#----------------------------
# Records for table list_mahalle_tr
#----------------------------


insert  into list_mahalle_tr values
(1, 'Eryaman_mah1', 1),
(2, 'Eryaman_mah2', 1),
(3, 'Eryaman_mah3', 1),
(4, 'Sincan_mah1', 2),
(5, 'Sincan_mah2', 2),
(6, 'Etimesgut_mah1', 3),
(7, 'Etimesgut_mah2', 3),
(8, 'Yenimahalle_1', 4),
(9, 'Yenimahalle_2', 4),
(10, 'Elmada?_mah_1', 5),
(11, 'Elmada?_mah2', 5),
(12, 'Bala_mah_1', 6),
(13, 'Bala_mah_2', 6),
(14, 'Ad?yaman_ilce1_mah_1', 7),
(15, 'Ad?yaman_ilce1_mah_2', 7),
(16, 'Elaz??_ilce_1_mah1', 13),
(17, 'Elaz??_ilce_1_mah2', 13);

[busy]

arkadaşım http://forum.ceviz.net/adres-t27465.html adresinde hunter ın yapmış olduğu güzel bir örnek var buradan bakabilirsin
bu arada benim soruma helen cevap çıkadı 

[vahapburhan]

Hocam sağol verdiğin linke baktım.Yalnız buradaki kodda dediğim gibi ilce_xml.php ye gitmiyor.Başına die yazmama rağmen devam ediyor.

Kod:

http.open("POST", 'ajax/ilce_xml.php', true);

bu koddamı bir hata var acaba.?Bu arada ilce_xml.php ajax klasörünün içinde orada sorun yok.

[busy]

arkadaşım tekrardan selam burdaki örnekte bazı eksikler var düzeltilmiş halini
http://www.azizce.com/arsiv/17-ajax-ile-dinamik-select-menusu-i.html adresinde 2 bölüm olrak anlatmış orada sql leri de var