ajax call to load a page on scrolling code example
Example 1: ajax call to load a page on scrolling
$(document).ready(function(){
$(window).scroll(function(){
var position = $(window).scrollTop();
var bottom = $(document).height() - $(window).height();
if( position == bottom ){
var row = Number($('#row').val());
var allcount = Number($('#all').val());
var rowperpage = 3;
row = row + rowperpage;
if(row <= allcount){
$('#row').val(row);
$.ajax({
url: 'fetch_details.php',
type: 'post',
data: {row:row},
success: function(response){
$(".post:last").after(response).show().fadeIn("slow");
}
});
}
}
});
});
Example 2: ajax call to load a page on scrolling
var position = $(window).scrollTop();
var bottom = $(document).height() - $(window).height();
Example 3: ajax call to load a page on scrolling
.container{
width: 55%;
margin: 0 auto;
border: 0px solid black;
padding: 10px 0px;
}
.post{
width: 97%;
min-height: 200px;
padding: 5px;
border: 1px solid gray;
margin-bottom: 15px;
}
.post h1{
letter-spacing: 1px;
font-weight: normal;
font-family: sans-serif;
}
.post p{
letter-spacing: 1px;
text-overflow: ellipsis;
line-height: 25px;
}
.more{
color: blue;
text-decoration: none;
letter-spacing: 1px;
font-size: 16px;
}
Example 4: ajax call to load a page on scrolling
<?php
include 'config.php';
$row = $_POST['row'];
$rowperpage = 3;
$query = 'SELECT * FROM posts limit '.$row.','.$rowperpage;
$result = mysqli_query($con,$query);
$html = '';
while($row = mysqli_fetch_array($result)){
$id = $row['id'];
$title = $row['title'];
$content = $row['description'];
$shortcontent = substr($content, 0, 160)."...";
$link = $row['link'];
$html .= '<div id="post_'.$id.'" class="post">';
$html .= '<h1>'.$title.'</h1>';
$html .= '<p>'.$shortcontent.'</p>';
$html .= '<a href="'.$link.'" target="_blank" class="more">More</a>';
$html .= '</div>';
}
echo $html;
Example 5: ajax call to load a page on scrolling
<div class="container">
<?php
include "config.php";
$rowperpage = 3;
$allcount_query = "SELECT count(*) as allcount FROM posts";
$allcount_result = mysqli_query($con,$allcount_query);
$allcount_fetch = mysqli_fetch_array($allcount_result);
$allcount = $allcount_fetch['allcount'];
$query = "select * from posts order by id asc limit 0,$rowperpage ";
$result = mysqli_query($con,$query);
while($row = mysqli_fetch_array($result)){
$id = $row['id'];
$title = $row['title'];
$content = $row['description'];
$shortcontent = substr($content, 0, 160)."...";
$link = $row['link'];
?>
<div class="post" id="post_<?php echo $id; ?>">
<h1><?php echo $title; ?></h1>
<p>
<?php echo $shortcontent; ?>
</p>
<a href="<?= $link ?>" target="_blank" class="more">More</a>
</div>
<?php
}
?>
<input type="hidden" id="row" value="0">
<input type="hidden" id="all" value="<?php echo $allcount; ?>">
</div>
Example 6: ajax call to load a page on scrolling
<?php
$host = "localhost";
$user = "root";
$password = "";
$dbname = "tutorial";
$con = mysqli_connect($host, $user, $password,$dbname);
if (!$con) {
die("Connection failed: " . mysqli_connect_error());
}
Example 7: ajax call to load a page on scrolling
CREATE TABLE `posts` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`title` varchar(100) NOT NULL,
`description` text NOT NULL,
`link` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;