Kişiselleştirilebilir LightBox üretimi 2 - Ajax işlemleri
Tarih 23 Ocak 2010 Cumartesi, 15:02 | Etiket(ler) jQuery, JavaScript, Css, Ajax
Bu yazıyı okumadan önce bir önceki yazımda (
Kişiselleştirilebilir LightBox üretimi) bahsettiğim konuya göz atmanızı öneririm. Çünkü genel şablonumuzu ona göre oluşturacağız.
Şimdi bu pencerelerin içinde nasıl Ajax çağrısı yapabileceğimizi incelemeye başlayalım. Bir önceki örnekten yola çıkarsak penceremizin genislik,uzunluk,baslik ve icerik adlarında 4 parametre aldığını hatırlıyoruz. icerik isimli parametreyi, çağıracağımız sayfanın adı olarak değiştirip ufak bir modifikasyonla ajax çağrısı yapalım.
Bu sefer bize 1 adet yükleniyor imajı ve ajax ile çağırılacak bir sayfa gerekecek (Bu server side bir dosya olabilir). Bunun için aşağıdaki imajı ve kodları kullanabilirsiniz.
Yükleniyor imajımız :
Ajax ile çağıracağımız sayfa :
<html>
<head>
<title></title>
</head>
<body>
bu sayfa ajax isteği sonucunda gönderilmiştir.
</body>
</html>
Eski
pencereGoster() javascript fonksiyonumuzu şu şekilde değiştirelim :
var pencereAcikmi = false;
function pencereGoster(genislik,uzunluk,baslik,sayfa) {
var apSec = $("#pencere");
if(pencereAcikmi == false) {
$("#karart").css("display","block");
var winH = $(window).height();
var winW = $(window).width();
$("#pencerebasliksol").html(baslik);
$("#pencereicerik").html("<div style='text-align: center;'><br /><br /><img src='ajaxLoading.gif' width='220' height='19'></div>");
$.ajax({
type: "GET",
url: sayfa,
cache: false,
success: function(msg){
$("#pencereicerik").html( msg );
}
});
apSec.css("width",genislik);
apSec.css("height",uzunluk);
apSec.css('top', winH/2-apSec.height()/2);
apSec.css('left', winW/2-apSec.width()/2);
pencereAcikmi = true;
}
else {
pencereAcikmi = false;
}
apSec.css("display","block");
}
pencereGoster() fonksiyonumuz yine 4 parametre alıyor. Fakat bu sefer son parametremiz değişik. Bunlar
genislik, uzunluk, baslik ve
sayfa. Tek değişen
sayfa parametremiz. Bu da çağıracağımız sayfayı temsil ediyor.
Herşey bittiğinde pencere açma fonksiyonumuzu artık şu şekilde çağırıyoruz.
<a href="javascript:pencereGoster(350,100,'Penceremizin başlığı','ajaxSayfa.html');">Pencere aç</a>
Bunları uygulamak için yazının başında söylediğim gibi
şu sayfadaki genel şablona ihtiyacınız olacak.
Bittiğinde şöyle gözükecek.
Daha önce de söylediğim gibi siz kendi tasarımınıza göre özelleştirip daha güzel bir görüntüye dönüştürebilirsiniz fakat bu haliyle de güzel görünüyor.
Penceremizin çalışan halini buradan indirebilirsiniz.Yorumlar
Tarih 23 Aralık 2010 Perşembe, 14:45 | Yazan Cenk SARI
Malesef postback ile sayfa başka bir çağrı yapacağı için, sayfanın değişmesinden kaynaklı lightbox kaybolur. Bunun için başka bir bilgi gönderme fonksiyonu yazmalısın. Sayfa icindeki form alanlarını aşağıdaki metod ile serilestirip yeni bir ajax çağrısı fonksiyonu ile gönderebilir başka bir sayfadan alabilirsiniz.
var formbilgileri = $("#formunadi").find("input,textarea,select,hidden").not("#__VIEWSTATE,#__EVENTVALIDATION").serialize();
Tarih 23 Aralık 2010 Perşembe, 14:05 | Yazan Kemal KİREZCİ
Merhabalar...
Öncelikle bu faydalı bilgin için teşekkür ederim.
uygulamayı asp.net üzerinde çalıştırıp yeni bir sayfayı Lightbox ile açtırdım. Fakat sayfada postback yapınca lightbox iptal oluyor.
UpdatePanel kullanmayı denedim. O da diğer scriptlerin kullanımına izin vermiyor.
bu tarz bir olayla karşılaştın mı acaba. Nasıl çözülebilir.
Tarih 26 Mart 2010 Cuma, 16:35 | Yazan Cenk SARI
Sorununuzu tam olarak anlayamadım. Ajax işlemlerinde post ettiğiniz verilerin geri dönüşünü zaten sayfa kaynağında göremezsiniz. Daha doğrusu ajax ile çağırılan sayfaların kaynağını çağırdığınız sayfada göremezsiniz. Çağıracağınız sayfaya verileri gönderirken yani jQuery nin post özelliğini kullanırken dataları göndermek için şu sayfada (http://api.jquery.com/jQuery.post/) anlatıldığını gibi data propertysini kullanın.
Örn:
$.post("test.php", { name: "John", time: "2pm" } );
Tarih 26 Mart 2010 Cuma, 13:36 | Yazan Erol Zabunoğlu
Ben php mysql ve jquery kullanarak lokal çalışan bir uygulama yapıyorum..
jquery Ş.post ile Db den çağırdığım verilerin içerisinde modal açılan sayfa olması gerekiyor.. Ş.post ile çağırmadığım linkler doğru bir şekilde modal açılmasına rağmen Ş.post ile çağırılanlarda açılamıyor. Sebebi nedir acaba. Birde Ş.post ile çağırdığım veriler sayfa kaynağında görünmüyor.. Sorun bu mudur ?
Bilgi verebilirseniz sevinirim.. Teşekkürler.
Yorum yazın
Geri Dön | Ana Sayfaya Dön