Ajax İle Filtreleme
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 :
PLAIN TEXTPHP:
<form id="form1" name="form1" method="post" action="javascript: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>
Ş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.
Eyceks ile filitre.php ye gönderme :
PLAIN TEXTPHP:
function hangi_takim(){
var takimlar = document.form1.takimlar.value
var sc = 'takimlar='+ fc_(takimlar)
JXP(1, 'takim_goster', 'filitrele.php', sc)
}
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.
filitre.php dosyasındayız :
PLAIN TEXTPHP:
<?
$takim= $_POST['takimlar'];
?>
<form id="form2" name="form2" method="post" action="javascript: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>
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:
hangi_oyuncu() fonksiyonu :
PLAIN TEXTPHP:
function hangi_oyuncu(){
var oyuncular = document.form2.oyuncular.value
var sc = 'oyuncular='+ fc_(oyuncular)
JXP(1, 'oyuncu_goster', 'oyuncu.php', sc)
}
İş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.
oyuncu.php dosyası :
PLAIN TEXTPHP:
<?
$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>"; }
?>
Sonuç :
İşte birkez daha ajax ile php birleşince neler yapabiliyor bunu
gördük.
Anket
Son Konular
2012-03-22 19:47 - Geliştirdiğin kodları satmak ister misin
2012-02-12 23:21 - SMF forumu vbulletin foruma aktarmak
2011-12-14 21:50 - Motorlu araçlar otomobil vergisi sorgulama
2011-12-14 21:47 - Sorgulamalar
2011-12-11 14:33 - Ben az önce ne arayacaktım
2011-09-10 22:51 - DSLR Fotograf Makinası sınıflandırması
2011-09-09 17:33 - ‘Crop Factor’ Nedir, hakkında bilgi
2011-09-09 17:30 - Fotograf Rehberi
2011-08-20 21:30 - Samsung LEDTV'lerde .SRF ve XFS süprizi
2011-08-19 00:45 - 2011 yılının web tasarım trendleri
2011-04-09 20:18 - Alan adları gerçek isim sahiplerine verilecek!
2011-01-13 01:43 - SEO İçin Dikkat Edilmesi Gereken Hususlar
2011-01-13 01:42 - Meta tag SEO Optimization
2011-01-13 01:41 - Google Adsense Hakkında Detaylı Bilgi
2011-01-13 01:40 - Soru Ve Cevaplar ile Google Adsense
2011-01-13 01:39 - Arama motoru Google ve Pagerank
2011-01-13 01:38 - Seo Sözlüğü
2011-01-13 01:37 - Google Arama Özellikleri
2011-01-13 01:36 - Adsense Reklam Yerleşimi
2011-01-13 01:35 - Robots.txt Dosyası Kullanım Robotları Yölendirme Kontrol
2011-01-13 01:34 - Sitenizin Google ve Web deki Yeri
2011-01-13 01:33 - Arama Motoru Bilgi ve İpuçları
2011-01-13 01:31 - Arama Motorları Teknikleri
2011-01-13 01:29 - Google Pagerank Detaylı Anlatım
2011-01-13 01:27 - Sitenize Ziyaretçiler En Çok Hangi Kelimeler İle Gelmiş
2011-01-13 01:25 - Pagerank Nedir?
2011-01-13 01:19 - Fireworks Shadow and Glow
2011-01-13 01:18 - Fireworks Sharpen
2011-01-13 01:16 - Fireworks Other
2011-01-13 01:13 - Fireworks Blur
2011-01-13 01:09 - Fireworks Bevel and Emboss
2011-01-13 01:05 - Fireworks Adjust Color
2011-01-13 01:03 - Fireworks Save as Style
2011-01-13 00:58 - Fireworks Text Menüsü
2011-01-13 00:54 - Fireworks Select Menüsü
2011-01-13 00:54 - Fireworks Modify Menüsü
2011-01-13 00:51 - Fireworks View Menüsü
2011-01-13 00:18 - Fireworks Edit Menüsü
2011-01-13 00:16 - Fireworks File Menüsü
2011-01-13 00:05 - İnternet - Web Tarayıcılar (Browser)
2011-01-13 00:04 - İnternet - Web Server Yazılımları
2011-01-13 00:03 - İnternet ve Web İlişkisi
2011-01-13 00:02 - İnternette Kullanılan Protokoller
2011-01-13 00:01 - İnternet - World Wide Web (WWW) Nedir?
2011-01-13 00:00 - İnternet - URL nedir?
2011-01-12 23:43 - İnternet Backorder Nedir?
2011-01-12 23:34 - İnternet - Virüs Nedir?
2011-01-12 23:32 - İnternet Paypal nedir? Nasıl Kullanılır?
2011-01-12 23:31 - İnternet - DNS Nedir?
Günün Konuları
c# . javascript . C . xmlhttprequest . xml . xmlhttprequest nedir . c# ile yazma . c# kod çalıştırma . while . c# kodları . integer . c# string . c# tipler . value . type . reference type . console . const . decimal . boolean . writelene . printf . include . scanf . ajax nedir . http . http istemleri . ajax örneği . ajax tarayıcı desteği . activexobject . ajax ile sunucuya istek göndermek . null . showhint . getxmlhttpobject . statechanged . ajax php örneği . ajax asp örneği . ajax html sayfası . c# doğuşu . c# programlama sanatı . c# atama işlemleri . c# kuralları . c# türlerin tanımlanması . int . programlama . c# program kodları . c# döngü . c# ile ekrana yazı yazdırmak . c# aritmetik . c# operatörler . c# int . casting . byte . c# console . c# konsoldan veri girişi . static void main . c# decimal veri tipi . c# kayar nokta verileri . IEEE . c# yazı biçimlendirme . currency . general . c# char . compareTo . equals . c# while döngüsü . c# for döngüsü . c# foreach döngüsü . döngüler . hata yakalama . catch . pperatörler . .net framework . delphi . c++ builder . write . c# deki string dönüşümler . C nedir . C fonkisyonlar . getch .














Yeni yorum gönder