Bu örnekte Ajax ve PHP kullanarak bir liste kutusundan kategori seçip, yanındaki diğer kutunun içeriğini doldurmaya yarayan bir uygulamayı sizlerle paylaşmak istiyorum. Bir firmaya web sitesi hazırlarken benden böyle çalışan bir form yapmam istenmişti. Bende özellikle donanım sitelerinde gördüğüm bu uygulamayı nasıl yapacağım hakkında araştırma yapmaya başladım. Bulduğum örnekler oldukça yetersiz ve kısıtlıydı (hala da öyle). Aradığım sisteme en uygun örneği DHTMLGoodies adlı sitede buldum. Sitedeki örnek oldukça basit çaplı ve sadece 2 kutudan oluşuyordu. İlkten bu örneği inceleyip nasıl çalıştığını çözdükten sonra kendi projem için oldukça kapsamlı bir hale getirdim. Sadece listbox değil , combobox ve textbox da kullanmam gerekti. Sizler için hazırladığım örnekte ise 3 tane kutu kullandım ve mysql veritabanından verileri okuyan bir örnek uygulama yaptım.

Örnek Uygulamayı görmek için Tıklayınız / Click here for Demo

Uygulamanın nasıl çalıştığından da kısaca bahsetmek istiyorum.

<script type=”text/javascript” src=”ajax.js”></script>

Ajax dosyamızı belgemize dahil ettikten sonra, kutuların ne işlem yapacağını belirlemek için kendimiz fonksiyonlar hazırlıyoruz. Ben getAnaGrup adında bir fonksiyon kullandım. Bu fonksiyonda ürün grubu kutusundan seçtiğimiz karegorinin id numarasını alıp,

ajax.requestFile = ‘gruplar.php?islem=anagrup&id=’+anagrup_id;

gruplar.php dosyasına gönderiyoruz. Gruplar.php dosyasından da gelen id ve iÅŸlem türüne göre veritabanından sorgu yapıyoruz. Ä°ÅŸlem “anagrup” olursa baÅŸka bir sorgu, “altgrup” olursa baÅŸka bir sorgu çalışıyor.

$query2 = mysql_query(”SELECT * FROM altgrup WHERE anagrup_id = ‘$id’ “);
while ($row2 = mysql_fetch_assoc($query2))
{
echo “obj.options[obj.options.length] = new Option(’”. $row2[’isim’].” ‘,’”. $row2[’id’].”‘);\n”;
}

Gelen sonuçları echo komutu kullarak üstte görüldüğü şekilde yazdırıyoruz. Tabi bu ekrana basmıyor. Kod arka tarafta bu işlemi yaptıktan sonra

ajax.onCompletion = createAnaGrup;

komutu ile gelen sonuçları diğer kutumuza yazdırmak için başka bir fonksiyona gönderiyoruz.

function createAnaGrup()
{
var obj = document.getElementById(’altgrup’);
eval(ajax.response); // Executing the response from Ajax as Javascript code
}

Bu fonksiyon da ismi “altgrup” olan kutumuzun içine, gruplar.php den gelen sonuçları yazdırıyor. Böylece ilk kutumuzu seçtiÄŸimiz kategoriye göre ait verilerle doldurmuÅŸ olduk. Bir sonraki kutuyu doldurmak istersek; 2. kutumuzdan seçtiÄŸimiz kategoriye göre ajax sorgusu göndermek ve bir de gelen sonuçları kutumuza doldurmak için 2 fonksiyona daha ihityacımız var. Örnek kodları incelediÄŸinizde daha da iyi anlayacaksınız.

Bu sistemi yalnızca liste kutularının doldurmak için yapmak zorunda değilsiniz. ComboBox yada başka form elemanları da kullanabilirsiniz. Sizin tercihinize ve yaptığınız uygulamanın ihtiyaçlarına kalmış.

Örnek Dosyalar / Example Files

Herkese iyi çalışmalar…

Toplam Okunma: 157 | Bugünkü Okuma : 2 | En Son Okunma: 16.05.2008 - 06:11