Hello friends, I hope that your programming study going well and you execute them smoothly 😉 . Today i am going to share with you one most trending functionality i.e. Load more content while scrolling with jquery ajax and PHP. Yepp, you read very well. Load more content while scrolling is most famous functionality now days. People don’t want to click on next button or something which become their headache. In this tutorial, i am showing you how to load more content while scrolling with jQuery AJAX and PHP without click on next button. So let’s start it..
Important for you :Dynamically add / remove input fields using jquery
In this tutorial all the major role plays jQuery while PHP and MySQL only use for getting data. jQuery’s scroll function detect scroll event and check whether loaded data is end of finish. If it found that then send second request to the server for load more data into pipeline. Here we use jquery’s three functions height(), scrollTop() and scroll. See the below code fore more clarification.
Important for you :Preview (Thumbnail) image before upload using jquery
Here this is my config.php file which simply connect PHP to MySQL database. You should change your username, password and database name. See the config.php file below
config.php
<?php $db_hostname = 'localhost'; // Database hostname $db_username = 'root'; // Database username $db_password = ''; // Database password $db_name = 'test'; // Database name $conn = mysqli_connect($db_hostname, $db_username, $db_password, $db_name); if(!$conn) { echo "Unable to connect database".mysqli_error($conn);die; } else { // echo "Database connected successfully"; } ?>After successfully connect to the database we will go to our project ajax infinity scroll data using jQuery and PHP. See the index.php file. In the index.php file you will find that i fetch first 20 rows from the database using jquery onload function and render in the table. Now when user scroll the page and exceed the page limit onscroll function send another request to the server and fetch next 20 records from database. This process goes on untill you will not get all data from the database. You don’t need to click on next button every time you want more data. You have seen load more content while scrolling the page type functionality in facebook. instagram takipçi hilesi
Index.php
<!DOCTYPE html> <html> <head> <title>Ajax scroll pagination tutorial</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"> <!-- Script for Bootstrap JS --> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> </head> <body id="body"> <div class="container"> <div class="row"> <div class="col-md-12"> <center><h2>Pagination Tutorial</h2></center> </div> </div> <br> <div class="row"> <div class="col-md-12"> <table class="table table-responsive table-bordered"> <thead> <tr> <th>Id</th> <th>Firstname</th> <th>Lastname</th> </tr> </thead> <tbody id="all_data"> </tbody> </table> </div> </div> </div> </body> <script type="text/javascript"> function getAjaxData(offset) { var form_data = { offset : offset } $.ajax({ url : "/ajax-data.php", data : form_data, type : "POST", dataType : "json", success : function(response) { var count_data = response.length; var html = ''; for (var i = 0; i < 20; i++) { html = html + '<tr>'; html = html + '<td>' + response[i]['id'] + '</td>'; html = html + '<td>' + response[i]['f_name'] + '</td>'; html = html + '<td>' + response[i]['l_name'] + '</td>'; html = html + '</tr>'; }; $('#all_data').append(html); } }); } </script> <script type="text/javascript"> var offset = 0; $(window).load(function(){ getAjaxData(offset); }); $(window).scroll(function(){ var win_height = $(this).height(); var cur_height = $(this).scrollTop(); var final_height = win_height + cur_height; var doc_height = $(document).height(); if(final_height == doc_height) { offset = offset + 20; getAjaxData(offset); } }); </script> </html>Now see the server side file which will send data when scroll function made the request. See the below file.
ajax-data.php
<?php $offset = 0; if (!empty($_POST['offset'])) { $offset = $_POST['offset']; } include 'config.php'; mysqli_select_db($conn,$db_name); $master_sql = "SELECT * FROM pagination"; $master_query = mysqli_query($conn,$master_sql); $master_row = mysqli_num_rows($master_query); $sql = "SELECT * FROM pagination LIMIT 20 OFFSET $offset"; $query = mysqli_query($conn, $sql); $row = mysqli_num_rows($query); $resp_data = []; while($data = mysqli_fetch_array($query)) { $resp_data[] = array( 'id' => $data['id'], 'f_name' => $data['f_name'], 'l_name' => $data['l_name'] ); } echo json_encode($resp_data); ?>I hope that you may like this load more contents while jquery ajax and PHP tutorial. Please share it with your friends. If you have any kind problem regarding this tutorial, let me know in the comment. I will help you to solve that problem. Thank you very much. Happy coding 🙂
