28 Nisan 2007 Cumartesi

Ajax için kullanışlı fonksiyonlar

Merhabalar.
7 aydır uğraştığımız projemiz JotForm'u tamamlama peşinde olduğumdan uzun zamandır blog'a vakit ayıramıyordum neyse ki JotForm başarıyla tamamlandı da sonunda içim rahat bi şekilde yazabiliyorum.

Neyse eğer Jotform'a girip bir bakacak olursanız sitenin işlevlerinin çoğunun ajax yoluyla yapıldığını hemen farkedeceksiniz. Özellikle yeni form yaratırken ve payment özelliklerini ayarlarken kullandığımız Wizard'lar tamamen ajax yoluyla yükleniyorlar.

Çalışmakta olan kodun üzerine server'dan yeni kod getirip sonra da çalışan kod dan bu yeni kod da bulunan bir javascript fonksiyonunu çağırmak istediğinizde ya da bu yeni çağırdığınız sayfadaki bir HTML elementini yakalamak istediğinizde bazı "zamanlama" hataları oluşuyor. Mesela, ya fonksiyonunuz daha sayfa yüklenmeden çalışıyor yada daha yaratılmamış bir elementi yakalamaya çalışıyorsunuz bazen de daha yüklenmemiş fonksiyonlara çağrı yapıyorsunuz. Tabi bunlar kişilerin internet hızlarına göre de değişim gösteriyor. Bu tür sorunları aşmak bizim için gerçekten de çok önemliydi bizde şu fikirle yola çıktık, bir fonksiyonu veya elementi çağırmadan varlığından emin olmalıyız eğer yoksa da yaratılana kadar beklemeliyiz.

Bu mantıkla bazı fonksiyonlar yazdık ve gerçekden işe yaradı, ben de sizinde işinize yarayabileceğini düşündüğümden burada paylaşmak istedim.

işte fonksiyonlar.



function isExist(funcName){
try{
if(typeof eval(funcName) == 'function')
return true;
}catch(e){
return false;
}
}
}



isExist fonksiyonu isminden de anlaşıldığı gibi bir fonksiyonun varlığını kontrol ediyor. isExist("foo") ; şeklinde kullanmak gerek () kullanmadan sadece fonksiyonun ismini yollamanız yeterli size true yada false return edicektir.



function tryFunction(func,args,dur,trycount){
args = args.replace(/\"/g,"'");
trycount = (trycount)? trycount : 0;
dur = (dur)? dur : 15;
if(isExist(func)){
eval(func + args);
trycount=0;
}else if(trycount < dur){
trycount++;
setTimeout("tryFunction(\""+func+"\",\""+args+"\","+dur+","+trycount+")", 100);
}
}



tryFunction ise daha karmaşık, ayrıca isExist() fonkisyonunada bağımlı,şu şekilde çalışıyor, fonksiyon ismi ve argumanları verildiğinde bulana kadar deniyor bulursa da çalıştırıyor, bulamazsa hata vermeden çıkıyor.
iki şekilde kullanabilirsiniz,
ya tryFunction("funcName","(a,r,g,s)")
yada tryFunction("funcName","(a,r,g,s)",45)
sonuna eklediğiniz rakam fonksiyonu çalıştırmayı kaç kere deneyeceğini belirtiyor.
Buradaki 45, 4.5 saniye ye denk geliyor. hiç birşey vermezseniz de default olarak 15 alıyor.


function printInDiv(str,cnt){
cnt = (cnt)? cnt : 0;
if(document.getElementById('idDiv')){
document.getElementById('idDiv').innerHTML = str;
}else if(cnt < 45){
cnt++;
setTimeout("printInDiv('"+str+"',"+ cnt +")", 100);
}else
return false;
}


Bu bir fonksiyon değil bir yöntem,
burada varsayalım ki "printInDiv" diye bir fonksiyonumuz varmış ve biz bunu printInDiv("hello world") şeklinde kullanıyormuşuz. Ancak içine yazı koyulacak div, ajax'la geldiğinden ve hala yüklenmediğinden div element'inin orada olup olmadığını kontrol etmemiz gerek. fonksiyonu bu şekilde modifiye ettiğiniz zaman ya elementi bulup çalışıp durucak yada kendi kendisini 45 kere çağırıcak bulamayıncada hata verip durucak yine burda da 45, 4.5 saniye demek.

fonksiyonun eski hali şu şekildeydi



function printInDiv(str){
document.getElementById('idDiv').innerHTML = str;
}


Bu yöntemler benim gerçekten çok işime yaradı umarım sizde faydasını görürsünüz.
İyi çalışmalar.