JAX ile dinamik select menüleri
Turk-PHP�deki bir konudan ilham alarak yazdığım bir makaleyi şimdi yayınlayacağım. Hem biraz bu sitede de AJAX�a giriş yapmış olurum hem de arkadaşların sorununa çözüm de getiririm belki Başlayalım o zaman�
Şimdi Öncelikle ben AJAX kütüphanesi olarak prototype�ı kullanıyorum, onu belirteyim. Öncelikle adım adım gösterimi yapacağımız sayfanın kodunu yazmaya başlayalım.
Kod:
1.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.
<html xmlns=�http://www.w3.org/1999/xhtml�>
3.
<head>
4.
<meta http-equiv=�Content-Type� content=�text/html; charset=iso-8859-9″ />
5.
<script language=�JavaScript� type=�text/javascript� src=�prototype.js�></script>
GÖrdüğünüz gibi prototype.js dosyasını da ekledik. Şimdi sıra bizim yaratacağımız, bize gereken javascript fonksiyonlarını yazmakta.
Kod:
1.
<script language=�JavaScript� type=�text/javascript�>
2.
function akg() {
3.
var url = �kat2.php�;
4.
var pars = �marka=� + $F(�marka�);
5.
var myAjax = new Ajax.Updater(
6.
�form2′,
7.
url,
8.
{
9.
method: �get�,
10.
parameters: pars,
11.
onComplete: ShowResponse,
12.
onFailure: Failed
13.
});
14.
}
15.
16.
function bilgigoster() {
17.
var url = �kat2.php�;
18.
var pars = �model=� + $F(�model�);
19.
var myAjax = new Ajax.Updater(
20.
�mesaj�,
21.
url,
22.
{
23.
method: �get�,
24.
parameters: pars,
25.
});
26.
}
27.
28.
function markalar() {
29.
var url = �kat2.php�;
30.
var pars = �komut=markagoster�;
31.
var myAjax = new Ajax.Updater(
32.
�marka�,
33.
url,
34.
{
35.
method: �get�,
36.
parameters: pars,
37.
});
38.
}
39.
40.
function ShowResponse(originalRequest) {
41.
$F(�form2′).value = originalRequest.responseText;
42.
$(�mesaj�).value = �Oldu�;
43.
}
44.
function Failed() {
45.
$(�mesaj�).value = �olmadı�;
46.
}
47.
</script>
Bunu anlatmama gerekecek. Burada öncelikle akg() fonksiyonu alt kategoriler getirmek için kullandığım, daha doğrusu seçilen markaya ait model adlarını getirmek için kullandığımız bir fonksiyon. url olarak kat2.php�yi parametre olarak ise marka = $F(�marka� dedik. Burada $F filan ne diye soracaksınız işte bu da prototype özgün yazım şekli. $F ile belirttiğiniz bir değişken adı yani burada marka daha sonra da göreceğimiz gibi marka id sine sahip bir form elementini belirtiyor. örneğin herhangi bir idye sahip bir değişkene erişmek için ise
$(�degisken�
diyebilirdik. Yani burada $ ile başlayanlar kısaca
document.getElementByID
oluyor.
Kodda gördüğünüz gibi, onComplete ve onFailure gibi iki seçenek belirlemişiz. OnComplete de yani olay bitince ShowResponse() fonksiyonu çalışır, OnFailure da yani herhangi bir hata oluşmasında ise Failed() fonksiyonu.
bilgigoster() ve markalar() fonksyionları da aynı şekilde çalışıyor sadece görevleri birinin model bilgisi göstermesi diğeri ise markaları getirmesi. Sayfamızda ilk markaları görmek isteyeceğimizden markalar() fonksyionunu body tag�ında onLoad oalrak belirleyeceğiz.
Kod:
1.
<title>Ajax</title>
2.
</head>
3.
4.
<body onload=�markalar();�>
5.
<form id=�form1″ name=�form1″ method=�get�>
6.
<label for=�marka�>Marka</label>
7.
<select name=�marka� id=�marka� onchange=�akg();�>
8.
9.
</select>
10.
</form>
11.
<form id=�form2″ name=�form2″ method=�post�>
12.
13.
</form>
14.
<div id=�mesaj�>Lütfen istediğiniz modeli ve markasını seçiniz.</div>
15.
</body>
16.
</html>
Evet, şimdi gelelim şu kat2.php dosyasına bakalım neler oluyor.
1.
<?php
2.
$markavemodeller = array(
3.
�audi� => array(�A3″, �A4″),
4.
�bmw� => array(�1″, �3″, �5″),
5.
�mercedes� => array(�A Serisi�, �B Serisi�),
6.
�peugeot� => array(�106″, �206″)
7.
);
8.
$modelinfos = array(
9.
�A3″ => �Audi�nin küçük yıldızı�,
10.
�A4″ => �Audi�nin parlak ateşi�,
11.
�1″ => �Güzel araba�,
12.
�3″ => �Bomba araba�,
13.
�5″ => �Büyük araba�,
14.
�106″ => �Ölüm makinesi�,
15.
�206″ => �Modifiye için birebir�,
16.
�A Serisi� => �Klas ve küçüklüğün uyumu�,
17.
�B Serisi� => �Yolların yeni bücür fatihi�
18.
);
19.
20.
if($_GET[�marka�]) {
21.
echo �<label for="model">Model</label>
22.
<select name="model" id="model" onchange="bilgigoster();">�;
23.
24.
$modeller = $markavemodeller[$_GET[�marka�]];
25.
foreach ($modeller as $model) {
26.
echo �<option value="�. $model .�">�. $model .�</option>�;
27.
}
28.
29.
echo � </select>�;
30.
}
31.
32.
if ($_GET[�model�]) {
33.
echo $modelinfos[$_GET[�model�]];
34.
}
35.
36.
if ($_GET[�komut�] == �markagoster�) {
37.
$markalar = array_keys($markavemodeller);
38.
foreach ($markalar as $marka) {
39.
echo �<option value="�. $marka .�">�. ucwords($marka) .�</option>�;
40.
}
41.
}
42.
?>
Gördüğünüz gibiben burada bilgileri arraylere koyarak aldım, tabii ki bunu daha güzel bir şekilde veritabanıyla sorgulamalar yaparak veritabanından bu bilgileri almanız mümkün. Burada küçük bir örnek diye ben array�lerle gösterdim bunu. Farkındaysanız hep
1.
<?php
2.
if($_GET[�model]) {
3.
?>
gibi kontroller var. Burada Ajax fonksiyonlarımıza baktığınızda method�u get olarak ayarlayıp ayrıca parametrelerde model ve marka diye belirttiğimizden bu dosya onları bu şekilde algılıyor. Ben de burada kontrolü yaptıktan sonra işlemini yaratıyorum.
Mesela markalar fonksiyonuna baktığımızda parametre olarak
�komut=markagoster�
demişiz. kat2.php�de ise
Kod:
1.
<?php
2.
if ($_GET[�komut�] == �markagoster�) {
3.
$markalar = array_keys($markavemodeller);
4.
foreach ($markalar as $marka) {
5.
echo �<option value="�. $marka .�">�. ucwords($marka) .�</option>�;
6.
}
7.
?>
bu şekilde kontrolü yaparak bu olay gönderilmişse tüm markaları bir select menüsü gibi yazdırmışız.
Arkadaşlar umarım az çok yardımı dokunur bu makalenin. İleride daha gelişmiş konulara da değineceğim AJAX ile ilgili.
Herkese iyi çalışmalar
