Tüm Araçlar
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al
wmaraci reklam
lidertakipci

Scroll aşağı indikçe veri yüklensin

 8 Mesajlar 3.986 Okunma
advertseo
wmaraci reklam

#1
hasanablak hasanablak Sms Onayı Gerekli Banlı Kullanıcı
  • Üyelik 14.08.2016
  • Yaş/Cinsiyet 27 / E
  • Meslek Öğrenci
  • Konum İstanbul Avrupa
  • Ad Soyad H** A**
  • Mesajlar 67
  • Beğeniler 11 / 3
  • Ticaret 2, (%100)

Merhaba arkadaşlar başlıkla da istediğim gibi Scroll aşağı indikçe veri yüklenmesini istiyorum fakat bunu yapabilmek için gerekli JavaScript/Ajax bilgisine sahip olmadığımdan bende hazır bir kaç kod bulup onları yazdım. Fakat örnek olarak aldığım sitedeki kodlarda hatalı malesef;

Kodun orjinali şu şekilde;





XTZ
<script></script>
<script>
$(function(){

var id=$("#mesaj:eq(0)").attr("name")-5;//idi mesaj olanın sayfada en üsttekinin namesini aldık.Sebebi o veritabanındaki en son veri.
//yukardaki idle sürekli 5 azaltıp 5 veri çekecez taki kalmayana kadar.

$(window).scroll(function(){//sayfadaki scroll oynarsa
var scroll=$(this).scrollTop();//scrolun yükseklik konumunu al
var uzunluk=$(document).height()-$(this).height();//documentin scroll boyunu bulduk.Yaniiçerikten pencere boyutunu çıkardık

if(scroll==uzunluk){//scroll konumu bulduğumuz uzunluğa eşitse .Yani dökümanın sonuna vardıysa
$(".yuke").html("");//loading.gif i koy
var s=$(this).scrollTop();//o anki scrolun konumunu al
$.post("mesaj.php",{"id":id},function(veri){//ajaxla mesaj php ye son id i at 5 veriyi çek
if(veri!="yok"){//veri varsa
$(".mesaj_ana").append(veri);//verileri mesaj_ana clasının sonuna koy
id-=5;//id i 5 azalt
$(this).scrollTop(s);
}else{
$(".yukle").html('

Veri kalmadi
');//veri yoksa veri yoku yaz
}
});
}

});

});
</script>




$baglan=mysql_connect("localhost","root","");//mysql başlantısı
$veritabani=mysql_select_db("pdo",$baglan);
if($veritabani){

$cek=mysql_query("select * from mesajlar order by id desc limit 5");//son 5 veriyi çekiyoz
$say=mysql_num_rows($cek);
if($say>0){
while($al=mysql_fetch_array($cek)){
echo "
".$al["mesaj"]."
";//verileri tek tek ekrana basıyoz.
}
}

}
?>







$id=$_POST["id"];//idi aldık
$baglan=mysql_connect("localhost","root","");//mysql bağlantısı
$veritabani=mysql_select_db("pdo",$baglan);
if($veritabani){
if($id>0){
$cek=mysql_query("select * from mesajlar order by id desc limit $id,5");//gelen idten sonraki 5 veriyi aldık
$say=mysql_num_rows($cek);
if($say>0){
while($al=mysql_fetch_array($cek)){
echo "
".$al["mesaj"]."
";//verileri yaz
}
}else{
echo "yok";//veri yoksa yok yaz
}

}else{
echo "yok";//id küçükse gene yok yaz
}

}
?>

Burada mantık hatası var sanırım, pek bilmiyorum ama kodu kendi hostingimde denediğimde sürekli aynı verileri aldığını ve sonsuz bir veri yüklemesi olduğunu gördüm daha sonra html kodundaki

var id=$("#mesaj:eq(0)").attr("name")-5

şu satırı gördüğümde mantık hatası var zannettim tekrar söylüyorum bilmiyorum.

eq() kodu belirli bir nesneyi seçtirmek için kullanıldığını öğrendim bu durumda en üstteki nesneyi seçtiriyor ve ondan 5 çıkartıyor.
Dyelim ki en üstten alağıya 5 tane veri çektik; bunların idleri

20 19 18 17 16 15 şeklinde.

Scroll en aşağıya indiğinde bu sefer 20-5 olacağından 15 sonucu çıkacak ve php kodundaki gibi 15,5 şeklinde bir limit ile yeni verileri çekecek fakat scroll yine en aşağıya indiğinde yine en üstteki divi seçicek ve yine 20-5 olacağından yine 15,5 şeklinde aynı verileri çektirecek diye zannediyorum.

Ki böyle de oluyor.

Ben bu hatayı halletmek için şöyle bir şey yaptım;






UstaDerslik
<script></script>
<script>
$(function(){
var denemes = 0;
var id=$("#mesaj:eq(0)").attr("name")-5;//idi mesaj olanın sayfada en üsttekinin namesini aldık.Sebebi o veritabanındaki en son veri.
//yukardaki idle sürekli 5 azaltıp 5 veri çekecez taki kalmayana kadar.
$(window).scroll(function(){//sayfadaki scroll oynarsa


var scroll=$(this).scrollTop();//scrolun yükseklik konumunu al

var uzunluk=$(document).height()-$(this).height();//documentin scroll boyunu bulduk.Yaniiçerikten pencere boyutunu çıkardık
if(scroll==uzunluk){//scroll konumu bulduğumuz uzunluğa eşitse .Yani dökümanın sonuna vardıysa
denemes = 5+denemes;
$("#yukle").show();//loading.gif i koy
$("#yukle").html("Yükleniyor");//loading.gif i koy
var s=$(this).scrollTop();//o anki scrolun konumunu al
$.post("mesaj.php",{"id":denemes},function(veri){//ajaxla mesaj php ye son id i at 5 veriyi çek
if(veri==""){
$(".yukle").html('
Veri kalmadi
');

}
var s=$(this).scrollTop();
$(".mesaj_ana").append(veri);
$(this).scrollTop(s);

});
}

});

});
</script>





K
S
H
G
F

Bu da çok saçma oldu sanırım :/

Yardım eder misiniz?

 

 

wmaraci
reklam

#2
Blacksheep Blacksheep .NET Developer Kullanıcı
  • Üyelik 20.07.2014
  • Yaş/Cinsiyet 27 / E
  • Meslek Webmaster
  • Konum Ankara
  • Ad Soyad M** K**
  • Mesajlar 2074
  • Beğeniler 60 / 532
  • Ticaret 10, (%100)
Aradığınız şey Infinite Scroll alttaki video size yardımcı olacaktır.
https://www.youtube.com/watch?v=XRAlEbVL8vQ
 

 

#3
Arestr Arestr WM Aracı Kullanıcı
  • Üyelik 10.08.2014
  • Yaş/Cinsiyet 28 / E
  • Meslek Web Devoloper
  • Konum Kayseri
  • Ad Soyad N** C**
  • Mesajlar 408
  • Beğeniler 403 / 143
  • Ticaret 0, (%0)
Ben aşağıdaki gibi kulanıyorum hocam her seferinde limiti 10 artırıp sonucu ekrana bastırıyorum siz 5 erli yapmak istiyorsanız next10=next10+5; şeklinde kullanabilirsiniz
$(document).ready(function(){

var next10=0;
function lastPostFunc()
{
$('div#lastPostsLoader').html('');
$.post("ajax.php?limit="+next10,

function(data){
if (data != "") {
$(".umsatz_group:last").after("
"+data+"
");
$(".newajax").hide().fadeIn("fast");
}
next10 = next10+10;
$('div#lastPostsLoader').empty();
});
};

$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
lastPostFunc();
}
});

});
 

 

