Using AJAX/PHP/mysqli to create a load more button - php

Question

In my code below I am trying to create a load more button using AJAX. I have main.php which includes PHP code for calling blogs from database initially, some jQuery code and a load more button. Then I have ajax_more.php which calls more data from database when load more is clicked. Load more buttons are displayed perfectly and when clicked they change to loading and then disappear. Nothing else happens and main.php still shows those two initial blogs which we call first. Please look into code and help where this code has gone wrong.
main.php
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(document).on('click', '.show_more', function () {
var ID = $(this).attr('id');
$('.show_more').hide();
$('.loding').show();
$.ajax({
type: 'POST',
url: 'ajax_more.php',
data: 'id=' + ID,
success: function (html) {
$('#show_more_main' + ID).remove();
$('.columns').append(html);
}
});
});
});
</script>
<?php
$query = "
SELECT blogs_id, title, body, posted_by, full_name, bio, posted, category
FROM blogs
INNER JOIN categories
ON categories.category_id=blogs.category_id
WHERE category='cat1' OR category='catt2' OR category='cat3' OR category='cat4'
ORDER BY blogs_id desc
LIMIT 2
";
$result = mysqli_query($con,$query);
$rowCount = mysqli_num_rows($result);
if($rowCount > 0){
while ($row = mysqli_fetch_assoc($result)) {
$blogs_id = $row['blogs_id'];
$title = $row['title'];
$body = $row['body'];
$posted_by = $row['posted_by'];
$full_name = $row['full_name'];
$bio = $row['bio'];
$posted = $row['posted'];
echo "
<div class='db'>
<h2>$title</h2>
<p>$body</p>
<p>$bio</p>
</div>
";
?>
<div class="show_more_main" id="show_more_main<?php echo $blogs_id; ?>">
<span id="<?php echo $blogs_id; ?>" class="show_more" title="Load more posts">Show more</span>
<span class="loding" style="display: none;"><span class="loding_txt">Loading…</span></span>
</div>
ajax_more.php
<?php
if(isset($_POST["blogs_id"]) && !empty($_POST["blogs_id"])) {
$query = "
SELECT blogs_id, title, body, posted_by, full_name, bio, posted, category
FROM blogs
INNER JOIN categories ON categories.category_id=blogs.category_id
WHERE category='Entertainment' OR category='Politics' OR category='Sports' OR category='Travel'
AND blogs_id < ".$_POST['blogs_id']."
ORDER BY blogs_id DESC
LIMIT 2
";
$result = mysqli_query($con,$query);
$rowCount = mysqli_num_rows($result);
if($rowCount > 0){
while ($row = mysqli_fetch_assoc($result)) {
$blogs_id = $row['blogs_id'];
$title = $row['title'];
$body = $row['body'];
$posted_by = $row['posted_by'];
$full_name = $row['full_name'];
$bio = $row['bio'];
$posted = $row['posted'];
echo "
<div class='db'>
<h2>$title</h2>
<p>$body</p>
<p>$bio</p>
</div>
";
?>

Answer 1

You should change your query to this
$query = "SELECT blogs_id, title, body, posted_by, full_name, bio, posted, category FROM
blogs INNER JOIN categories ON categories.category_id=blogs.category_id WHERE
(category='Entertainment' OR category='Politics' OR category='Sports' OR category='Travel')
AND blogs_id < " . $_POST['blogs_id'] . " ORDER BY blogs_id DESC LIMIT 2";
All the OR's must be enclosed in the brackets....

Answer 2

You can follow below technique to load more data with just replacing morebox html.
blog.php
<div class="tutorial_list">
<!-- LOAD YOUR PHP BLOG DATA -->
<div class="loading"><img src="fb-load.gif"/></div>
<!-- More Button here $ID values is a last post id value. -->
<div id="show_more<?php echo $ID; ?>" class="morebox">
more
</div>
</div>
<script>
$(document).on('click', '.show_more', function() {
{
var ID = $(this).attr("id");
if (ID) {
$('.morebox').hide();
$('.loding').show();
$.ajax({
type: "POST",
url: "ajax_more.php",
data: "lastpost=" + ID,
cache: false,
success: function(html) {
$('.loading').hide();
$('.tutorial_list').append(html);
$("#show_more" + ID).remove(); // removing old more button
}
});
} else {
$(".morebox").html('The End'); // no results
}
return false;
});
</script>
ajax_more.php
<!-- LOAD YOUR PHP BLOG DATA WITH lastpost ID and remember to add below code for load more -->
<!-- More Button here $ID values is a last post id value. -->
<div id="show_more<?php echo $ID; ?>" class="morebox">
more
</div>