AJAX, PHP & MYSQL- Limit Data Selection and Offset - php

Question

Okay so here my question i have a blog and i want to show user on first page only 5 posts so i execute this query
mysql_query("select * from posts LIMIT 5");
And then after showing 5 post i made a button named as: Show more posts
when user click on that button another PHP file(loadmoreposts.php) executed in which i execute this query
mysql_query("select * from posts LIMIT 5 OFFSET 5");
but i want to show user 5 post every time it clicks on that button so i make this loop in my PHP script loadmoreposts.php
include('dbConnectClass.php');
$connect = new doConnect();
$beforequery = mysql_query('select * from posts ORDER BY id DESC LIMIT 1;');
if (mysql_num_rows($beforequery) > 0) {
$max_public_id = mysql_fetch_row($beforequery);
$lastid = $max_public_id[0]; //Here it is
}else{
$lastid = "[0]";
}
echo "Last ID $lastid<br />";
$m=5;
for($n=5; $n<=15; $n++):
$afterQuery = mysql_query("select * from posts LIMIT $m OFFSET $m");
$m = $m+5;
$result = "";
while($row = mysql_fetch_assoc($afterQuery)){
$result .= "<div class='cd-timeline-block'>";
$result .="<div class='cd-timeline-img cd-warning'>";
$result .=" <i class='fa fa-pencil-square-o'></i>";
$result .="</div>";
$result .="<div class='cd-timeline-content'>";
$result .= "<h2>{$row['title']}</h2>
<p>{$row['content']}</p>
<img src='{$row['imagesrc']}' alt=''>
<br />
<span style='font-size:85%;'' class='label label-primary'>{$row['category']}</span>
</div>
</div>";
}
echo $result;
endfor;
Let me explain what i did in this script, first i connect to database by a class then i grab last id of my post(last updated post) by running $beforequery and then one more time i execute another query named as $afterquery and then i get my results
but i don't want to show all my posts only in one click i want to show them 5 at a time when user click on that button like first five are already showing but clicking on button will show 5 more then after clicking again it will show the next 5 posts.
this script is then grabbed by this AJAX script:
var loadmoreposts = function () {
$.post('assets/includes/fetchMoreRows.php').done(function( data ) {
$('#displaymoreposts').html(data);
});
}
This loadmoreposts(); fuction is running in onload="loadmoreposts();"body tag
Any Suggestions and help will be appreciated :)
============================
*EDITED**
===========================
I removed the loop and added this but not working
include('dbConnectClass.php');
$connect = new doConnect();
$m = $_POST['offset'];
$afterQuery = mysql_query("select * from posts LIMIT 5 OFFSET $m");
$result = "";
while($row = mysql_fetch_assoc($afterQuery)){
$result .= "<div class='cd-timeline-block'>";
$result .="<div class='cd-timeline-img cd-warning'>";
$result .=" <i class='fa fa-pencil-square-o'></i>";
$result .="</div>";
$result .="<div class='cd-timeline-content'>";
$result .= "<h2>{$row['title']}</h2>
<p>{$row['content']}</p>
<img src='{$row['imagesrc']}' alt=''>
<br />
<span style='font-size:85%;'' class='label label-primary'>{$row['category']}</span>
</div>
</div>" ;
// $result .= "<tr><td> {$row['name']}</td>"."<td> {$row['password']}</td></tr></p>";
}
echo $result;
and JS/AJAX script is now this
var offsetValue = 0;
var loadmoreposts = function () {
$.post( 'assets/includes/fetchMoreRows.php', { offset: offsetValue} ).done(function( data ) {
$('#displaymoreposts').html(data);
offsetValue += 5;
});
}

Answer 1

Your AJAX script needs to send the current value for OFFSET, starting with 0. Everytime you click on your Show more posts link, it increases the value by 5.
So you should change your AJAX script to:
var offsetValue = 0;
var loadmoreposts = function () {
$.post( 'assets/includes/fetchMoreRows.php', { offset: offsetValue} ).done(function( data ) {
$('#displaymoreposts').html(data);
offsetValue += 5;
});
}
In your PHP script, you can grab the offset value like that:
$m = $_POST['offset'];
Also don't increase LIMIT. Change your query to:
mysql_query("select * from posts LIMIT 5 OFFSET $m");
If you increase LIMIT, the script will return +5 more posts everytime.
Hope that helps.

Answer 2

You can simply send the offset in the AJAX request, and use that offset in your query, here are simple steps:
Load first 5 posts, make the value sent by AJAX "load more" button be 5
When "load more" button is clicked, take the value sent (in our case 5) and insert it in the query (hopefully using prepared statements for security) and retrieve next 5 posts and send back the 5 posts and the new value for "load more" button which is now 10 (can be calculated by adding 5 to the value you got from the AJAX request
repeat, by sending 10 when the "load more" button is clicked, retrieving next 5 posts starting at number/offset 10, returning the 5 posts and the new value for the "load more" button which is 15 (10 + 5)
and so on ...

Answer 3

Try this..
//variable to hold the offset
var offSet = 5; //initial value
//send this in your post request
$.post('url', {aOffset : offset }, function(returnedData) {
// do something here
//update the offset value
offset+=5; });