jQuery ile sayfa değişmeden alan yenileme / veri çekme scripti

Bu script sayesinde tanımladığınız bir alanda belirli aralıklarla yenileme yapabilir böylelikle her defasında farklı bir içerik veya resim görüntüleyebilirsiniz. Ayrıca sayfa değişmeden farklı kaynaklardan (veritabanı, dış dosya) veri çekmek için oldukça ideal.

Uygulamayı Egoradyo’da değişen şarkı isimlerini ve online sayısını çekmek için kullandım. Dilerseniz salt örneğini şu adresten inceleyebilirsiniz.

Scriptin kullanımı oldukça basit, yapmanız gereken ilk şey sürekli değişen verilerinizi bulunduran dosyayı (response.php) oluşturmak ve ardından uygulama yapacağınız sayfadan (index.php) çağırmak.

Uygulama yapılacak sayfada (index.php) </head> tagından önce eklenecek kodlar:

1
2
3
4
5
6
7
8
9
<script src="jquery-1.3.2.min.js"></script>
<script>
 $(document).ready(function() {
     $("#responsecontainer").load("response.php");
   var refreshId = setInterval(function() {
      $("#responsecontainer").load('response.php?randval='+ Math.random());
   }, 3000);
});
</script>

en sondaki 3000 rakamı milisaniyeyi ifade ediyor, bu rakamı çağırma sıklığınıza göre azaltıp arttırabilirsiniz.

yine aynı dosyada <body> tagından sonra, scripti çalıştırmak istediğiniz yere eklenecek kod:

1
2
<div id="responsecontainer">
</div>

hepsi bu kadar. Artık responsecontainer id’li alanınızda sayfa değişmeden belirli aralıklarla ister sürekli değişen verilerinizi listeler, isterseniz her defasında farklı bir resim gösterebilirsiniz. Scriptin oldukça basit ve kolay anlaşılır olduğunu düşünüyorum.

Scripti paket halinde indirmek için (20 Kb):
Download

Facebook Yorumları

