Ajax ile üst kategoriyi seçince alt kategoriler listelenmesi

Kategori: (Web Programlama) Yazan: admin, 21-02-2009

Etiketler : , ,

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);

    1. 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.
    2. 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ı.
    3. işlemi hangi dosyamızın yapacağıdır.
    4. 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.

Yorumlar:

Ajax ile üst kategoriyi seçince alt kategoriler listelenmesi yazısına 3 Yorum ”


  1. Güzel bir örnek olmuş fakat eyceks kütüphanesi kararlı bir yapıda değil. Daha önce farklı projelerde denemiştim ve sorun yaratmıştı. Onun yerine Jquery’i tavsiye ederim.

    Tekrardan ellerine sağlık.


  2. güzel olmuş elinize sağlık …


  3. Birde Şu anlattıklarınızı Alk kısımda Download edebilsek calısır halini çok güzel olacak

    okadar anlatmışsın belliki başarmışsın yazıp cizmişsin bide çalışır vaziyette yayınlasanda insalar alıp incelese

Yorum Yazın

15 + 1 = ? (İşleminin Sonucu)