PHP ve Ajax Select Box (Ajax Chained Boxes)

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

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,
ajaxrequestFile ‘gruplarphp?islem anagrup&id ’+anagrupid;
gruplarphp dosyasına gönderiyoruz Gruplarphp 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 mysqlquery(“SELECT * FROM altgrup WHERE anagrupid ‘$id’ “);
while ($row2 mysqlfetchassoc($query2))

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
ajaxonCompletion createAnaGrup;
komutu ile gelen sonuçları diğer kutumuza yazdırmak için başka bir fonksiyona gönderiyoruz
function createAnaGrup()

Bu fonksiyon da ismi “altgrup olan kutumuzun içine, gruplarphp 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…