jQuery ile Tıklanan Linki Sayfayı Yenilemeden Açmak

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


29 Comments

  • fatih389

    04 Eylül 2015

    çalışmıyor.

  • HayalEt

    04 Eylül 2015

    Merhaba,
    Kendim çalıştırmadığım bir şeyi emin olun burada yazmam. Ben diğer projelerimde de bu yöntemi kullanıyorum.

    load komutunda dikkat edilmesi gereken en önemli nokta div içinde gösterilmek istenen sayfanın da aynı sunucuda diğerleriyle beraber olması gerekir.

  • Yasin

    09 Mayıs 2016

    Herşeyi harfi harfi yapmış olmama rağmen bir türlü çalıştıramadım.

  • HayalEt

    09 Mayıs 2016

    Merhaba, Eğer kodu direk kendi bilgisayarınızda (yani bir web server kurmadan) çalıştırmışsanız olmayabilir. Örnek olarak ben Apache üzerinde çalışıyorum. Bu işi kolaylaştıran XAMPP gibi programlar var. Eğer yine olmazsa ben size çalışan kodu gönderirim.

  • Yasin

    09 Mayıs 2016

    XAMPP yada bi server kullanmıyorum. bu işi serversız sadece html üzerinde yapmam mümkün müdür? (linkle tıkladığında o divin içerikleri değişmesi)

  • HayalEt

    10 Mayıs 2016

    Maalesef benim bildiğim kadarıyla yok. Emin olmak için kendi sitemde çalıştırdım ve oldu; sonra bilgisayarda denedim ve tahmin ettiğim gibi çalışmadı.

    Günümüzde bu tür kütüphanelerin tamamı bir server üzerinde çalımya ihtiyaç duyuyor. İnternette bedava hosting veren servisler var. Bir tanesine üye olarak deneyebilirsiniz.

  • Yasin

    11 Mayıs 2016

    Teşekkür ederim zaman ayırdığın için

  • HayalEt

    12 Mayıs 2016

    Ben teşekkür ederim, keşke daha fazla yardımcı olabilseydim

  • Enis Baydemir

    31 Ekim 2016

    resimlerde denedim oldu ama istediğim tam bu değil sanırım. ben şöyle bir şey yapmak istiyorum. sadece belirli bir konumda açılmasını, yani demek istediğim sayfa yenilenmeden menü gibi hazırladığım resimlerden birine tıklandığında açılacak olan link belirlediğim bir çerçevenin içinde ön izleme gibi çıksın. bu resim olur, video olur vs. anlatabildim mi bilmiyorum. hani tv kanalı değiştirmek gibi bir şey olacak. örneklerini gördüm ama yapmayı bilmiyorum. nasıl arayacağımı da bilmiyorum

  • HayalEt

    31 Ekim 2016

    Aslında yine yapılabilmesi gerekir. Çünkü burada ben de öyle yaptım. sayfayı bir divin içinde açtım. Siz divin arkaplan rengini farklı yaparsanız daha iyi anlayabilirsiniz. Ya da en basitinden eski bir yöntem olan iframe kullanarak daha kolay çözebilirsiniz.

  • Enis Baydemir

    31 Ekim 2016

    bunu kod editörde denedim linki resim verdim. tıklayınca resim geliyo çok güzel ama alttaki linkler gitti o yüzden sayfa yenilenmiş gibi algıladım. belki sayfada öyle olmaz deniyim. iframelede olur ama sayfa yenileniyo çerçevenin içi yenilensin. yani div yani yapıcamda kafamda toparlayamadım oluyo öyle bazen

  • HayalEt

    31 Ekim 2016

    Evet bazen olur hepimiz böyle öğrendik. Kod incelendiğinde görüleceği gibi ben #icerik id’sini verdiğim divin içine ornek2.php adlı dosyayı çağırıyorum yani sayfa değişmiyor sadece divin içindekiler değişiyor.

  • Enis Baydemir

    31 Ekim 2016

    evet yaptım 🙂 görmek için deneme sayfası yaptım bir tane. bir ara kullanacağım yere uygularım.
    http://enisbaydemir.blogspot.com.tr/2016/10/deneme.html

    lazım olan olursa diye kod şöyle:

    bu o istediğim pencere ve boyunları falan ve altına devam…
    ajax kodu:

    function saybakim()
    {
    xmlHttp=ajax();
    if (xmlHttp==null)
    {
    alert (‘Tarayiciniz Ajax Desteklemiyor!’);
    return;
    }
    var url=’sayac.php’;
    xmlHttp.open(“GET”,url,true);
    xmlHttp.send(null);
    }
    function ajax()
    {
    var xmlHttp=null;
    try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
    catch (e)
    {
    // Internet Explorer
    try
    {
    xmlHttp=new ActiveXObject(‘Msxml2.XMLHTTP’);
    }
    catch (e)
    {
    xmlHttp=new ActiveXObject(‘Microsoft.XMLHTTP’);
    }
    }
    return xmlHttp;
    }
    function sayac()
    {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
    {
    document.getElementById(‘sayacs’).innerHTML = xmlHttp.responseText;
    saybakim();
    }
    setTimeout(sayac,3000);//5 Saniye
    }
    setTimeout(sayac,3000);

    bu kısımdan sonra sonra ister ( gibi) ve divi kapatıyosun ()

  • Enis Baydemir

    31 Ekim 2016

    kod ekleyince yorumda göstermemiş neyse pardon

  • HayalEt

    31 Ekim 2016

    Tebrikler 😀
    sorun yok kod gözüküyor

  • Duran DAYIOĞLU

    23 Haziran 2017

    Hocam merhabalar, Öncelikle teşekkür ederim böyle bir paylaşım için çok işime yaradı ancak yapmak istediğim son birşey kaldı. Başka bir sayfadan buradaki aktif olmasını istediğim div e nasıl link verebilirim ?

  • HayalEt

    05 Temmuz 2017

    Geç cevapladığım için üzgünüm. Benim verdiğim örnek lokal sayfalarda çalışır. Uzaktaki sayfaları çağırmak için başka metodlar ya da daha doğrusu json veya web servislerden yararlanmanız gerekir.

  • İbrahim

    30 Eylül 2017

    Mükemmel içerik, hazırladığınız için teşekkürler, takır takır da çalışıyor.

  • HayalEt

    02 Ekim 2017

    Yorumunuz için teşekkür ederim
    Elimden geldiğince detaylı anlatmaya çalışıyorum

  • aaaaaa

    24 Aralık 2017

    ben web sayfamda bu kodları çalıştıramadım acaba html dosyası olduğu içinmi olmadı

  • HayalEt

    24 Aralık 2017

    Merhaba
    Benim örneğimde php ile oluşturduğum sayfaları html ile oluşturursanız bir sorun olmayacaktır diye düşünüyorum. Eğer bir web server üzerinde çalıştırmıyorsanız sorun bundan da kaynaklanıyor olabilir. Kendi pc niz de apavhe gibi bir server kullanmanız gerekebilir.

  • atakan arici

    14 Nisan 2020

    merhabe hocam bu anlattıgınız kodu denemedim lakin Oluşturulan sayfada A B C başlıklarına atanan linklerin A tıklandıgında aynı sayfada açılmasına yarıyor sanırım bana bu şekil bir kod gerekli

    A B C bağlantı ekleyip tıkladıgımda altında A baglantısına ayit indirilecek dosyalar acılması aynı şekil B ve C aynı şekil

  • HayalEt

    01 Haziran 2020

    Anladığım kadarıyla bu örnek işinize yarayacaktır. Ben burada tek linkle yaptım siz üç linkle yapacaksınız

  • aXaCaLL

    13 Kasım 2020

    Çalışmaz..
    Neden Çalışmaz .. düz metin içeriği xml . json içerikler alabilrisiniz.. amma js ve jquery kodları ile yapılmış bir html sayfasınıda sornlar çıkar js kodları çalışmaz..

  • HayalEt

    31 Aralık 2020

    Kendim yapıp çalıştırmadığım hiç bir şeyi burada paylaşmam dolayısıyla çalışır

  • Abraham Ceviz

    21 Ocak 2021

    bunu, wordpress avada ile nasıl yapabiliriz. özel bir adı, yöntemi var mıdır?

  • EinSchweizerYT

    13 Mart 2021

    Çok iyi çalışıyor. Başarıların devamını beklerim <3 🙂

  • HayalEt

    21 Nisan 2021

    @Abraham Ceviz tam bilmiyorum ama bence bunun için eklenti kullanmak daha mantıklı

  • HayalEt

    21 Nisan 2021

    @EinSchweizerYT Çok teşekkür ederim yardımcı olabildiysem ne mutlu

Bir yanıt yazın