63 Yorum

  1. caner abi diyordumya sana sohbet scriptini ayarlayayım diye işte onda bunu kullandım bak önizlemesi aşağıda linkte isimlerin solunda [x]’a sağ tıklayıp yeni sekmede açarsan sana vereceğim şifreyle anında banlarsın. birde anında yani 🙂 bir daha yazamaz 😀

  2. sadık

    selamlar …. belirlediğim başka sitelerdeki grafikleri kendi siteme koymak istiyorum
    . fiyat karşılaştırma siteleri mantığıyla çalışan bir yapı nasıl olabilir..

  3. Mustafa

    Merhaba Caner bey sitenizi yakın tarihde keşfettim ve bende tutku haline dönüştü. Başarılarınızın devamını dilerim.
    Biliyorum oldukça meşgulsunuz fakat bir dakikanızı ayırıp benim soruma bir cevap yazarsanız memnun olurum.
    Ben yukarıdaki örnekde oldugu gibi response dosyasında bir sayı tutuyorum. ve index php dosyasından çagırıyorum. fakat benim istedigim, dönen degeri örnekde oldugu gibi değilde <div id=”responsecontainer”>
    </div>
    bir php değişkeninde saklamak isterim.
    Bunu nasıl yapabilirim.

  4. Caner
    Yazar

    Site hakkındaki görüşlerin için öncelikle teşekkür ederim Mustafa.

     

    Soruyu doğru anladım mı bilemiyorum ancak anladığım kadarıyla sen sadece rastgele sayılar üretmek ve bu sayıları bir değişkende tutmak istiyorsun. Eğer doğru anladıysam bu olay için jquery scriptini kullanmana gerek yok, değişkeni aşağıdaki gibi tanımlaman yeterli:

     

    $rastgele_sayilar = rand();

  5. Mustafa

    Caner bey, tekrar merhaba…
    php rand foonksiyonunu biliyorum.  benim ögrenmek istedigim şey jqery load fonksiyonu ile index php dosyasına gelen degeri php değişkenine aktarmak.
    response.php içerigim.
    12354
    45623358
    14526887
    456274785
    şeklinde her satırda bir rakam bulunuyor ve bunlar \n ile herbiri bir satıra aktarılmış durumdalar.
    ben index php içerisinden load fonksiyornu ile bu degerleri ister satır satır veya hepsini birden alıp php değişkenine aktarmak istiyorum.
    Sizin örneginizde respnse php dosyası rastgele bir sayı üretip, her çalıştırıldıgında  bunu sayfaya yazdırıyor ve bu sayı jquery load ile index php dosyanızdan okutuluyor.
    indexphpdeki okuma kısmına kadar tamamda bunu div in idsine degilde php depişkenine almam lazım bu nıoktada kafam karıştı.  kısaca div id değişkenindeki degeri php degişkenine aktarmak niyetindeyim.
    Saygılar…
     

    • Alperen

      Aynen bende böyle yapmak istedim ama olmuyor. Olsaydı çok güzel olacaktı, ayrı ayrı göstermiyor ki hepsini aynı anda o zaman bir önemi kalmıyor…

  6. Seçkin

    Merhabalar bir sorum olacaktı da.. : )
    response.php sayfasındaki veriyi bir değişkene bağlı olarak çekmek istiyorum örneğin respons.php?sid=12546
    buradaki sid değişkenindeki 12546 no lu veri hangisiyse sadece onu çağırmak istiyorum… Denedim ama olmadı… bir yolu var mıdır..??
     
    Teşekkürler…

    • Caner
      Yazar

      @Seçkin çağırma kodun aşağıdaki gibi olmalı:

      1
      $("#responsecontainer").load('response.php?sid=12345&randval='+ Math.random());

      Karşılayan sayfa (response.php) ise şöyle:

      1
      2
      3
      4
      5
      6
      7
      if($_GET['sid'] == "12345") {
       // sid tanımlanmışsa gösterilecek içerik
      }

      else {
       // sid boş ise gösterilecek içerik
      }
  7. Seçkin

    Caner yardımın için çok teşekkür ederim, tam çözümü şöyle sağladım.
     
    $(“#responsecontainer”).load(“response.php”,”sid=12345″);
    var refreshId = setInterval(function() {
    $(“#responsecontainer”).load(‘response.php?sid=12345&randval=’+

  8. berat

    bu kodları ben forum başlıklarında kullanmaya çalıştım fakat olmadı.
    kısaca anlatayım ben forum başlıklarını bu şekilde yenilemek istedim fakat sql kodlarının başladığı satırda hata verdi sanırım slq den bilgi çekip div yenilemek farklı oluyor. aslında yapmak istediğim şey cevap gelen forum başlığını en üste taşıyıp bir kaç saniye rengi farklılaşsın istiyorum.

    bunun hakkında kısaca bahsedermisiniz ?
    Nasıl Ypabilirim ?

  9. selahattn

    Güzel bir paylaşım, teşekkürler ancak ben php dilini pek anlamıyorum, asp bilirim, bu örneğin asp olanı varmı ? yada asp’ye nasıl uyarlayabiliriz, teşekkürler

  10. öncelikle merhaba.sayfama select menu ile hava durumu çekiyorum fakar 25sny de bir sayfam yenilendiğinde seçtiğim il kayboluyor.bu sorunu nasıl halledebilirim acaba?

  11. Necdet

    Hocam bunu otomatik değilde bir buton ile nasıl yenileyebiliriz ayrıca bu otomatik oluşturduğumuz rakamları bir metin kutusu içine nasıl yazdırabiliriz bilgi verirseniz sevinirim..

    Aynı bu yorum formundaki güvenlik soruları gibi istediğim tam anlamıyla onun gibi ? 

  12. Caner
    Yazar

    @Necdet şu şekilde yapabilirsin:

    1
    2
    3
    $("#test").click(function() {
     $("#responsecontainer").load('response.php');
    });
    1
    <input type="button" value="Tıkla" id="test">
  13. Necdet

    $(“#test”).click(function() {
     $(“#responsecontainer”).load(‘response.php’);
    });

    verdiğin şu kodu nasıl kullanacam lütfen yardımcı ol.

  14. Ali Orhan

    Merhaba, bir sorum olacaktı. Cevaplarsanız çok sevinirim. Her sayfanın bir id’si olsun ve mysql üzerinden verileri çekelim. Yazıları show.php diye bir dosyadan gösteriyoruz. Show.php dosyası üzerine bu verdiğimiz kodları yazdık. Şimdi şöyle bir sıkıntı oluyor. Her sayfanın id’si farklı olduğu için response.php dosyasına sayfanın id’sini göndermek gerekiyor. Bunu verdiğiniz jquery dosyası ile nasıl yapabilir. Umarım derdimi anlatabilmişimdir.

  15. Caner
    Yazar

    Öncelikle document ready’den sonra aşağıdaki gibi bir fonksiyon tanımlayabilirsin:

    1
    2
    3
    function refreshMe(theID) {
      $("#responsecontainer").load("response.php?id="+theID);
    }

    daha sonra şu tür linkler kullanarak istediğin id’yi gönderebilirsin:

    1
    2
    3
    <a href="#" onclick="refreshMe('1');">test 1</a>
    <a href="#" onclick="refreshMe('2');">test 2</a>
    <a href="#" onclick="refreshMe('3');">test 3</a>

    tabi bu tür bir uygulama muhtemelen bug yaratacaktır. Bunun önüne geçmek için otomatik yenilenme özelliğini devre dışı bırakabilirsin.

  16. Uğur Murathan

    kısaca durumu şöyle özetliyim…

    firefoxun bir sekmesinde egonomiğin rutin kontrollerini yapıyordum.
    diğer yandan aklımda olan birşey vardı siteme eklemek istediğim ve onun aramasını gerçekleştirdim.hayatımdaki bütün yollar sana çıkıyor caner 🙂

  17. nega

    teşekkürler öncelikle. Bir olayı çözemedim. Mesela ben bir div’de online ziyaretçileri gösteriyorum. O div yenileniyor ama ziyaretçi sayısı değişmiyor. Statpress eklentisinin ziyaretçi sayacından çekmek istiyorum acaba nerede yanlış yapıyorum çözemedim

  18. Uğur

    Merhabalar,

    Bu yöntem sunucuda kopmalar yaşatıyor mu ? Ben bunu uyguladıktan sonra hosting’te kopmalar oluyor. 1 saat ara ile açılıyor. Yoksa bu durum tamamen başka nedenden mi kaynaklanıyor ?

  19. vahit

    selamlar “var refreshId” ve “response.php?randval=’+ Math.random()” deki “randval=’+ Math.random()” yi niye koyduk normal yapsak da oluyor.

  20. Hamdullah

    Merhaba caner bey,

    scripti indirdim entegre ettim herşey iyi hoşta.
    Benim sorunum biraz daha tuhaf olabilir.
    mesajorta.php adında bir sayfayı yeniliyorum scripte
    Türkçe karakter sorunu yaşıyorum.
    head tagları içine

    1
    2
    <META http-equiv=content-type content=text/html;charset=iso-8859-9>
    <META http-equiv=content-type content=text/html;charset=windows-1254>

    bunların herhangi birini veya ikisini birden kullandığımda;
    Chrome da sorunsuz çalıştırmayı başardım.

    Ama internet explorer yine Türkçe karakter hatası veriyor.

    Belki konuyla ilgisi yok ama sonuçta sorun sorundur değilmi :)) Bunu nasıl çözebilirim.

    • Hamdullah

      Sorunumu mesajorta.php nin içine

      1
      <?php header("Content-Type: text/html; charset=iso-8859-9"); ?>

      kodunu sayfanın en üstüne ekleyerek çözdüm.

  21. Utku

    Çok güzel bir örnek. Sormak istediğim bir soru var.
    Çekilen rastgele sayı silinmese ve yeni çekilen sayı bir üstte gözükse bunu nasıl yapabiliriz ?
    Cevabınız için şimdiden teşekkürler.

  22. Hamdullah

    Sorunu tam olarak anlamadım. Anladığım kadarıyla açıklıyayım.
    browserde görünen link http://www.siteadi.com/index.php?id=5 olsun mesela.
    response.php aynı id yi çeksin istiyorsanız
    bu kodu kullanabilirsin. php ile get fonksyonunu kullandım ben.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <script>

     $(document).ready(function() {
         $("#responsecontainer").load("response.php");
       var refreshId = setInterval(function() {
          $("#responsecontainer").load("response.php?id=<?php echo $_GET['id'] ;?>&randval="+ Math.random());
       }, 1000);
    });
    </script>
  23. can

    iyi geceler hocam saniye olarak değil de bir butona tıklayınca yenilemesini nasıl sağlayabiliriz verdiğiniz kodu denedim yapamadım sanırım.

  24. tugba

    Merhaba, benim çok büyük bir problemim var dinamik bir slider hazırladım resimlerimi objeden for döngüsüyle alan ançak her resim döndğünde veritabanından sql select sorgusunu yapıyor. Her resimde veritabanından sorgu çekiyor bunu nasıl aşabilirim. Ayrıca debugta çelıştırarak bakıyorum firefoxta yapmıyor choremede yapıyor

    • Caner
      Yazar

      Bu sorunu tam olarak anlayamadım, jQuery ile ilgisi yok sanırım. Pastebin.com üzerinden kodların ilgili bölümünü paylaşabilirsen anladığım kadarıyla yardımcı olmaya çalışırım.

Uyarı: Yorumlarda link kullanmayınız. Link içeren yorumlar otomatik olarak spam kabul edilmektedir.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir