Merhaba arkadaşlar size JQuery ile sayfanızı yenilemeden içindeki veriyi belirli aralıklarla güncellemenizi sağlayacak kodu paylaşacağım. İnternette bu tarz kod heryerde neredeyse var fakat Internet Explorer da çalışmıyor. Bununla ilgili bir proje yapmam gerekmişti. Uzun araştırmalarım sonucunda bir Amerikalının bloğunda bulmuştum her tarayıcıda çalışanını. Size de katkısı olacağına inanıyorum.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var refreshId = setInterval(function() {
$("#sonuc").load("veri.php?randval="+ Math.random());
}, 2000);
});
</script>
</head>
<body>
<div id="sonuc"></div>
</body>
</html>
Not: Bende çalışıyor olmasına rağmen, sizden gelen yorumlar yukarıda yer alan kodun bütün bilgisayarlarda ve tarayıcılarda çalışmadığını gösteriyor. Bundan dolayı, aşağıda yer alan kodu deneyin.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//açılışta çalışması için
gonder();
//her 2 saniyede bir yenile
var int=self.setInterval("gonder()",2000);
});
function gonder(){
$.ajax({
type:'POST',
url:'veri.php',
success: function (msg) {
$("#sonuc").html(msg);
}
});
}
</script>
</head>
<body>
<div id="sonuc"></div>
</body>
</html>
Yukarıda veri.php dosyasından her 2 saniyede bir veri çekiyoruz ve bu veriyi id değeri sonuc olan div içerisine yazdırıyoruz. Yapacağımız uygulamanın veri.php içeriğini de vereyim, tam bir uygulama olsun. PHP den 1 ile 10000 arasından rasgele sayı üretip ekrana yazdırıyoruz. Sayı direk ekrana yazılmıyor, php den dönen değer oluyor ve JQuery bu değeri alıp sonuc divine yazdırıyor.
<?php // veri.php olarak kaydedin $sayi = Rand(1,10000); echo $sayi; ?>
Umarım yaptığım yeni değişiklik, bütün bilgisayarlarda sorunsuz çalışıyordur. Uygulamanın açılışta çalışan versiyonunu buradan indirebilirsiniz. Uygulama hakkında değerli yorumlarınızı bekliyorum.
Bu yorum 23 Haziran 2011 tarihinde 15:27 sularında yazılmıştır.
google dan gezinirken buldum bloğunuzu, yararlı bilgiler varmış 😀
Bu yorum 13 Ağustos 2011 tarihinde 06:58 sularında yazılmıştır.
Merhaba, tam aradığım şey. Ancak chrome da sorunsuz çalışırken İE de çalışmıyor. Çok enteresandır ki IE de veri tabanından değişiklik yaptığımda veya çağırdığım dosyada değişiklik yaptığımda onları bile göstermiyor. Neden Olabilir acaba?
Bu yorum 14 Ağustos 2011 tarihinde 19:19 sularında yazılmıştır.
Kod IE’de de çalışıyor herhangi bir sorun yok. Tekrar denedim yine çalıştı.
Bu yorum 07 Eylül 2011 tarihinde 16:26 sularında yazılmıştır.
Kod bütün tarayıcılarda çalışıyor ben de denedim. Paylaşım için teşekkürler.
Bu yorum 07 Eylül 2011 tarihinde 16:30 sularında yazılmıştır.
Paylaşım için teşekkürler. Bu paylaşımını Long Pooling yazınla birleştirdim. Baya yararlı oldu.
Bu yorum 13 Ekim 2011 tarihinde 12:32 sularında yazılmıştır.
çok teşekkürler, basit ama çok güzel bir mantık, tam da bunu arıyordum.
Bu yorum 19 Aralık 2011 tarihinde 14:07 sularında yazılmıştır.
IE’de çalışmadığını belirtmek isterim. Acab IE’nin sürümünden kaynaklanıyor olmasın. IE 9 kullanıyorum ve maalesef çalışmadı.
Bu yorum 19 Aralık 2011 tarihinde 17:06 sularında yazılmıştır.
İlk önce, daha önce uygulamanın çalışmadığını söyleyen kişilerden özür diliyorum. Çünkü uygulamanın sorunsuz çalıştığını iddia ediyordum. Ama maalesef uygulama her bilgisayarda çalışmıyor. Bu yüzden yazıyı güncelleyip, ekleme yaptım. Yaptığım bu değişikliğin çalışıp çalışmadığı hakkında değerli yorumlarınızı bekliyorum.
Bu yorum 10 Mayıs 2012 tarihinde 12:42 sularında yazılmıştır.
Maalesef bu sefer IE’de çalışıyor, firefox ve chrome’da çalışmıyor. Site tasarlarlıyordum ve her şey birden bire anlamsızlaştı. HTML site tasarlıyordum ve harici bir menuList.html dosyasının içeriğini div id=”anaMenu” tagları içerisinde göstermeye çalışıyordum. İlk zaman çalıştı. Sitenin tasarlanmasını sonuna geldiğimde IE’de çalıştığını, firefox ve chrome’da çalışmadığını farkettim. İkinci kez yazdığınız kodların çalışıp çalışmadığını kontrol eder misiniz? Bu işi sorun yaşamadan yapabileceğim tavsiyenizi ve rehberliğinizi de benden esirgememenizi diliyorum, iyi çalışmalar…
Bu yorum 10 Mayıs 2012 tarihinde 16:05 sularında yazılmıştır.
Server’da çalışıyormuş, ancak bilgisayarda local olarak çalışmıyormuş.
Bu yorum 20 Aralık 2011 tarihinde 13:33 sularında yazılmıştır.
Firefox, IE ve chrome’da çalıştı. Gerekten çalışmalarınızdan dolayı sizi tebrik ediyorum. Sitenizi yeni keşfettim, çok yararlanacağımı görüyorum. Çalışmalarınızın devamını diliyorum.
Bu yorum 22 Aralık 2011 tarihinde 10:07 sularında yazılmıştır.
uygulama için teşekkürler
ancak kod çalıştığı anda değilde beklemesi gereken süre sonunda sayfayı çağırıyor acaba sayfa açılır açılmaz veri.php yi çağıran sonrasında ise istenilen zamana göre sayfayı yenileyen kod nasıl olacak?
Bu yorum 22 Aralık 2011 tarihinde 11:21 sularında yazılmıştır.
$(document).ready(function(){
gonder();
var int=self.setInterval(“gonder()”,1000);
});
Bu yorum 22 Aralık 2011 tarihinde 14:08 sularında yazılmıştır.
tam olarak bundan bahsetmiyorum.
süreyi 5 dakika olarak ayarlayın ve çalıştırın veri.php nin içeriğini görmek için 5 dakika beklersiniz benim bahsettiğim ise sayfayı açılır açılmaz çeksin 5 dakika geçtikten sonra sayfayı yenilesin.
sayfayı başlangıçta da çekmesi için ne yazmam gerek.
Bu yorum 22 Aralık 2011 tarihinde 14:58 sularında yazılmıştır.
Lütfen kodu aşağıda yazılanları dikkate alarak tekrar deneyin. Yukarıdaki kod da extradan gonder(); fonksiyonunu kullandığımız için sayfa açılır açılmaz çalışacak. Ayrıca da,
var int=self.setInterval(“gonder()”,1000); kodu ile de her 1 saniyede sayfayı yenileyecek. Siz bu saniyeyi 300000 yaparsanız, 5 dk olur.
Bu yorum 22 Aralık 2011 tarihinde 21:14 sularında yazılmıştır.
hocam 300000 yapıp bi denerseniz rasgele üretilen sayıyı ancak 5 dakika sonra görebiliyorsunuz yani açılır açılmaz bi değer görünmüyor ancak ilk değer 5 dakika sonra görünüyor. 🙁 neyse yapamadım ben olmadı. ilginiz için teşekkürller
Bu yorum 22 Aralık 2011 tarihinde 21:29 sularında yazılmıştır.
Kusura bakmayın, istediğiniz işlem bana çok kolay geldiği ve yukarıda detaylı olarak anlattığım için artık yeni bir açıklama yapmak istemiyorum. İstediğiniz uygulamayı buradan indirebilirsiniz. Uygulama denenmiş olup çalışmaktadır.
Tek yapmanız gereken bu kısmı
$(document).ready(function() {
var int=self.setInterval(“gonder()”,1000);
});
aşağıdaki şekilde değiştirmekti.
$(document).ready(function(){
gonder();
var int=self.setInterval(“gonder()”,3000);
});
Bu yorum 30 Aralık 2013 tarihinde 21:44 sularında yazılmıştır.
siteniz ve içerikler çok yararlı. teşekkür ettim.
Bu yorum 14 Ocak 2012 tarihinde 23:57 sularında yazılmıştır.
peki başka bir sitenin sayfasını neden çekemiyoruz?
Bu yorum 15 Ocak 2012 tarihinde 00:33 sularında yazılmıştır.
Başka bir site derken? Bot yazmaktan bahsediyorsan o bu yazının kapsamına girmiyor. Eğer uzak siteden veri alacaksan, bu yazıyı incele.
Bu yorum 22 Ocak 2012 tarihinde 19:51 sularında yazılmıştır.
Teşekkür ederim güzel paylaşım.
Bu yorum 20 Şubat 2012 tarihinde 20:02 sularında yazılmıştır.
hava durumu cekıyorum selectbox ile sabit şehir kocaeli selectle istanbul u seciyorum gosteriyor fakat sayfam 1 dkk sonra yenilendiğinde kocaeli tekrar geri geliyor.secili olan veriyi sayfa yenilense bile basıl sayfada tutabılrım?
tesekkurler
Bu yorum 27 Şubat 2012 tarihinde 01:47 sularında yazılmıştır.
Seçilen değer (il) için, selectboxda selected değeri vermelisin.
Bu yorum 11 Mart 2012 tarihinde 09:18 sularında yazılmıştır.
Gerçekten çok güzel bir paylaşım. Teşekkür ederim.
Bu yorum 20 Mart 2012 tarihinde 06:20 sularında yazılmıştır.
Merhaba arkadaşlar. Yeni bir sosyal ağ projesi üstünde çalışıyorum. Proje bitdi bitecek ama, bu refresh problemini bir türlü çözemedim. Koddan falan pek anlamıyorum. Bcakir arkadaşımızın paylaştığı jquery refresh uygulamasını indirdim. Kullandığım site sistemi Drupal. Şimdi sorum bu ki, indirdiğim bu uygulamanı sitemin hangi klasörüne yüklemem lazım? Şimdiden teşekkürler.
Bu yorum 22 Nisan 2012 tarihinde 07:41 sularında yazılmıştır.
uygulamanız için tşk ederim ama söyle bir sorum var. Butona basılınca sayfayı yenilesin(php ile yapıyorum) butonun bir adı var. Yardımlarınız için şimdiden tşkler.
Bu yorum 24 Nisan 2012 tarihinde 12:04 sularında yazılmıştır.
mouseclick olayı ile sayfa yenileme fonksiyonunu çağırırsan istediğin sayfa yenilemeyi elde etmiş olursun.
Bu yorum 10 Mayıs 2012 tarihinde 12:35 sularında yazılmıştır.
Bu kodlarla bir web sitesi tasarlıyordum ve şu an itibari ile IE’de çalışıyor, google crhome ve firefox’ta çalışmıyor. Daha önce çalışıyordu. Ama şimdi çalışmıyor. Ana menüyü bir html içeriğinde çekmesi için ayarlamıştım. Büyük bir hayal kırıklığı ve sıkıntı içerisindeyim. Başka bilgisayarlarda da deneyeceğim, Win7 Home Pr. IE9 ve diğerlerini kullanıyorum. Kodlarınızın firefox ve crhome’da çalışıp çalışmadığını kontrol edebilirseniz size minnettar Kalacağım. Başka bilgisayarda da denedim yine olmuyor? Yardımlarınızı bekliyorum.
Bu yorum 12 Mayıs 2012 tarihinde 21:24 sularında yazılmıştır.
Sayfa yenileme kodu çalışıyor, herhangi bir sorun olmaması gerekli.
Bu yorum 11 Kasım 2012 tarihinde 18:53 sularında yazılmıştır.
allah razı olsun kardeş çok işime yaradı
Bu yorum 19 Kasım 2012 tarihinde 11:55 sularında yazılmıştır.
O ajaxtan baya çekmiş ve sonunda çözmüştüm sizde yararlanın diye yazıyorum. IE 9 da çalışmamasının nedeni cache problemi bunu aşağıdaki gibi cache : true ile çözebilirsiniz.
$.ajax({
type:’POST’,
url:’veri.php’,
cache:true,
Bu yorum 28 Kasım 2012 tarihinde 08:40 sularında yazılmıştır.
Her 10 Dakikada Bir Dizideki Farklı Sayfaları İframe içinde Açmak İstiyorum Bu Kod ile Yaklaştım Ama Tam Olmadı Yardımlarınızı Bekler İyi Çalışmalar Dilerim….
Bu yorum 02 Mart 2013 tarihinde 23:45 sularında yazılmıştır.
Bende çalışıyor sorunsuz, teşekkürler.
Bu yorum 08 Nisan 2013 tarihinde 11:43 sularında yazılmıştır.
Paylaşımınızın çok çok faydasını gördüm teşekkür ederim
Bu yorum 08 Nisan 2013 tarihinde 22:44 sularında yazılmıştır.
Emeğinize sağlık hocam, çok iyi bir şey bu. Ama ben her 2 saniyede bir alanı yormak istemiyorum. Sadece database’den veri gelince alanı yenilesin istiyorum. Yapamadım bir türlü.
Bu yorum 06 Haziran 2013 tarihinde 17:17 sularında yazılmıştır.
Bu konuyla alakalı olarak daha önce yazmış olduğum 2 adet long polling yazısı, istediğini yapmanda yardımcı olacaktır.
Bu yorum 06 Haziran 2013 tarihinde 14:47 sularında yazılmıştır.
Hocam yukarıda Koray hocamın dediği gibi veritabanına veri geldiğidne nasıl yenileme yaparız, direk her saniyede bir güncelleme 1000 kullanıcı aktif olduğunda sistemi aşırı derecede kasmaz mı? Bilgilendirmelerinizi bekliyorum.
Bu yorum 06 Haziran 2013 tarihinde 17:02 sularında yazılmıştır.
Comet programlamanın Long Polling tekniğini kullanman lazım. Daha önce long polling konusunda 2 adet yazı yazmıştım. Fakat kullanıcın çok fazla arttığında bu da yeterli olmayacaktır. En iyi çözüm Node.js ve Socket.io kullanmak.
Bu yorum 11 Haziran 2013 tarihinde 15:00 sularında yazılmıştır.
Tam aradığım koddu, teşekkür ederim.
Bu yorum 25 Temmuz 2013 tarihinde 06:15 sularında yazılmıştır.
Paylaşım tüm tarayıcılarda çalışıyor. Ve mütiş bir uygulama webde online olarak uyarı göndermek için tam aradığım kod blogu. Emeğinize sağlık.
Bu yorum 11 Eylül 2013 tarihinde 03:36 sularında yazılmıştır.
merhaba ben html tabanlı websitemde uygulamak istiyorum, tam olarak anlamadım bu kod php ile mi çalışıyor?
Bu yorum 30 Eylül 2013 tarihinde 17:02 sularında yazılmıştır.
Güncellemeyi alacağın yer Php gibi bir server diliyse (örnekte öyle), Php çalıştıran sunucuya ihtiyacın var. JavaScript dilini Html içinde direk çalıştırabilirsin, ama server tabanlı diller (Php, Asp, .NET, …) için mecburen Php yorumlayan sunucun olması gerekli. Html içerisinde Php çalıştıramazsın zaten, Php yorumlayan Web Server olmadan (sayfa uzantısı Php olmalı Html değil).
Bu yorum 06 Ekim 2013 tarihinde 10:41 sularında yazılmıştır.
bu kodu blogspotda nasil kullaniriz lutfen yardim edin
Bu yorum 30 Aralık 2013 tarihinde 21:26 sularında yazılmıştır.
tesekkürler işe yaradı
Bu yorum 06 Ocak 2014 tarihinde 09:12 sularında yazılmıştır.
Alttaki örnek sorunsuz çalışıyor, ben denedim kullanacağım.
Bu yorum 06 Ocak 2014 tarihinde 21:50 sularında yazılmıştır.
uygulama güzel çalışıyor fakat
“more” kontrolü ile kullanamıyorum.
Örneğin;
Gönderilerin ilk 20’sini sıralıyorum, en altta devamını gör butonu var.
butona basınca diğer 20 de yükleniyor.
Bu uygulamayı sisteme yerleştirdiğimde devamını gör’e bastığımda işlemiyor çünkü gönderiler daimi olarak yenilenmekte. Devamını gör’e bastığım anda da yenilendiği için otomatik olarak sadece ilk 20 yi gösteriyor.
Bunu süre bazlı yaptığımda ise aynı problem mevcut. Atıyorum 5 saniye yaptım. üye, gönderilerin devamını gör butonunu ilk 5 saniye kullanabiliyor daha sonra tekrar ilk 20yi gösterdiği hale dönüşüyor. Bu problemi nasıl aşabilirim?
Bu yorum 07 Ocak 2014 tarihinde 06:56 sularında yazılmıştır.
İkisini iç içe kullanmanız mümkün değil. Bunu değiştirmeniz ya da more ile daha fazla kayıt getiren uygulamayı değiştirmeniz gerekir. Bu uygulama bütün div içerisindeki kayıtları değiştirdiği için daha fazla göster ile yüklenmiş olan kayıtlar sıfırlanacaktır. Çözümü, son kayıt id değerini post edip yeni kayıt id varsa (id değeri daha büyük olan) prepend ile listenin başına eklemek olur. Bu yöntem listeyi silmez, yeni girilmiş kayıtları ekler.
Bu yorum 28 Ocak 2014 tarihinde 13:04 sularında yazılmıştır.
Bu örnekte bir url’ye bir dosya ismi değilde bir url yazarak veriyi alabilme vede gelen veriyi iframe içerisinde gösterebilme imkanı var mıdır? Ben normalde bir sayfaya iframe ile bir siteyi çekiyorum ama o sayfadaki bilgileri güncellemek için sayfayı yenilemem gerekiyor, bu örneği gördüğümde eğer dediğim gibi yapabiliyorsa çok iyi olur şimdiden teşekkür ederim.
Bu yorum 31 Ocak 2014 tarihinde 06:57 sularında yazılmıştır.
Iframe içerisinde bir siteyi gösterebilirsin, aralıklarla da iframe’i güncelleyebilirsin (sitenin yeni içerik girdiğini kontrol ettirmeden ya da dolaylı kontrol ettirerek iframe içinde güncelleme yapman, sunucuna büyük yük getircektir). Bu konuya ek önemli mesele, farklı bir sitenin (faklı domaininde hizmet veren) veritabanından verileri almak gibi bir düşüncen varsa da, normal yollarla bu mümkün değildir, sitenin sahibinin araya bir web servis koyması gerekir.
Bu yorum 05 Eylül 2014 tarihinde 11:15 sularında yazılmıştır.
Denedim bütün tarayıcılarda sorunsuz çalışıyor, teşekkürler.
Bu yorum 07 Ocak 2015 tarihinde 18:55 sularında yazılmıştır.
Arkadaşlar, facebook mesela sayfanın urlsini değiştirebiliyor ama mesaj kutusu dahil hiç bir şey yeniden yüklenmiyor, nasıl olabilir?
Bu yorum 04 Şubat 2015 tarihinde 22:29 sularında yazılmıştır.
Bunu sayfa iceriği degisince yenileye nasil cevirebiliriz. Yani sadece sayfanın içeriği değişince değişecek.
Bu yorum 16 Şubat 2015 tarihinde 11:01 sularında yazılmıştır.
Sayfa içeriğini veritabanına yeni eklenme olduğunda sadece değişmesi için, ya long pooling tekniğini kullanmanız ya da soket programlama yapmanız gerekir. Aşağıdak daha önce yazmış olduğum yazılar yardımcı olabilir.
http://bcakir.com/long-polling-uygulamasi.html
http://bcakir.com/node-js-ve-socket-io-ile-haber-akisi.html
Bu yorum 18 Şubat 2015 tarihinde 14:44 sularında yazılmıştır.
bcakir merhabalar, blogunuzu özenli ziyaret ederim sağolun çok güzel bilgiler var. Tüm aramalarıma rağmen Ajax’da ileri geri tuşu sorununu nasıl aşabileceğimi bulamadım. Bu konu hakkında bizleri bilgilendirebilir misiniz acaba. İyi günler dilerim.
Bu yorum 07 Mayıs 2015 tarihinde 22:11 sularında yazılmıştır.
Teşekkür edirim. Gayet hoş bir paylaşım.
Bu yorum 27 Haziran 2015 tarihinde 15:49 sularında yazılmıştır.
Ben kodu yine çalıştıramadım ama problem nerede acaba?
Bu yorum 19 Ağustos 2015 tarihinde 14:10 sularında yazılmıştır.
Merhaba uzun zamandır aradığım çalışan bu kodları buldum, size paylaşım için çok teşekkür ederim.
Bu yorum 11 Eylül 2015 tarihinde 11:03 sularında yazılmıştır.
yaptım ama olmadı nasıl php sayfanın içine ekleyebiliriz
Bu yorum 15 Ekim 2015 tarihinde 17:58 sularında yazılmıştır.
Yararlı bir blog sayfası tebrik ve teşekkür ederim.
Bu yorum 14 Kasım 2015 tarihinde 10:44 sularında yazılmıştır.
Ben şöyle birşey arıyorum;
Mesela sayfada ajax ile çalışan bir bölüm olsun, galeri olabilir belki.
Her yeni resme geçtiğinde sadece ilgili bölüm yüklensin sayfanın hepsi değil ama üstte adres çubuğunda adres değişmiş olsun. Böyle bir ajax uygulamasını bir sitede gördüm ama entegre edemedim.
Elinizde varsa paylaşır mısınız? Teşekkürler.
Bu yorum 17 Aralık 2015 tarihinde 16:05 sularında yazılmıştır.
Paylaşım için teşekkürler.
Bu yorum 22 Ocak 2016 tarihinde 12:44 sularında yazılmıştır.
HTML kısmında, olarak değil de, gibi bir şey yapılamaz mı? Buradaki mesela “gonder()” ifadesi, html sayfa içerisinde bir çok kez kullanılacak, örnekteki 50 değeri farklı olacak. Ben de oku.php?data=50 sayfasından dönen değeri html sayfamda bastırmak istiyorum, nasıl yapabilirim?
Bu yorum 07 Şubat 2016 tarihinde 15:56 sularında yazılmıştır.
Bu kodları ASP için nasıl kullanabiliriz? Teşekkürler
Bu yorum 14 Haziran 2017 tarihinde 08:02 sularında yazılmıştır.
Ben kodu çalıştırdım fakat sayfamda veri girişi de yapmalıyım ama habire yenilediği için veri girişi yapamıyorum, yardım edin.
Bu yorum 24 Ağustos 2017 tarihinde 11:24 sularında yazılmıştır.
Teşekkürler sayfa header ve footer tekrar yüklemeden sadece sayfa içeriğini değiştirebiliyorum.