In this post we are going to learn load more data using Ajax JQuery in PHP with MySql. This is very common feature which is used in big social networking site like facebook, twitter, youtube etc. In this feature data load without page refresh. Data load from database using Ajax function call. With Ajax function call it get data from database and display on front end without page refresh. This functionality is very useful in load data step by step without page refresh and pagination.
In this post, We have discuss one other category of pagination in which there is one load more jquery button when we have click on that button next page data has been load on the same page without page refresh. This is simple tutorial on load data using Ajax Jquery in PHP.
If you have seen some social media sites like Youtube Twitter and even Facebook has been using load more data features. All this sites are use this features in which they do not display pagination links on their website but they are use this load more data button so when we have click on that button they get next page data from database by using Ajax with PHP and append that data on same page by using Jqueyr. In this data has been loaded without page refresh. So In this tutorial, We have implement this feature like load more data on single click of button and from the database we will get data by using jQuery Ajax and PHP. In this tutorial we will discuss step by step load more data on button using Jquery with Ajax PHP.
Check Below Online Demo
Load More Data using Ajax Jquery
| How to generate simple random password in php? |
| Create Simple Image using PHP |
Source Code
index.php
Under this page we have load first data on this page and write Jquery and Ajax code for fetch next data on this page.
<?php
$connect = mysqli_connect("localhost", "root", "", "testing");
$sql = "SELECT * FROM tbl_video LIMIT 2";
$result = mysqli_query($connect, $sql);
$video_id = '';
?>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<br />
<br />
<br />
<div class="table-responsive">
<h2 align="center">Load More Data using Ajax Jquery</h2><br />
<table class="table table-bordered" id="load_data_table">
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row["video_title"]; ?></td>
</tr>
<?php
$video_id = $row["video_id"];
}
?>
<tr id="remove_row">
<td><button type="button" name="btn_more" data-vid="<?php echo $video_id; ?>" id="btn_more" class="btn btn-success form-control">more</button></td>
</tr>
</table>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$(document).on('click', '#btn_more', function(){
var last_video_id = $(this).data("vid");
$('#btn_more').html("Loading...");
$.ajax({
url:"load_data.php",
method:"POST",
data:{last_video_id:last_video_id},
dataType:"text",
success:function(data)
{
if(data != '')
{
$('#remove_row').remove();
$('#load_data_table').append(data);
}
else
{
$('#btn_more').html("No Data");
}
}
});
});
});
</script>
load_data.php
This page has fetch data from database. This page has been received ajax request from index page and fetch data from database and send back data to index page.
<?php
$output = '';
$video_id = '';
sleep(1);
$connect = mysqli_connect("localhost", "root", "", "testing");
$sql = "SELECT * FROM tbl_video WHERE video_id > ".$_POST['last_video_id']." LIMIT 2";
$result = mysqli_query($connect, $sql);
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_array($result))
{
$video_id = $row["video_id"];
$output .= '
<tbody>
<tr>
<td>'.$row["video_title"].'</td>
</tr></tbody>';
}
$output .= '
<tbody><tr id="remove_row">
<td><button type="button" name="btn_more" data-vid="'. $video_id .'" id="btn_more" class="btn btn-success form-control">more</button></td>
</tr></tbody>
';
echo $output;
}
?>
Database
--
-- Database: `testing`
--
-- --------------------------------------------------------
--
-- Table structure for table `tbl_video`
--
CREATE TABLE IF NOT EXISTS `tbl_video` (
`video_id` int(11) NOT NULL AUTO_INCREMENT,
`video_title` text NOT NULL,
PRIMARY KEY (`video_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=21 ;
--
-- Dumping data for table `tbl_video`
--
INSERT INTO `tbl_video` (`video_id`, `video_title`) VALUES
(1, 'How to generate simple random password in php?\r\n'),
(2, 'Create Simple Image using PHP\r\n'),
(3, 'How to check Username availability in php and MySQL using Ajax Jquery\r\n'),
(4, 'How to Insert Watermark on to Image using PHP GD Library\r\n'),
(5, 'Make SEO Friendly / Clean Url in PHP using .htaccess\r\n'),
(6, 'Live Table Add Edit Delete using Ajax Jquery in PHP Mysql\r\n'),
(7, 'How to Export MySQL data to Excel in PHP - PHP Tutorial\r\n'),
(8, 'How to Load More Data using Ajax Jquery\r\n'),
(9, 'Dynamically Add / Remove input fields in PHP with Jquery Ajax\r\n'),
(10, 'Read Excel Data and Insert into Mysql Database using PHP\r\n'),
(11, 'How to Convert Currency using Google Finance in PHP\r\n'),
(12, 'Dynamically generate a select list with jQuery, AJAX & PHP\r\n'),
(13, 'How to get Multiple Checkbox values in php\r\n'),
(14, 'Ajax Live Data Search using Jquery PHP MySql\r\n'),
(15, 'Auto Save Data using Ajax, Jquery, PHP and Mysql\r\n'),
(16, 'How to Use Ajax with PHP for login with shake effect\r\n'),
(17, 'Facebook style time ago function using PHP\r\n'),
(18, 'Upload Resize Image using Ajax Jquery PHP without Page Refresh\r\n\r\n'),
(19, 'How to Search for Exact word match FROM String using RLIKE\r\n'),
(20, 'How To Create A Show Hide Password Button using Jquery\r\n');
Thanks its working
ReplyDeleteThis is a life saver post Thank you!
ReplyDeleteWith this code, i can pass single variable to get the result, but i need 2 variables to get the result by using AJAX.
ReplyDeleteThanks in advance to webslesson.info to giving this opportunity to learn about AJAX.
very good lesson=nice job
ReplyDeleteHow do I run scripts from ajax response?
ReplyDeleteYour code is vulnerable to SQL Injection in this line:
ReplyDelete$sql = "SELECT * FROM tbl_video WHERE video_id > ".$_POST['last_video_id']." LIMIT 2";
make sure to that you escape user suppplier input and use mysqli_real_escape_string.
So a table needs to be in mySql. and then the index and load more phps work together to load tables?
ReplyDeleteAwesome
ReplyDeleteThanks a lot. Its clean with no bullshit.
ReplyDeleteDoesn't work for me nor in my project nor in this demo (keeps loading infinetkly).
ReplyDeleteThe system even integrates popular content spinning and link indexing tools so you can submit URLs even faster and get the most out of your backlinks. The network keeps growing, with new sites added every week, so sign up now and submit your URLs within the next few minutes to boost your rankings and get the traffic your pages deserve.http://www.socialmonkee.com/lstw78
ReplyDeleteyour online demo is not working
ReplyDeletewhat about loading more than 1 item at a time?
ReplyDeletewhat about loading one item at a time?
ReplyDeleteNice. thanks
ReplyDeletenice
ReplyDeleteSir, I have deleted some records from table. (the ids are now 2, 3, 6 ,8, 9, 10,11,13,15,16 ... ... ) As a result the "load more" operation is not showing few records .. what can I do now???
ReplyDelete