Bu uygulamada bazı web sitelerinde görülen sayfa altına scroll edilince yeni verilerin Ajax ile yüklenme olayını inceleyeceğiz. Örnek site için sortfolio. Bu uygulama ile sayfa hareketine göre verilerin daha düzenli ve verimli kullanılmasını sağlıyoruz. Tabi ki sunucu performansından büyük tasarruf ediyoruz.
Bu uygulama demosu için de daha önce kullandığım mysql.php database class yapısını kullandım. En kısa zamanda bu class ‘ı da detaylıca açıklayacağım.
Uygulamamız için gereken kodlara geçelim:
index.php kodları
<style type="text/css"> *{ margin:0px; padding:0px } body { font-family:'Georgia',Times New Roman, Times, serif; font-size:18px; } .message_box { height:auto; width:600px; border:solid 1px #48B1D9; padding:5px ; } #panel{ color:#333; background-color:#C8E6E2; width:100%; } #last_msg_loader { text-align: right; width: 920px; margin: -125px auto 0 auto; } .number { float:right; background-color:#48B1D9; color:#000; font-weight:bold; } </style> <?php include('mysql.php'); $last_msg_id=$_GET['last_msg_id']; $action=$_GET['action']; if($action <> "get") { ?> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { function last_msg_funtion() { var ID=$(".message_box:last").attr("id"); $('div#last_msg_loader').html('<img src="wait.gif">'); $.post("scroll.php?action=get&amp;amp;amp;last_msg_id="+ID, function(data){ if (data != "") { $(".message_box:last").after(data); } $('div#last_msg_loader').empty(); }); }; $(window).scroll(function(){ if ($(window).scrollTop() == $(document).height() - $(window).height()){ last_msg_funtion(); } }); }); </script> <title>Serpito.Com - Scroll Load Demo</title> <div id="panel"> <center><h2>Serpito.com</h2> Bu demo <a href="/scroll-down-auto-load-data/">PHP:Jquery: Scroll Down Auto Load Data</a> icin hazirlanmistir. </center> </div> <?php //Include load_first.php $sql=$dba->query("SELECT ID,post_title,post_name FROM wp_posts WHERE post_status='publish' ORDER BY ID DESC LIMIT 25"); while($row=$dba->fetch_array($sql)) { $msgID= $row['ID']; $msg= $row['post_title']; $link=$row['post_name']; ?> <div id="<?php echo $msgID; ?>" > <a href="/<?php echo $link; ?>/"><?php echo $link; ?></a> </div> <?php } ?> <div id="last_msg_loader"></div> <?php }else{ include('scroll.php'); //include load_second.php } $dba->close(); ?> &amp;nbsp;
scroll.php kodları
<?php include('mysql.php'); $last_msg_id=$_GET['last_msg_id']; $sql=$dba->query("SELECT * FROM wp_posts WHERE ID<'$last_msg_id' and post_status='publish' ORDER BY ID DESC LIMIT 5"); $last_msg_id=""; while($row=$dba->fetch_array($sql)) { $msgID= $row['ID']; $link=$row['post_name']; $msg= $row['post_title']; ?> <div id="<?php echo $msgID; ?>" > <a href="/<?php echo $link; ?>"><?php echo $link; ?></a> </div> <?php } $dba->close(); ?>
Keşke yazı başlığı da türkçe olsaydı.
türkçesi için önerin var mı şenol? ben biraz zorlandım da. mesela böyle bişey nasıl olur; Scroll Down Otomatik veri yükleme
“Jquery ve Php ile sayfayı aşağı kaydırınca içerik yükletmek” olabilir mi aceba?
Sanırım orta yol bu şekilde bulundu.
güzel bir yazı, teşekkürler.
Merhaba arkadaşlar!
Atilla öncelikle teşşür eetmek isterim.
Çünkü onun kodları olmasa belki buda olmayacaktı.
Arkadaşım öncelikle kondlarnı kulandım. PHP – kullanan arakadaşlarımız var ama ASP kullananda.
Bende ASP formatına çevirdim linkte:
http://xmaster.cc/download/scroll_load.rar
kolay gelsin.
Yazı için gerçekten teşekkürler. Mysql.php’deki database class’ı yerine daha basit birşey kullansaydınız en azından kullanmak isteyenlerin uyarlaması için daha kolay olurdu diye düşünüyorum. Ama yinede teşekkürler.
Database e bağlanırken hata alıyorum! Local çalışmada sorun vermesi normal mi?
Wp-config.php i çektiğimde de (fetch_array) hatasını alıyorum!!!!
Merhaba, yazı için teşekkürler, ama anlamadığım bir olay var bu eklenti ie 8 de problem çıkartıyor mosue topu ile aşağıya inerken 2. sefer de sorguyu 2 kere yolluyor 🙁
Arkadaşlar daha sade bir şekilde anlatımı varsa bana e-posta ile göndere bilirseniz çok sevinirim…
http://www.9lessons.info/2009/07/load-data-while-scroll-with-jquery-php.html
bu adreste daha basite indirgenmiş şekilde anlatımı var.
güzel paylaşım ama türkçe olarak nerde ne işlemler çalışıyor acıklasaydın millet daha iyi anlayabilirdi kanımca
yine de teşekkürler başarılar =)
2 tane yüklemesine çözüm bulabilen var mı? çalışıyor ama bazen 2 kere aynı şeyi yüklüyor crome da bile olabiliyor 🙁
kopyala yapıştır yapmış veri tabanı nasıl olacak
demek öyle ha
aspde nasıl olur