Mahir Yılmaz | Kişisel Web Günlüğü Php Programmer » combox http://www.mahiryilmaz.com Yeniden başlıyor hayat :) Öyle işte :) Wed, 12 Oct 2011 16:12:56 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Ajax ile üst kategoriyi seçince alt kategoriler listelenmesi http://www.mahiryilmaz.com/ajax-ile-ust-kategoriyi-secince-alt-kategoriler-listelensin/ http://www.mahiryilmaz.com/ajax-ile-ust-kategoriyi-secince-alt-kategoriler-listelensin/#comments Sat, 21 Feb 2009 15:35:48 +0000 admin http://www.mahiryilmaz.com/?p=180 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.

]]> http://www.mahiryilmaz.com/ajax-ile-ust-kategoriyi-secince-alt-kategoriler-listelensin/feed/ 3