Today we learn about some thing in Ajax in jquery.First i said thanks for the code.And i got this code from google and share with all.Its really helpful for us. How can the content loading from scroll using ajax method.This is easiest way to learn it.simply few steps to follow. And this is one type of pagination too.
Step 1:
<script type="text/javascript" src="http://www:yoursite.com/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www:yoursite.com/js/scroll.js"></script>
<script type="text/javascript">
// var mtu4 = jQuery.noConflict();
// mtu4(function($){
$('#archive1').scrollLoad({
url : 'http://www.yoursite.com/getarchive1_infos.php', //your ajax file to be loaded when scroll breaks ScrollAfterHeight
getData : function()
{
// you can post some data along with ajax request return {offset:rel_data,userName:'Web Developer'};
var rel_data = $("#infinite_scroll").attr("rel");
rel_data = parseInt(rel_data);
rel_data = rel_data+15;
$("#infinite_scroll").attr("rel",rel_data);
return {offset:rel_data};
},
start : function() {
$('<div class="loading" style="padding:10px 0; margin:0 37.7%;"><p style=" font-size: 14px;font-weight: bold;line-height: 25px;">Loading...</p><img src="http://www.yoursite.com/images/uploading.gif"/></div>').appendTo(this);
// you can add your effect before loading data
},
ScrollAfterHeight : 95, //this is the height in percentage after which ajax stars
onload : function( data ) {
$(this).append( data );
$('.loading').remove();
}, // this event fires on ajax success
continueWhile : function( resp ) {
if( $(this).children('li').length >= 100 ) { // stops when number of 'li' reaches 100
return false;
}
return true;
}
});
//});
</script>
Step 2:
Following content html first loading with 15 records in landing page.Once the end of the scroll another 15 records will loading from ajax file (getarchive1_infos.php).
<div class="chart_table1" id="archive1">
<div id="infinite_scroll" class="scroll" rel="0">
<?php for ($i=1; $i<=15; $i++){ ?>
<p>hi this is sample test</p>
<?php } ?>
</div>
</div>
Step 3:
This is getarchive1_infos.php ajax file.Another 15 records are loading.
<?php
$offset = $_REQUEST['offset'];
for ($i=1; $i<=$offset; $i++){ ?>
<p>hi this is sample test from ajax</p>
<?php } ?>
step 4:
And this is scroll.js script file.
<script type="application/javascript">
( function( $ ) {
$.fn.scrollLoad = function( options ) {
var defaults = {
url : '',
data : '',
ScrollAfterHeight : 90,
onload : function( data, itsMe ) {
alert( data );
},
start : function( itsMe ){},
continueWhile : function() {
return true;
},
getData : function( itsMe ) {
return '';
}
};
for( var eachProperty in defaults ) {
if( options[ eachProperty ] ) {
defaults[ eachProperty ] = options[ eachProperty ];
}
}
return this.each( function() {
this.scrolling = false;
this.scrollPrev = this.onscroll ? this.onscroll : null;
$( this ).bind( 'scroll', function ( e ) {
if( this.scrollPrev ) {
this.scrollPrev();
}
if( this.scrolling ) return;
//var totalPixels = $( this ).attr( 'scrollHeight' ) - $( this ).attr( 'clientHeight' );
if( Math.round( $( this ).attr( 'scrollTop' ) / ( $( this ).attr( 'scrollHeight' ) - $( this ).attr( 'clientHeight' ) ) * 100 ) > defaults.ScrollAfterHeight ) {
defaults.start.call( this, this );
this.scrolling = true;
$this = $( this );
$.ajax( { url : defaults.url, data : defaults.getData.call( this, this ), type : 'post', success : function( data ) {
$this[ 0 ].scrolling = false;
defaults.onload.call( $this[ 0 ], data, $this[ 0 ] );
if( !defaults.continueWhile.call( $this[ 0 ], data ) ) {
$this.unbind( 'scroll' );
}
}});
}
});
});
}
})( jQuery );
</script>
Finally we learn about this , how can scroll the content loading from ajax.
cheers friends!!! :)