FULL STACK WEB DEVELOPER

#4
hasanablak hasanablak Sms Onayı Gerekli Banlı Kullanıcı
  • Üyelik 14.08.2016
  • Yaş/Cinsiyet 27 / E
  • Meslek Öğrenci
  • Konum İstanbul Avrupa
  • Ad Soyad H** A**
  • Mesajlar 67
  • Beğeniler 11 / 3
  • Ticaret 2, (%100)
Arestr Blacksheep Dostlar teşekkür ederim bir şey daha sormak istiyorum;
bir şart sonucu post etme işlemi yapılıyor ya;
Post bitmeden şart sağlanırsa bir post daha yapılıyor post'un bitmesini bekletemez miyim?
 

 

wmaraci
wmaraci

#5
Arestr Arestr WM Aracı Kullanıcı
  • Üyelik 10.08.2014
  • Yaş/Cinsiyet 28 / E
  • Meslek Web Devoloper
  • Konum Kayseri
  • Ad Soyad N** C**
  • Mesajlar 408
  • Beğeniler 403 / 143
  • Ticaret 0, (%0)
javascript içinde de if else kullanımı yapabilirsiniz hocam


if($koşul){
Yapılmasınız istediğiniz işlermer
}
 

 

FULL STACK WEB DEVELOPER

#6
hasanablak hasanablak Sms Onayı Gerekli Banlı Kullanıcı
  • Üyelik 14.08.2016
  • Yaş/Cinsiyet 27 / E
  • Meslek Öğrenci
  • Konum İstanbul Avrupa
  • Ad Soyad H** A**
  • Mesajlar 67
  • Beğeniler 11 / 3
  • Ticaret 2, (%100)
Arestr hocam onu da yaptım Allah razı olsun tek bi problem kaldı benim makinanın çözünürlü 1366*768 bende düzgün çalışıyor aynı sayfayı ekran çözünürlüğü 1920*1800 olan makinada denedim sadece 1 veri yükledi scroll==uzunluk kodunu geçemedi kodlama bende ekran çözünürlüğünü ekranda göstermek istedim onda sayı hep küsüratlı kalıyor resimde var;

 

 

#7
Arestr Arestr WM Aracı Kullanıcı
  • Üyelik 10.08.2014
  • Yaş/Cinsiyet 28 / E
  • Meslek Web Devoloper
  • Konum Kayseri
  • Ad Soyad N** C**
  • Mesajlar 408
  • Beğeniler 403 / 143
  • Ticaret 0, (%0)
Math.round() fonksiyonunu kullanarak yuvarlayabilirsiniz hocam.

örnek



Math.round(7.5);

veya

var sayi = 7.5;

Math.round(sayi);

 

 

FULL STACK WEB DEVELOPER

#8
hasanablak hasanablak Sms Onayı Gerekli Banlı Kullanıcı
  • Üyelik 14.08.2016
  • Yaş/Cinsiyet 27 / E
  • Meslek Öğrenci
  • Konum İstanbul Avrupa
  • Ad Soyad H** A**
  • Mesajlar 67
  • Beğeniler 11 / 3
  • Ticaret 2, (%100)
Arestr Ya hocam bu scroll muhabbeti ne ince işmiş telefondna giriyorum stieye scroll ile uzunluk yine eşitlenmiş arada bu sefer küsürat değil rahat 150 sayı kalıyor hiç anlamadım neden böyle;
hani desem sayfa sonuna gelindiğinde buton .ıksın butona tıklanınca veri yüklensin o zaman yine scroll ve uzunlukları eşitliğini kontrol etmem lazım bu nasıl bir iş valla vazgeçicem az kaldı şu mantıkdan...
 

 

İlk Projecik
expires.getTime Metodunu Çözemedim
wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
 
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al