Merhaba arkadaşlar. Bugünkü yazımda sizlere JQuery ile tıklanan bir bağlantıyı aynı sayfa içindeki bir div içerisinde sayfayı yenilemeden açmayı anlatmaya çalışacağım. Böylece siz de artık bir çok web sayfasında kullanılan bu yöntemi kullanabileceksiniz.

İlk olarak sayfamızda JQuery kullanmak için sayfamızın başında JQuery’i çağırmamız gerekiyor. Bunun için iki yol izleyebilirsiniz. Birincisi ki ben de bunu tavsiye ederim JQuery’i indirmek ve ona referans vermek; ikincisi ise direk JQuery sayfasına referans vererek kullanmak ki burada hızlı olması açısından ben bunu tercih edeceğim.

Şimdi sayfamıza JQuery’i çağırıyoruz

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

Daha sonra tıklanan bağlantıya göre içeriği güncellenecek bir div oluşturuyoruz.

<div id='icerik'>Tıklanan bağlantıya göre bu divin içeriği değişecek</div>

Şimdi de div’imizin içeriğini değiştirmek için kullanacağımız bir bağlantı oluşturalım

<a href='#' class='icerik_degistir'>Div içeriğini değiştir</a>

Farkettiğiniz gibi oluşturduğumuz linkin href kısmına bir değer yerine # yazdık. Böylece linkimize tıklandığında bir sayfa açmamasını, az sonra oluşturacağımız java script koduyla istediğimizi yapmasını sağlayacağız. Tabi href kısmı da kullanılabilir ancak ben burada en basit anlaşılabileceğini düşündüğümü yazdım.

Diğer taraftan linkimize bir class ve div’imize de bir id atadığımızı görüyorsunuz. Bunların nedenini de açıklayalım hemen. Div’e bir id atayarak yazacağımız script ile o div’i seçebiliyoruz. Bu nedenle unutmayalım aynı sayfada aynı isimde sadece bir id olabilir; yoksa kodlarımız çalışmayacak ve hata verecektir. Eğer sayfamızda birden fazla id kullanacaksak her birine farklı isim vermeliyiz. Class’larda ise durum daha farklı. Aynı sayfa içinde istediğimiz kadar aynı isimde class kullanabiliriz. Böylece aynı isimleri taşıyan class’lara istediğimizi, hepsi için tek tek kod yazmamıza gerek kalmadan uygulayabiliriz. Linkimize de bu yüzden class verdik zaten. Aynı class adına sahip bütün linklerle oluşturduğumuz div içinde farklı sayfalar açabileceğiz ancak bunun için de her linke farklı bir id daha atayacağız ki script kodumuz gelen id’ye göre ayrı ayrı davranabilsin. Fakat bunu bir sonraki yazımda anlatacağım.

Daha fazla uzatmadan ilgili script kodumuzu da yazalım. Öncelikle kodumuzun ne zaman çalışmaya başlamasını yani ne zaman aktif olmasını istiyoruz? tabiki sayfamız açıldığında. O zaman document ready bloğunu kullanacağız Genelde sayfa yükleme süresini geciktirmemesi için java script kodları sayfanın altına yazılır. Ben de öyle yapacağım ama dikkat etmemiz gereken bir nokta var. Bir sayfada sadece bie kez document ready bloğu olur. Zaten ikincisine de gerek yok. Bu blok içine kullanmak istediğimiz herşeyi yazabiliyoruz zaten.

Bloğumuzu aşağıdaki gibi yazalım

<script type="text/javascript">
	$(document).ready(function(){

	});
</script>

 Şimdi sıra geldi bu blok içine yazacağımız koda ki böylece tıklanan linkimiz div’in içeriğini değiştirebilsin. Oluşturduğumuz icerik_degistir isimli class’a sahip linkimize tıklanınca bir fonksiyon çalıştırmak istiyoruz. Dolayısıyla document ready bloğumuzun içine aşağıdaki kodu yazıyoruz

$(".icerik_degistir").click(function(){

});

 Şimdi de bu fonksiyonumuzun içine, linkimize tıklandığında ne olmasını istediğimizi yazalım

 $('#icerik').load("ornek2.php");

 Burada gördüğünüz gibi icerik id’sine sahip div’imizin içine ornek2.php sayfamızı yükledik. Burada dikkat etmemiz gereken bir nokta var. Çağıracağımız sayfa kendi sitemize ait bir sayfa.. Dışardan bir sayfa çağırmak istersek kodumuz daha farklı olacaktı onu da başka bir yazımda anlatmaya çalışırım.

Bütün bunların sonunda script kodumuzun tamamı aşağıdaki gibi olacak

<script type="text/javascript">
	$(document).ready(function(){
			$(".icerik_degistir").click(function(){
               $('#icerik').load("ornek2.php");
			});
	});
</script>

 Dikkat ettiyseniz icerik_degistir’in önünde bir nokta var. Bu icerik_degistir’in bir sınıf olduğunu gösterir. Aynı şekilde icerik’in önündeki diyez (#) işareti de onun bir id’yi temsil ettiğini gösterir.

Siz de önce kodu yazdığımız sayfadaki div içinde açılacak başka bir sayfa oluşturun ve adını kodu aynen uygulayacaksanız ornek2.php olarak verin.

Sonuçta yazdığımız kodun tamamı aşağıdaki gibi olacaktır.

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

<div id='icerik'>Tıklanan bağlantıya göre bu divin içeriği değişecek</div>

<a href='#' class='icerik_degistir'>Div içeriğini değiştir</a>

<script type="text/javascript">
	$(document).ready(function(){
			$(".icerik_degistir").click(function(){
               $('#icerik').load("ornek2.php");
			});
	});
</script>

 Yukarıdaki kodu bir html ya da php sayfası olarak kaydederseniz çalıştığını göreceksiniz. Tabi çalışması için basit bir ornek2.php sayfası oluşturup aynı dizine koymanız ve bir php server üzerinde çalışmanız kaydıyla… İsterseniz ornek2.php yerine ornek2.html kullanarak php den bağımsız çalışabilirsiniz.

Bir sonraki yazımda sayfayı yenilemeden aynı sayfa içinde form gönderme yani POST ve GET‘in nasıl yapıldığını anlatmaya çalışacağım