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
fatih389
04 Eylül 2015çalışmıyor.
HayalEt
04 Eylül 2015Merhaba,
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 2016Herşeyi harfi harfi yapmış olmama rağmen bir türlü çalıştıramadım.
HayalEt
09 Mayıs 2016Merhaba, 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 2016XAMPP 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 2016Maalesef 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 2016Teşekkür ederim zaman ayırdığın için
HayalEt
12 Mayıs 2016Ben teşekkür ederim, keşke daha fazla yardımcı olabilseydim
Enis Baydemir
31 Ekim 2016resimlerde 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 2016Aslı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 2016bunu 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 2016Evet 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 2016evet 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 2016kod ekleyince yorumda göstermemiş neyse pardon
HayalEt
31 Ekim 2016Tebrikler 😀
sorun yok kod gözüküyor
Duran DAYIOĞLU
23 Haziran 2017Hocam 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 2017Geç 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 2017Mükemmel içerik, hazırladığınız için teşekkürler, takır takır da çalışıyor.
HayalEt
02 Ekim 2017Yorumunuz için teşekkür ederim
Elimden geldiğince detaylı anlatmaya çalışıyorum
aaaaaa
24 Aralık 2017ben web sayfamda bu kodları çalıştıramadım acaba html dosyası olduğu içinmi olmadı
HayalEt
24 Aralık 2017Merhaba
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 2020merhabe 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 2020Anladığı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 2020Kendim yapıp çalıştırmadığım hiç bir şeyi burada paylaşmam dolayısıyla çalışır
Abraham Ceviz
21 Ocak 2021bunu, 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