Now a days Facebook, Youtube and Twitter are using load more data techniques. This provide the features of loading data dynamically using AJAX instead of giving pagination links.
This is very useful techniques because load data without reloading a webpage. Basically AJAX and Jquery are responsible for this dynamic loading of Data.
In this article here we are going to discuss how to load data without refreshing a webpage using jQuery in PHP with AJAX. This technique loads more and more data with the required limit given in it as clicking on load more button.
Let us start the tutorial.
Firstly create table name courses in database.
Table of Contents
Database
CREATE TABLE IF NOT EXISTS `courses` ( `course_id` int(11) NOT NULL AUTO_INCREMENT, `course_name` varchar(200) NOT NULL DEFAULT '', PRIMARY KEY (`course_id`), FULLTEXT KEY `course_name` (`course_name`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1636 ;
JavaScript
Before JavaScript code we have add ajquery library for its functionality. Here we adding jquery.js as shown below. $(document).on(“click”,”.load”,function(){ using this to check click event on Load more button instead of (.live) . Using this var ids= $(this).attr(“id”); getting last data id which fetched to get after that id values.
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(document).on("click",".load",function(){ //var ids= $('.vikash: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) { $('.vikash').text('No more record to load'); } } }); }); }); </script>
Index.php
This is the PHP code for display dynamic data form database.
<div class="row" id="alldata"> <?php include('config.php'); $sql= mysql_query("select * from `courses` ORDER BY `course_id` DESC LIMIT 5"); while($rows=mysql_fetch_array($sql)) {?> <div class="vikash" id="<?php echo $rows['course_id'];?>"> <?php echo $lastid= $rows['course_id']; echo $rows['course_name']; ?> </div> <?php }?> <div id="load<?php echo $lastid; ?>"><button class="load" id="<?php echo $lastid; ?>" >Load more</button></div>
get_moredata.php
This page is used to get Next result after click on load more button.
<div class="row" id="alldata"> <?php include('config.php'); if(isset($_POST['lastid'])) { $lastid = mysql_real_escape_string($_POST['lastid']); $que= mysql_query("select * from `courses` WHERE `course_id`<'$lastid' ORDER BY `course_id` DESC limit 10"); $count=mysql_num_rows($que); while($rows=mysql_fetch_array($que)) {?> <div class="vikash" id="<?php echo $rows['course_id'];?>"><?php echo $lastid=$rows['course_id']; echo $rows['course_name']; ?> </div> <?php } ?> </div> <div id="load<?php echo $lastid; ?>"><button class="load" id="<?php echo $lastid; ?>" >Load more</button></div><?php } ?> </div>
CSS
.vikash{ width:700px; height:80px; background-color:pink; border:1px solid #000; margin-left:150px; margin-right:150px; } .load { width: 704px; height: 50px; margin-left: 148px; background-color: burlywood; font-weight: 900; }