Şub
Ajax ile üst kategoriyi seçince alt kategoriler listelenmesi
Kategori: (Web Programlama) Yazan: admin, 21-02-2009
Etiketler : ajax, combox, php
Bir arkadaşımın isteği üzerine ajax ile üst kategoriyi seçtiğimizde alt kategorilerin listelenmesi uygulamasını basitçe sizlerle paylaşıyorum. İşlem oldukça basit aslında. Şimdi görünce gerçekten basit olduğuna sizde karar vereceksiniz 
Bu uygulamada Eburhan’ın eyceks kütüphanesini kullandım. Bu kütüphane ile istediğiniz her türlü ajax uygulamasını başarıyla yapabilirsiniz yeterki isteyin. Şimdi gelelim kodlarımızı anlatmaya.
<html>
<head>
<title>Ajax ile secmece</title>
</head>
<body>
<script type=”text/javascript” src=”ajax/eyceks.js”></script>
<script type=”text/javascript”>
function islemyap(deger){
JXP(0, “sonuc_goruntulenen_yer”, “islem.php”, “kategori=”+deger);
}
</script>
<form action=”javascript:void(0)” method=”post”><table>
<tr>
<td>Kategori</td>
<td width=”1″>:</td>
<td><select name=”kategori” onChange=”islemyap(this.value)”>
<option>Bir Kategori Secin</option>
<option value=”1″>Kategori 1</option>
<option value=”2″>Kategori 2</option>
<option value=”3″>Kategori 3</option>
</select>
</td>
</tr>
<tr>
<td>Alt Kategori</td>
<td width=”1″>:</td>
<td>
<div id=”sonuc_goruntulenen_yer”></div>
</td>
</tr>
</table></body>
</html>
index.php dosyamız gördüğünüz kodlardan ibarettir. Uygulamamızın önemli yerlerini teker teker anlatayım.
- <script type=”text/javascript” src=”ajax/eyceks.js”></script> ile Eburhan eyceks.js dosyamızı içeri çekiyoruz buna mecburuz Onsuz hayat dünüşünelemez
- function islemyap(deger){
JXP(0, “sonuc_goruntulenen_yer”, “islem.php”, “kategori=”+deger);
}
islemyap fonksiyonumuz kullanıcı kategoriyi seçtiği anda (onChange=”islemyap(this.value)”) işleme başlar. Burda önemli kısım JXP(); fonksiyonudur.
JXP(1, 2, 3, 4);- numaralı değer işlem yapılırken kullanıcıya işlemin yapılıyor olduğunu gösterip göstermemeye yarar. Alabileceği 2 değer vardır 0 ve 1. 0 iken işlem yapılırken kullanıcı hiçbirşey görmez. 1 degerinde ise işlem yapılırken yükleniyor resmi ekrana çıkar.
- işlem sonucunun sayfada nereye yazılacağını gösterir. <div id=”sonuc_goruntulenen_yer”></div> gördüğünüz gibi buraya bastırıyoruz sonuçlarımızı.
- işlemi hangi dosyamızın yapacağıdır.
- işlemi yapacak olan dosyamıza gönderdiğimiz değişkenlerdir.
- <select name=”kategori” onChange=”islemyap(this.value)”> yukarda da söylediğimiz gibi kullanıcı kategoriyi seçince işlem başlayacaktır.
- <div id=”sonuc_goruntulenen_yer”></div> islem sonucunun yazdırılacağı alan
Dosyalarımızda birde islem.php var. Bunu anlatmaya gerek görmüyorum basitçe switch döngüsünü kullandım o kadar Açıp bakan herkes rahatça anlayabilir.
Uygulamamızın çalışır durumunu görmek için buraya , indirmek içinde buraya tıklayınız.
