Ajax İle Filtreleme

[wmismail]

Dosyalar

Bu uygulamada anasayfayı oluşturan index.php, filitrelemenin yapıldığı filitrele.php, oyuncuların özelliklerini göstermek istediğim oyuncu.php dosyası ve eyceks kütüphanesi içindeki dosyalar (loading.gif , eyceks.js) bulunmaktadır .

Başlıyoruz . . .

İlk olarak uygulamamıza filitrenin nasıl edileceği konusunda karar vermemiz lazım. Bu uygulamada aynı zamanda ajax'te Dinamik Formları da kullanmış olacağım. Biliyorsunuz ajax'in diğer bir güzel özelliği ise Dinamik Formlar'dır. Dinamik formdan kastım isteğimize o anda karşılık verecek olan formlarlardır. Dinamik formlarla ilgili AJAX Ne Gibi Durumlarda Kullanılmalı? başlıklı yazıya da bakabilirsiniz. Neyse konuyu fazla uzatmadan hemen ilk bölüme geçiyorum.

Filitreleme formumuz :

<form id="form1" name="form1" method="post" action="java script:void(0)">

<select name="takimlar" onchange="hangi_takim()">
<option value="0">Takımlar</option>
<option value="1">Galatasaray</option>
<option value="2">Fenerbahçe</option>
<option value="3">Beşiktaş</option>
</select>
 </form>[/CODE]

Şimdi bu formu eyceks kütüphanesi ile filitre.php'ye göndermek istiyorum. Hepimiz eyceks kütüphanesinin nasıl çalıştığını biliriz. Bunu da ek olarak yazayım.

[b]Eyceks ile filitre.php ye gönderme : [/b]

[CODE]function hangi_takim(){

var takimlar = document.form1.takimlar.value

var sc = 'takimlar='+ fc_(takimlar)

JXP(1, 'takim_goster', 'filitrele.php', sc)

}[/CODE]

Evet şimdi sıra sistemden herhangi bir takımı seçtiğimizde bize o takımın oyuncularından bazılarını nasıl getirebileceğimizde. Bu iş filitre.php'de bitiyor tabii ki. Ben oyuncuları gosterdikten sonra bir kez daha o oyuncular arasından seçim yaptırarak oyuncu hakkında kısa ve öz bir bilgiyi ekranda göstermek istiyorum. Onun için filitre.php'de de biraz farklılık yapacağım.

[b]filitre.php dosyasındayız :[/b]

[CODE]<?
$takim= $_POST['takimlar'];
?>

<form id="form2" name="form2" method="post" action="java script:void(0)">

<?
if($takim==1){
?>

<select name="oyuncular" onchange="hangi_oyuncu()">
<option value="">Oyuncu Seciniz..</option>
<option value="1">Necati Ates</option>
<option value="2">Hakan Sukur</option>
<option value="3">Umit Davala</option>
</select>

<?
}elseif($takim==2){
?>

<select name="oyuncular" onchange="hangi_oyuncu()">
<option value="">Oyuncu Seciniz..</option>
<option value="1">Appiah </option>
<option value="2">Serkan</option>
<option value="3">M.Yozgatli</option>
</select>

<?
}elseif($takim==3){
?>

<select name="takimlar" onchange="hangi_oyuncu()">
<option value="">Oyuncu Seciniz..</option>
<option value="1">Vedran Runje</option>
<option value="2">Jose Kleberson Pereira</option>
<option value="3">Deivson Rogerio Da Silva</option>
</select>

<?
}elseif($takim=="0"){echo "<font color=\"blue\">Herhangi Bir Takim Secmediniz !</font>";

} else {echo "<font color=\"red\"><b>Hata ! </b></font>"; }
?>

</form>[/CODE]

filitre.php'de ise şu şekilde bir olay izledim. 1. Takımı seçerse şu futbolcuları sırala, 2. takımı seçerse şu futbolcuları sırala tarzında. Yine üzerine bastırarak belirtmek istiyorum. Amaç sadece mantık. İşin içine veritabanı da girince inanılmaz güzel, zevkli ve estetik hale getirebilirsiniz olayı.

filitre.php'de dikkat etmeniz gereken olay şu. Benim 3. bir aşama daha istemem. Yani Oyuncular hakkında kısa ve öz bir bilgi. Onun için tüm forumları ilk formumuz gibi düzenledim filitre.html içine çağırdıgımızda eyceks ile yine kodlar çalıştıracağız. Bu formların OnChange özelliğine dikkat edin ." hangi_oyuncu() " Görüyorsunuz değıl mi? Şimdi filitre.html de hangi_takim() altına bir de hangi_oyuncu() fonksiyonu yazmamız lazım. O da şu şekilde olacak:

[CODE]hangi_oyuncu() fonksiyonu :
function hangi_oyuncu(){

var oyuncular = document.form2.oyuncular.value

var sc = 'oyuncular='+ fc_(oyuncular)

JXP(1, 'oyuncu_goster', 'oyuncu.php', sc)

}[/CODE]

İşte bu fonksiyonu aynı javascript bloğumuz içine yazıyoruz Çağırdığımızda ise eyceks kütüphanesini kullananların bildiği gibi oyuncu.php'nin çıktısı, ID'si "oyuncu_goster" olan bir DIV alanının içerisine yazdırılacak.

[b]oyuncu.php dosyası : [/b]

[CODE]<?
$oyuncu= $_POST['oyuncular'];
?>

<?
if($oyuncu==1){
?>

Bu Seçtiğiniz Oyuncu 1 numaralı bir oyuncudur.

<?
}elseif($oyuncu==2){
?>

Siz şimdi 2 numaralı oyuncuyu seçtiniz.

<?
} else if ($oyuncu==3){
?>

3 Numaralı oyuncuyu seçtiniz !

<?

}elseif($oyuncu=="0"){echo "<font color=\"blue\">Herhangi Bir Takim Secmediniz !</font>";

}else{echo "<font color=\"red\"><b>Hata ! </b></font>"; }

?>[/CODE]

[/left]