Ajax ile Ülke/Şehir Ayıklama
Özellikle farklı mecralardan üye kabul eden sitelerin en büyük ihtiyacı üyeleri belirli kriterlere göre sınıflandırmaktır ve bunun başında da ülke/şehir/ilçe/semt benzeri ayıklamalar gelir. Fakat bu datanın çokluğu ya programcıyı ya da ziyaretçiyi yorar. Buna temel çözüm de bir select ile tümden gelim şeklinde detaya inmektir. Eskiden bu iş her veri seçiminde sayfanın member.asp?ulke=90 gibi bir adrese yönlendirmektir fakat bunu yaparken de formdaki verilerin kaybolmaması için her değişiklikte datalar session ya da cookie’ye kaydedilir ki bu da ram’de şişmeye neden olur. Lafı fazla uzatmadan konuya geçecek olursak AJAX’ın nimetlerini Jquery kullanarak kodladım. 
adresine email gönderenlere dünyadaki tüm ülke ve şehirlerin listesinin yer aldığı veritabanını sembolik bir ücret karşılığında gönderebilirim.
Kullandığım yöntemde doğrudan select içine yazdırmayıp farklı bir sayfadan verileri kontrol ederek getirme (load) yöntemini kullandım.
Şimdi adım adım başlayalım işleme:
- Ülke ve şehirlerin seçileceği formumuzu hazırlıyoruz. Fakat burada ileride detaylandıracağım şehir listesinin en baştan oluşturulması fakat ben kafa karışıklığı yaratmaması için burayı boş bıraktırdım.
<div id="container">
ÜLKE:
<select name=”strCountry” id=”strCountry”>
<%set rs_countries=dbconn.execute(”select * from countries order by country_name asc”)
do while not rs_countries.eof%>
<option value=”<%=rs_countries(”country_Id”)%>”>
<%=rs_countries(”country_name”)%>
</option>
<%rs_countries.movenext:loop
set rs_countries=nothing%>
</select>
ŞEHİR:
Lütfen bir ülke seçiniz.
</div> - Burada şehir listesini bir div içine alalım ki formu bunun içine yükleyelim.
<div id="container">,
ÜLKE:
<select name=”strCountry” id=”strCountry”>
<%set rs_countries=dbconn.execute(”select * from countries order by country_name asc”)
do while not rs_countries.eof%>
<option value=”<%=rs_countries(”country_Id”)%>”>
<%=rs_countries(”country_name”)%>
</option>
<%rs_countries.movenext:loop
set rs_countries=nothing%>
</select>
ŞEHİR:
<div id=”city_list”>Lütfen bir ülke seçiniz.</div>
</div> - Ülke seçildiğinde ilgili şehirlerin listelenmesini sağlayacak olan script’imizi yazalım ve bu script’i <head> tagına yerleştirelim.
function CityList(strId)
{
$('#CityList').load('f_forms.asp?cmd=CityList&id='+strId);} - Sıradaki adımda bu scriptin tetiklenmesini sağlıyoruz. [onchange="CityList(this.value)"]
<div id="container">,
ÜLKE:
<select name=”strCountry” id=”strCountry” onchange=”CityList(this.value)”><%set rs_countries=dbconn.execute(”select * from countries order by country_name asc”)
do while not rs_countries.eof%>
<option value=”<%=rs_countries(”country_Id”)%>”>
<%=rs_countries(”country_name”)%>
</option>
<%rs_countries.movenext:loop
set rs_countries=nothing%>
</select>
ŞEHİR:
<div id=”city_list”>Lütfen bir ülke seçiniz.</div>
</div>
İşlem bu kadar. Bir sonraki yazımda form ilk açılırken varsayılan bir ülkeyi nasıl seçecek, bu ülkeye bağlı şehirleri nasıl getirecek onu anlatacağım…
Herkese başarılar…
Jquery kullanman isabetli olmuş.