Kişiselleştirilebilir LightBox üretimi 2 - Ajax işlemleri
Tarih 23 Ocak 2010 Cumartesi | Etiket(ler) jQuery, JavaScript, Css, Ajax | Yorumlar 4 yorum
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.Tarih 21 Ocak 2010 Perşembe | Etiket(ler) jQuery, JavaScript, Css | Yorumlar 15 yorum
LightBox pencereleri çoğumuzun hazır olarak alıp kullandığı klasik popup veya uyarı pencerelerinin sıkıcılığı ve tasarımını özelleştirememe problemlerini çözen client side uygulamalardır. Basit bir tanımla anlatmaya çalıştığım lightbox pencereleri hazır olarak geldiğinden birçoğu kişiselleştirmeye pek uygun yapıda değillerdir. İşte böyle bir durumda kendi pencelerimizi üretmek isteyebiliriz. Bu ihtiyaçtan yola çıkarak kendi lightbox pencerelerimizi nasıl üretebiliriz sorusuna çözüm arayacağız. Kendi geliştirdiğim lightbox penceresi çok sade ve kişiselleştirilebilirliğe olanak sağlıyor.
jQuery i indirip projemize dahil ettikten sonra, hemen işe koyulalım ve yazmaya başlayalım:
Önce penceremizin şemasını html olarak çıkartalım :
<head></head> taglarinin arasına jQuery i ekleyelim.
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<body></body> taglarının içine :
<div id="karart"></div>
<div id="pencere">
<div id="pencerebaslik">
<div id="pencerebasliksol"></div>
<div id="pencerebasliksag"><a href="javascript:pencereKapat();">[kapat]</a></div>
</div>
<div id="pencereicerik"></div>
</div>
karart isimli div penceremizin modal olarak açılmasını sağlayacak kararan arkaplan,
pencere isimli div ise penceremizi kapsayacak genel taşıyıcımız. Bizi ilgilendiren ve dışarıdan parametre alacak
pencerebasliksol ve
pencereicerik isimli divler.
pencerebasliksol isimli div e title ımızı,
pencereicerik isimli div e iceriğimizi yazdıracağız. Css imizi yazarak lightboxımızı oluşturmaya devam ediyoruz.
#karart {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000;
opacity: .75;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
z-index: 1; }
#pencere {
font-family: Arial;
font-size: 12px;
position: absolute;
border: 2px solid #ccc;
display: none;
background: #fff;
z-index: 2; }
#pencerebaslik {
background: #e3e3e3;
padding: 5px;
border-bottom: 1px solid #ccc;
height: 18px; }
#pencerebasliksol {
float: left;
font-weight: bold; }
#pencerebasliksag {
float: right; }
#pencereicerik {
padding: 5px; }
#pencere a {
margin-left: 10px;
color: #333; }
Css imiz genel şablumuzun bütün elementlerini yakalayacak şekilde olacak. Siz kendi tasarımınızın renklerine göre değiştirebilirsiniz. Hemen penceremizi çağıracak ve kapatacak javascript fonksiyonlarımızı yazıp tamamlayalım. Aslında işin can alıcı kısmı aşağıdaki kodlarda.
<script type="text/javascript">
var pencereAcikmi = false;
function pencereGoster(genislik,uzunluk,baslik,icerik) {
var apSec = $("#pencere");
if(pencereAcikmi == false) {
$("#karart").css("display","block");
var winH = $(window).height();
var winW = $(window).width();
$("#penceresol").html(baslik);
apSec.css("width",genislik);
apSec.css("height",uzunluk);
apSec.css('top', winH/2-apSec.height()/2);
apSec.css('left', winW/2-apSec.width()/2);
$("#pencereicerik").html(icerik);
pencereAcikmi = true;
}
else {
pencereAcikmi = false;
}
apSec.css("display","block");
}
$(window).resize(function () {
var winH = $(window).height();
var winW = $(window).width();
if(pencereAcikmi == true) {
$("#pencere").css('top', winH/2-$("#pencere").height()/2);
$("#pencere").css('left', winW/2-$("#pencere").width()/2);
}
});
function pencereKapat() {
if(pencereAcikmi == true) {
pencereAcikmi = false;
$("#pencere").css("display","none");
}
$("#karart").css("display","none");
}
$(document).keyup(function(event){
if (event.keyCode == 27) {
if(pencereAcikmi == true) {
pencereKapat();
}
}
});
</script>
pencereGoster() fonksiyonumuz 4 parametre alıyor
genislik, uzunluk, baslik ve
icerik. Adlarından anlaşılacağı şekilde pencereyi çağırırken genislik, uzunluk, baslik ve içerik parametreleri gönderiyoruz. Pencere açma fonksiyonumuzu şu şekilde çağırabiliriz.
<a href="javascript:pencereGoster(350,100,'Penceremizin başlığı','Penceremizin içeriği buraya gelecek');">Pencere aç</a>
pencereKapat() fonksiyonu penceremizin açık olup olmadığını kontrol edip pencereyi kapatıyor.
(window).resize fonksiyonumuz browser penceresini herhangi bir şekilde küçültüp, büttüğümüzde veya boyutlarını değiştirdiğimizde penceremizi browser penceresinde ortalıyor.
(document).keyup fonksiyonumuz ise
escape tuşunu yakalayıp bu tuşa basıldığında pencereyi kapatan fonksiyonumuzu tetikliyor ve penceremizi kapatıyor. Projenin bitmiş halinde şu şekilde bir görüntü alıyoruz.
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 gayet kullanışlı ve güzel görünüyor. Bir sonraki yazımda bu pencerelerin içinden ajax ile başka bir sayfayı nasıl çağırırız konusunu inceleyeceğim. Görüşmek üzere.
Projenin bitmiş ve çalışan halini buradan indirebilirsiniz.Tarih 14 Ocak 2010 Perşembe | Etiket(ler) Ajax, JavaScript, jQuery, Asp.Net | Yorumlar 2 yorum
Yeni bir yazıyla yine birlikteyiz. Bu sefer başlıktan anlaşılacağı gibi Asp.Net ve jQuery Ajax ile XML dosyalarını nasıl okuyacağımızı anlatmaya çalışacağım. Aslında bu blogda projelerde kullanmamız gereken ve faydalı olduğuna inandığım bilgileri paylaşmaya çalışıyorum. Gerçek hayatta deneyimler ile kazanılmış ve zaman ayrılıp araştırılıp sonuca ulaşılmış çözümler her zaman daha sonuç odaklı olur diye düşünüyorum. Teorik olan bilgi uygulanmadan tecrübe edilmez mottosuyla yazımıza başlayalım.
Okumamız gereken XML dosyasını ilk etapta generic handler olarak oluşturacak, arkasından bu datayı jquery ile dinamik olarak Asp.Net formu üzerinden ajax ile okuyacağız.
jQuery'i indirip projenize ekleyin ve aşağıdaki şekilde bir generic handler (.ashx) oluşturun.
Bu datayı kişiselleştirebilir, session veya cookie değerlerine göre şekillendirebilir, kullanıcılarınıza özel çözümler üretebilirsiniz. Ben örnek olması amacıyla şöyle bir veri oluşturdum.
Verileri sağlayan Handler.ashx dosyamız.
Imports System
Imports System.Web
Imports System.Xml
Public Class Handler : Implements IhttpHandler
Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
context.Response.ContentType = "text/xml"
Dim xmlYazici As New XmlTextWriter(context.Response.OutputStream, Encoding.UTF8)
xmlYazici.Formatting = Formatting.Indented
xmlYazici.WriteStartDocument()
xmlYazici.WriteStartElement("Sonuclar")
xmlYazici.WriteElementString("AdiSoyadi", "Cenk SARI")
xmlYazici.WriteElementString("KullaniciID", "13")
xmlYazici.WriteElementString("Sonuc", "Giriş işlemi başarıyla sonuçlandı")
xmlYazici.WriteEndElement()
xmlYazici.WriteEndDocument()
xmlYazici.Flush()
xmlYazici.Close()
End Sub
Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
Get
Return False
End Get
End Property
End Class
Gördüğünüz gibi 3 adet veri üretiyoruz. AdıSoyadı, Kullanıcı ID ve Sonuç. Şimdi dosyayı okuyacağımız javascript fonksiyonumuza gelelim.
function xmlParse(gidecek) {
$.ajax({
url: gidecek,
type: 'GET',
dataType: 'xml',
cache: false,
success: function(xml){
$(xml).find('Sonuclar').each(function(){
var AdiSoyadi = $(this).find('AdiSoyadi').text();
var KullaniciID = $(this).find('KullaniciID').text();
var Sonuc = $(this).find('Sonuc').text();
$('#adi').html(AdiSoyadi);
$('#kid').html(KullaniciID);
$('#son').html(Sonuc);
});
},
error: function(){
$('#son').html('Sonuçlar alınırken bir hata oluştu!');
}
});
}
Sonuçları basacağımız Default.aspx sayfamız
<form id="form1" runat="server">
<a href="javascript:void(0);" onclick="xmlParse('Handler.ashx');">XML al ve sonucu bas</a>
<br />
<h1>Sonuçlar</h1>
<div id="sonuc">
<div id="adi"></div>
<div id="kid"></div>
<div id="son"></div>
</div>
</form>
Siz isterseniz bu handler'a veri post edebilir, session ve cookie gibi yardımcı elemanlar dışında sonuçları girilen veriye göre de şekillendirebilirsiniz.
Projenin çalışan halini buradan indirebilirsinizTarih 19 Ekim 2009 Pazartesi | Etiket(ler) Ajax, jQuery, Asp.Net | Yorumlar 0 yorum
Bu yazımda
jQuery kütüphanesini kullanarak form verilerini nasıl başka bir sayfaya göndereceğimizi anlatmaya çalışacağım. jQuery ve bu tip kütüphaneler kısaca kod yazarken geçirdiğimiz zamanı minimuma indirmek için geliştirilmiş, tarayıcı farklılıkları nedeni ile birbirinden değişik, aynı işi yapan kod yazma derdini tarihe gömmüş kullanışlı JavaScript kütüphaneleridir. Daha önceki zamanlarda prototype.js ve script.aculo.us u tercih etmeme rağmen jQuery çok daha geniş kapsamlı ve kullanışlı olduğu için tercihimi bu yönde değiştirmeme neden oldu. Lafı uzatmadan örneğimize geçelim.
Bu proje için Form.aspx ve GelenVeriyiAl.aspx adında iki sayfa oluşturuyoruz. Formumuzda adi ve soyadi adinda iki adet textbox olduğunu varsayıyorum. Formdan gelen verilerimizi sayfaya post eden JavaScript kodumuz şöyle
function FormGonder(){
var formAl = $('#veriGonderForm').serialize() ;
$('#sonucdiv').html('Form gönderiliyor. Lütfen bekleyiniz.');
$.ajax({
type: "POST",
url: "GelenVeriyiAl.aspx",
data: formAl,
success: function(gelen){
if (gelen=="tamam")
{
$('#sonucdiv').html("Veriler başarıyla alındı.");
}
else
{
$('#sonucdiv').html( gelen );
}
}
});
}
Kodu kısaca açıklamak gerekirse #veriGonderForm id değerindeki formumuzun içindeki elemanları alıp uygun hale getiriyoruz ve #sonucdiv id değerindeki div in içine Form gönderiliyor. Lütfen bekleyiniz. yazdırıyoruz. Formdan gelen sonuc "tamam"sa #sonucdiv 'e Veriler başarıyla alındı yazdırıyoruz. Eğer gelen sonuç "tamam"dan farklıysa gelen mesajımızı tekrar #sonucdiv e yazdırıyoruz. (Örn:Hata mesajı)
Şimdi gelen kodları işleyecek GelenVeriyiAl.aspx dosyamızı hazırlayalım. (Siz istediğiniz server side dil ile bu işlemi yapacak bir kod oluşturabilirsiniz)
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim adi As String = Trim(Request.Params.Item("adi"))
Dim soyadi As String = Trim(Request.Params.Item("soyadi"))
Response.Clear()
If adi = "" Then
Response.Write("Adı alanını boş bırakmışsınız!")
ElseIf soyadi = "" Then
Response.Write("Soyadı alanını boş bırakmışsınız!")
Else
Response.Write("tamam")
End If
Response.End()
End Sub
Asp dosyamıza formdan gelen verileri almak için küçük bir kod yazıyoruz. adi veya soyadi alanlarından herhangi biri boş ise hangisi olduğunu yazıyor. Doluysa tamam yazıyor ve işlem tamamlanıyor. Bu verileri alıp veritabanına yazabilir veya herhangi bir şekilde kullanabilirsiniz. Tabii ki güvenliği elden bırakmayın ve gelen verileri bir güvenlik mekanizmasına tabi tutun.
Bu kodu geliştirip gönderim anında jQuery efektleri uygulayabilir, button veya herhangi bir elementi görünmez veya görünür kılabilirsiniz. Herşey hayal gücünüz ile sınırlı...
We're in this together, we share the same skin!