Ajax Load More / Show less onClick Button Using Php
Question
I have below code for fetching data using Jquery/ajax from mysql database.
I have load more button in it which is working without any issue. But i want to add Show less button also how can i add? ( Suppose displaying 12 records on each Load more click. When i click on Load more it will be 24 and it should show Show Less button also.
When a user will click on Show Less remained will be 12 and Show Less button should be hidden. and if user clicked show More button several time and show less button will work accordingly it will be hidden only when only left records are equal to 12.)
Can somebody help to add Show Less button within my code or a better code.
PHP
<div id="alldata">
<?php
$serial = 1;
$query = mysqli_query($dba, "SELECT * FROM mybooklibrary WHERE status = 1 limit 12");
while ($get_info = mysqli_fetch_array($query)) {
$eid = $get_info['id'];
$ename = $get_info['ename'];
$enames = $get_info['enames'];
$aname = $get_info['aname'];
$filename = $get_info['filename'];
//remove brackets or whatever from name of current product
$aReplace = array('(', ')', '.');
$ename_replaces = str_replace($aReplace , '', $ename);
//////////////////////////////////////////////////////////
$url_ename6 = url_making($ename_replaces);
?>
<div class="moreData" id="<?php echo $eid;?>">
<div class="sidebar">
<div class="widget widget-shop">
<div class="product">
<div class="product-image" style="width: 112px;">
<a href="author/<?php echo $url_ename6; ?>">
<img style="box-shadow: 3px 3px 3px #ccc; border-radius: 3%;" alt="" src="<?php echo $filename; ?>">
</a>
<!--<span class="product-new">NEW</span>-->
</div>
<div class="product-description">
<!--<div class="product-category">Man - <?php echo $art_id; ?></div>-->
<div class="product-titlex">
<a href="bookDetails/<?php echo $url_ename6; ?>" style="font-weight: bold; text-shadow: 3px 3px 3px #ccc;">
<?php echo $ename; ?>
</a>
<div style="width: 200%;">
<a href="bookDetails/<?php echo $url_ename6; ?>" style="color: gray;" style="">
<?php echo $enames; ?>
</a>
</div>
<hr style="min-width: 500%;">
<div>
<a href="bookDetails/<?php echo $url_ename6; ?>" class="ur1" style="font-weight: bold; float: right;">
<?php echo $aname; ?></a>
</div>
</div>
</div><hr style="border: 1px solid black; min-width: 300%;">
</div>
<!-- end: Sidebar-->
</div>
</div>
</div>
<?php $serial++; } ?>
</div>
<div id="load<?php echo $eid; ?>">
<a class="load btn btn-block" id="<?php echo $eid; ?>" >Load more</a>
</div>
get_moredata.php
<div id="alldata">
<?php
include ("includeme/db.php");
if(isset($_POST['lastid'])) {
$lastid = mysql_real_escape_string($_POST['lastid']);
$serial = 1;
$query = mysqli_query($dba, "SELECT * FROM mybooklibrary WHERE id > '".$lastid."' limit 12");
while ($get_info = mysqli_fetch_array($query)) {
$eid = $get_info['id'];
$ename = $get_info['ename'];
$enames = $get_info['enames'];
$aname = $get_info['aname'];
$filename = $get_info['filename'];
//remove brackets or whatever from name of current product
$aReplace = array('(', ')', '.');
$ename_replaces = str_replace($aReplace , '', $ename);
//////////////////////////////////////////////////////////
$url_ename6 = url_making($ename_replaces);
?>
<div class="moreData" id="<?php echo $eid;?>">
<div class="sidebar">
<div class="widget widget-shop">
<div class="product">
<div class="product-image" style="width: 112px;">
<a href="author/<?php echo $url_ename6; ?>">
<img style="box-shadow: 3px 3px 3px #ccc; border-radius: 3%;" alt="" src="<?php echo $filename; ?>">
</a>
</div>
<div class="product-description">
<div class="product-titlex">
<a href="bookDetails/<?php echo $url_ename6; ?>" style="font-weight: bold; text-shadow: 3px 3px 3px #ccc;">
<?php echo $ename; ?>
</a>
<div style="width: 200%;">
<a href="bookDetails/<?php echo $url_ename6; ?>" style="color: gray;" style="">
<?php echo $enames; ?>
</a>
</div>
<hr style="min-width: 500%;">
<div>
<a href="bookDetails/<?php echo $url_ename6; ?>" class="ur1" style="font-weight: bold; float: right;">
<?php echo $aname; ?></a>
</div>
</div>
</div><hr style="border: 1px solid black; min-width: 300%;">
</div>
</div>
</div>
</div>
<?php $serial++; } ?>
<?php } ?>
<div id="load<?php echo $eid; ?>" class="sidebar">
<hr>
<a class="load btn btn-block" id="<?php echo $eid; ?>" >Load More</a>
</div>
</div>
JQuery / Ajax
$(document).ready(function(){
$(document).on("click",".load",function(){
//var ids= $('.moreData:last').attr("id");
var ids= $(this).attr("id");
//$(".load").html('<img src="ajax-loader.gif"/>');
$.ajax({
type: 'POST',
url: 'get_moredata.php',
cache:false,
data: {'lastid':ids},
success: function(response){
//appending the result get_moredata page result with div id alldata
$('#alldata').append(response);
//remove old load more button
$('#load'+ids).remove();
if(!response) {
$('.moreData').text('No more record to load');
}
}
});
});
});
1 answers
solution1
0 ACCPTED 2020-11-22 09:03:02
Well solved it as below:
What i did is i have made two scripts One for Load More Records and one for Load Less Records , but the get_moredata.php is the same.
And in get_moredata.php i have made 2 queries as follows:
if(isset($_POST['lastids'])) { //this id is for View Less
$lastid_less = mysql_real_escape_string($_POST['lastids']); //this id is for View Less
$query = mysqli_query($dba, "SELECT * FROM mybooklibrary WHERE id <= '".$lastid_less."'-12");
}else if(isset($_POST['lastid'])) { //this id is for View More
$lastid_more = mysql_real_escape_string($_POST['lastid']); //this id is for View More
$query = mysqli_query($dba, "SELECT * FROM mybooklibrary WHERE id > '".$lastid_more."' limit 12");
}
So it run the scripts as of the button clicked.
PHP
<div id="alldata">
<?php
$serial = 1;
$query = mysqli_query($dba, "SELECT * FROM mybooklibrary WHERE status = 1 limit 12");
while ($get_info = mysqli_fetch_array($query)) {
$eid = $get_info['id'];
$ename = $get_info['ename'];
$enames = $get_info['enames'];
$aname = $get_info['aname'];
$filename = $get_info['filename'];
//remove brackets or whatever from name of current product
$aReplace = array('(', ')', '.');
$ename_replaces = str_replace($aReplace , '', $ename);
//////////////////////////////////////////////////////////
$url_ename6 = url_making($ename_replaces);
?>
<div class="moreData" id="<?php echo $eid;?>">
<div class="sidebar">
<div class="widget widget-shop">
<div class="product">
<div class="product-image" style="width: 112px;">
<a href="author/<?php echo $url_ename6; ?>">
<img style="box-shadow: 3px 3px 3px #ccc; border-radius: 3%;" alt="" src="<?php echo $filename; ?>">
</a>
<!--<span class="product-new">NEW</span>-->
</div>
<div class="product-description">
<!--<div class="product-category">Man - <?php echo $art_id; ?></div>-->
<div class="product-titlex">
<a href="bookDetails/<?php echo $url_ename6; ?>" style="font-weight: bold; text-shadow: 3px 3px 3px #ccc;">
<?php echo $ename; ?>
</a>
<div style="width: 200%;">
<a href="bookDetails/<?php echo $url_ename6; ?>" style="color: gray;" style="">
<?php echo $enames; ?>
</a>
</div>
<hr style="min-width: 500%;">
<div>
<a href="bookDetails/<?php echo $url_ename6; ?>" class="ur1" style="font-weight: bold; float: right;">
<?php echo $aname; ?></a>
</div>
</div>
</div><hr style="border: 1px solid black; min-width: 300%;">
</div>
<!-- end: Sidebar-->
</div>
</div>
</div>
<?php $serial++; } ?>
</div>
<div id="load<?php echo $eid; ?>">
<a class="load btn btn-block" id="<?php echo $eid; ?>" >Load more</a>
</div>
get_moredata.php
<div class="alldata">
<?php
include ("inc/db.php");
include ("inc/functions.php");
if(isset($_POST['lastids'])) {
$lastid_less = mysql_real_escape_string($_POST['lastids']); //this id is for View Less
$query = mysqli_query($dba, "SELECT * FROM mybooklibrary WHERE id <= '".$lastid_less."'-12");
}else if(isset($_POST['lastid'])) {
$lastid_more = mysql_real_escape_string($_POST['lastid']); //this id is for View More
$query = mysqli_query($dba, "SELECT * FROM mybooklibrary WHERE id > '".$lastid_more."' limit 12");
}
while ($get_info = mysqli_fetch_array($query)) {
$eid = $get_info['id'];
$ename = $get_info['ename'];
$enames = $get_info['enames'];
$aname = $get_info['aname'];
//remove brackets or whatever from name of current product
$aReplace = array('(', ')', '.');
$ename_replaces = str_replace($aReplace , '', $ename);
//////////////////////////////////////////////////////////
$url_ename6 = url_making($ename_replaces);
?>
<div class="moreData" id="<?php echo $eid;?>">
<div class="sidebar">
<div class="widget widget-shop">
<div class="product">
<div class="product-image" style="width: 112px;">
<a href="author/<?php echo $url_ename6; ?>">
<?php
$exts4 = array('png','jpg','jpeg','gif');
foreach (array_unique($exts4) as $ext4) {
if (file_exists("images/titles/".$get_info['id'].".".$ext4)) {
$path4 = "images/titles/".$get_info['id'].".".$ext4;
?>
<img style="box-shadow: 3px 3px 3px #ccc; border-radius: 3%;" alt="" src="<?php echo $path4; ?>">
<?php }} ?>
</a>
</div>
<div class="product-description">
<div class="product-titlex">
<a href="bookDetails/<?php echo $url_ename6; ?>" style="font-weight: bold; text-shadow: 3px 3px 3px #ccc;">
<?php echo $ename; ?>
</a>
<div style="width: 200%;">
<a href="bookDetails/<?php echo $url_ename6; ?>" style="color: gray;" style="">
<?php echo $enames; ?>
</a>
</div>
<hr style="min-width: 500%;">
<div>
<a href="bookDetails/<?php echo $url_ename6; ?>" class="ur1" style="font-weight: bold; float: right;">
<?php echo $aname; ?></a>
</div>
</div>
</div><hr style="border: 1px solid black; min-width: 300%;">
</div>
<!-- end: Sidebar-->
</div>
</div>
</div>
<?php } ?>
<?php
if (isset($lastid_less)) {
//count if clicked on lastid_less
$queryCount = mysqli_query($dba, "SELECT * FROM mybooklibrary WHERE id <= '$lastid_less'");
echo $get_Count = mysqli_num_rows($queryCount)-12;
}else{
//count if clicked on lastid_more
$queryCount = mysqli_query($dba, "SELECT * FROM mybooklibrary WHERE id <= '$lastid_more'");
echo $get_Count = mysqli_num_rows($queryCount)+12;
}
if ($get_Count <= 12) {
?>
<!-- show this button only if books are shown are less than equal to 12 -->
<!-- because my default is 12 -->
<div id="load<?php echo $eid; ?>" class="sidebar">
<hr>
<a class="load btn btn-block" id="<?php echo $eid; ?>" >View More</a>
</div>
<?php }else{ ?>
<!-- show both buttons if books are shown greater than 12 -->
<div id="load<?php echo $eid; ?>" class="sidebar">
<hr>
<a class="load btn btn-block" id="<?php echo $eid; ?>" >View More</a>
</div>
<div id="loads<?php echo $eid; ?>" class="sidebar">
<hr>
<a class="loads btn btn-block" id="<?php echo $eid; ?>" >View Less</a>
</div>
<?php } ?>
</div>
JQuery / Ajax for Load More Records
<script>
//this query is for Load More Records
$(document).ready(function(){
$(document).on("click",".load",function(){
var ids= $(this).attr("id");
$.ajax({
type: 'POST',
url: 'get_moredata.php',
cache:false,
data: {'lastid':ids},
success: function(response){
//appending the result get_moredata page result with div id alldata
$('#alldata').append(response);
//remove old load more button
$('#load'+ids).remove();
if(!response) {
$('.moreData').text('No more record to load');
}
}
});
});
});
</script>
JQuery / Ajax for Load Less Records
<script>
//this query is for Load Less Records
$(document).ready(function(){
$(document).on("click",".loads",function(){
var ids= $(this).attr("id");
$.ajax({
type: 'POST',
url: 'get_moredata.php',
cache:false,
data: {'lastids':ids},
success: function(response){
//appending the result get_moredata page result with div id alldata
$('#alldata').append(response);
//remove old load more button
$('#loads'+ids).remove();
if(!response) {
$('.moreData').text('No more record to load');
}
}
});
});
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
AJAX PHP Show More Button
Load More / Show Less issues using jquery
How to load more or show less div/cards on button click without using jquery
Show more and show less by Button
Php and jQuery more and less text using load more
Show more / less button with transition
Hide 'show more' button using AJAX
Show more/less on PHP value
Load more posts using ajax, php
an issue in (Show more) / (Show Less) button VueJS
Related Tags