ajax call to load a page on scrolling

1$(document).ready(function(){
2 
3 $(window).scroll(function(){
4 
5  var position = $(window).scrollTop();
6  var bottom = $(document).height() - $(window).height();
7
8  if( position == bottom ){
9
10   var row = Number($('#row').val());
11   var allcount = Number($('#all').val());
12   var rowperpage = 3;
13   row = row + rowperpage;
14
15   if(row <= allcount){
16    $('#row').val(row);
17    $.ajax({
18     url: 'fetch_details.php',
19     type: 'post',
20     data: {row:row},
21     success: function(response){
22      $(".post:last").after(response).show().fadeIn("slow");
23     }
24    });
25   }
26  }
27
28 });
29 
30});

1<?php
2
3$host = "localhost"; /* Host name */
4$user = "root"; /* User */
5$password = ""; /* Password */
6$dbname = "tutorial"; /* Database name */
7
8$con = mysqli_connect($host, $user, $password,$dbname);
9
10// Check connection
11if (!$con) {
12  die("Connection failed: " . mysqli_connect_error());
13}

1.container{
2 width: 55%;
3 margin: 0 auto;
4 border: 0px solid black;
5 padding: 10px 0px;
6}
7
8/* post */
9.post{
10 width: 97%;
11 min-height: 200px;
12 padding: 5px;
13 border: 1px solid gray;
14 margin-bottom: 15px;
15}
16
17.post h1{
18 letter-spacing: 1px;
19 font-weight: normal;
20 font-family: sans-serif;
21}
22
23
24.post p{
25 letter-spacing: 1px;
26 text-overflow: ellipsis;
27 line-height: 25px;
28}
29
30/* more link */
31.more{
32 color: blue;
33 text-decoration: none;
34 letter-spacing: 1px;
35 font-size: 16px;
36}

1<div class="container">
2
3<?php
4
5 include "config.php";
6
7 // Row per page
8 $rowperpage = 3;
9
10 // counting total number of posts
11 $allcount_query = "SELECT count(*) as allcount FROM posts";
12 $allcount_result = mysqli_query($con,$allcount_query);
13 $allcount_fetch = mysqli_fetch_array($allcount_result);
14 $allcount = $allcount_fetch['allcount'];
15
16 // select first 3 posts
17 $query = "select * from posts order by id asc limit 0,$rowperpage ";
18 $result = mysqli_query($con,$query);
19
20 while($row = mysqli_fetch_array($result)){
21
22   $id = $row['id'];
23   $title = $row['title'];
24   $content = $row['description'];
25   $shortcontent = substr($content, 0, 160)."...";
26   $link = $row['link'];
27 ?>
28
29   <div class="post" id="post_<?php echo $id; ?>">
30     <h1><?php echo $title; ?></h1>
31     <p>
32       <?php echo $shortcontent; ?>
33     </p>
34     <a href="<?= $link ?>" target="_blank" class="more">More</a>
35   </div>
36
37 <?php
38 }
39 ?>
40
41 <input type="hidden" id="row" value="0">
42 <input type="hidden" id="all" value="<?php echo $allcount; ?>">
43
44</div>

1var position = $(window).scrollTop();
2var bottom = $(document).height() - $(window).height();

1CREATE TABLE `posts` (
2  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
3  `title` varchar(100) NOT NULL,
4  `description` text NOT NULL,
5  `link` varchar(255) NOT NULL
6) ENGINE=InnoDB DEFAULT CHARSET=latin1;

1<?php
2
3// configuration
4include 'config.php';
5
6$row = $_POST['row'];
7$rowperpage = 3;
8
9// selecting posts
10$query = 'SELECT * FROM posts limit '.$row.','.$rowperpage;
11
12$result = mysqli_query($con,$query);
13
14$html = '';
15
16while($row = mysqli_fetch_array($result)){
17  $id = $row['id'];
18  $title = $row['title'];
19  $content = $row['description'];
20  $shortcontent = substr($content, 0, 160)."...";
21  $link = $row['link'];
22  // Creating HTML structure
23  $html .= '<div id="post_'.$id.'" class="post">';
24  $html .= '<h1>'.$title.'</h1>';
25  $html .= '<p>'.$shortcontent.'</p>';
26  $html .= '<a href="'.$link.'" target="_blank" class="more">More</a>';
27  $html .= '</div>';
28
29}
30
31echo $html;