Find Out Tutorial Tips: jquery autopager with PHP (Like FaceBook Page Loader)

Hi Dears,

Last few days ago, I was looking for some jquery tips, auto-loaded contents like facebook auto contents loading when we scroll down on page. I found some and let share with you.
Today, my tutorials is based on this tutorials. Actually this tutorials is done by ASP page. I will present how to used for PHP and adding some. Create Database with one table something like following.
CREATE TABLE `user` (
`id` INT( 20 ) NOT NULL AUTO_INCREMENT ,
`name` VARCHAR( 22 ) NOT NULL ,
PRIMARY KEY ( `id` )
) ENGINE = InnoDB 




Insert data in table as much as possible because later we have to scroll down 
on page
INSERT INTO `polls`.`user` (`id` ,`name`) VALUES ('1', 'test1'), ('2', 'test2');





Let's support, we have two conditions. When we load page first time, take  
initial data from Database with starting zero offset. And second time and next times
scrolling page with Query String url, the result will be come out depending  
on he last ID.  Create PHP page named site.php.
<?php
if(isset($_GET["offset"])){
if(isset($_GET["offset"])) $offset=$_GET["offset"];else $offset=0;
$con=mysqli_connect("localhost","username","password","db_name");
$sql="SELECT * FROM user WHERE id>".$offset." LIMIT 0,10";
$ress=mysqli_query($con,$sql);
while($res= mysqli_fetch_assoc($ress)){
$display.= '
<div class="wrdLatest" id="'.$res['id'].'">
<div class="xtop"><div class="xb1"></div><div class="xb2"></div><div class="xb3"></div><div class="xb4"></div></div>
<div class="xboxcontent">
<a href="http://www.webresourcesdepot.com/an-open-source-social-network-app-movim">'.$res['name'].'</a>

</div>
<div class="xbottom"><div class="xb4"></div><div class="xb3"></div><div class="xb2"></div><div class="xb1"></div></div>
</div>
									
';

}
echo $display;
}else{
$con=mysqli_connect("localhost","username","password","db_name");
$sql="SELECT * FROM user LIMIT 0,20";
$ress=mysqli_query($con,$sql);
while($res= mysqli_fetch_assoc($ress)){
$display.= '
<div class="wrdLatest" id="'.$res['id'].'">
<div class="xtop"><div class="xb1"></div><div class="xb2"></div><div class="xb3"></div><div class="xb4"></div></div>
<div class="xboxcontent">
<a href="http://www.webresourcesdepot.com/an-open-source-social-network-app-movim">'.$res['name'].'</a>

</div>
<div class="xbottom"><div class="xb4"></div><div class="xb3"></div><div class="xb2"></div><div class="xb1"></div></div>
</div>
									
';

}
echo $display;
}

?>




Now we have to separate two part,first contents and the rest contents when scroll 
down page loading. First time load page with site.php without Query String for  
initial contents. Second time with jquery post method using with scroll down 
function.
Create html file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="site.css" type="text/css" />
<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="jquery.dimensions.pack.js"></script>

<script type="text/javascript">

$(document).ready(function(){
$("#load").load("site.php");		
function lastAddedLiveFunc() 
{ 
$('div#lastPostsLoader').html('<img src="images/bigLoader.gif">');
$.post("site.php?offset="+$(".wrdLatest:last").attr("id"),

function(data){			
if (data != "") {
$(".wrdLatest:last").after(data);	
}
$('div#lastPostsLoader').empty();
});

};  

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

</script>
</head>
<body>

<div id="load"></div>

<div id="lastPostsLoader">


</body>
</html>





jquery.dimensions.pack.js

/* Copyright (c) 2007 Paul Bakaus (paul.bakaus@googlemail.com) and Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 *
 * $LastChangedDate: 2007-12-20 08:43:48 -0600 (Thu, 20 Dec 2007) $
 * $Rev: 4257 $
 *
 * Version: 1.2
 *
 * Requires: jQuery 1.2+
 */
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(5($){$.19={P:\'1.2\'};$.u([\'j\',\'w\'],5(i,d){$.q[\'O\'+d]=5(){p(!3[0])6;g a=d==\'j\'?\'s\':\'m\',e=d==\'j\'?\'D\':\'C\';6 3.B(\':y\')?3[0][\'L\'+d]:4(3,d.x())+4(3,\'n\'+a)+4(3,\'n\'+e)};$.q[\'I\'+d]=5(b){p(!3[0])6;g c=d==\'j\'?\'s\':\'m\',e=d==\'j\'?\'D\':\'C\';b=$.F({t:Z},b||{});g a=3.B(\':y\')?3[0][\'8\'+d]:4(3,d.x())+4(3,\'E\'+c+\'w\')+4(3,\'E\'+e+\'w\')+4(3,\'n\'+c)+4(3,\'n\'+e);6 a+(b.t?(4(3,\'t\'+c)+4(3,\'t\'+e)):0)}});$.u([\'m\',\'s\'],5(i,b){$.q[\'l\'+b]=5(a){p(!3[0])6;6 a!=W?3.u(5(){3==h||3==r?h.V(b==\'m\'?a:$(h)[\'U\'](),b==\'s\'?a:$(h)[\'T\']()):3[\'l\'+b]=a}):3[0]==h||3[0]==r?S[(b==\'m\'?\'R\':\'Q\')]||$.N&&r.M[\'l\'+b]||r.A[\'l\'+b]:3[0][\'l\'+b]}});$.q.F({z:5(){g a=0,f=0,o=3[0],8,9,7,v;p(o){7=3.7();8=3.8();9=7.8();8.f-=4(o,\'K\');8.k-=4(o,\'J\');9.f+=4(7,\'H\');9.k+=4(7,\'Y\');v={f:8.f-9.f,k:8.k-9.k}}6 v},7:5(){g a=3[0].7;G(a&&(!/^A|10$/i.16(a.15)&&$.14(a,\'z\')==\'13\'))a=a.7;6 $(a)}});5 4(a,b){6 12($.11(a.17?a[0]:a,b,18))||0}})(X);',62,72,'|||this|num|function|return|offsetParent|offset|parentOffset|||||borr|top|var|window||Height|left|scroll|Left|padding|elem|if|fn|document|Top|margin|each|results|Width|toLowerCase|visible|position|body|is|Right|Bottom|border|extend|while|borderTopWidth|outer|marginLeft|marginTop|client|documentElement|boxModel|inner|version|pageYOffset|pageXOffset|self|scrollTop|scrollLeft|scrollTo|undefined|jQuery|borderLeftWidth|false|html|curCSS|parseInt|static|css|tagName|test|jquery|true|dimensions'.split('|'),0,{}))
Find Out Tutorial Tips

Monday 30 July 2012

jquery autopager with PHP (Like FaceBook Page Loader)

Hi Dears,

No comments:

Post a Comment

About Me
