CODEWITHSUNDEEP
phpjqueryajaxhtml
KABULPUT
KABULPUT

Reputation: 25

How to dynamically retrieve data to div on page scroll

I have been searching for an answer for hours with no luck, so I decided to come here...

I want my page to dynamically load data from my database to a <div> when a user scrolls to the bottom of the page.

Each new set of data should be 5 records after the last set.

If anybody could please take time to look through my codes I will forever be grateful...

This is my CODE:

<!DOCTYPE html>
<html>
<head>
    <title>loaded</title>
  <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
  
</head>
<style>
body{
	font-family:helvetica;
	background-color:#58ACFA;
	width:100%;
}
h1{
	text-align:center;
	font-size:35px;
	margin-top:50px;
	color:#0B173B;
}
#all_rows{
    overflow-y: scroll;
    height: 400px;
}
#load{
    border: 1.5px black solid;
    height: 200px;
    width: 100px;
	background-color:#0B3861;
    color:white;
	padding:20px;
	margin-top:40px;
	font-size:20px;
    }
</style>
</script>

<body>
<script type="text/javascript">
$("#all_rows").scroll(function ()
{
	if($("#load").height() <= $("#all_rows").scrollTop() + $("#all_rows").height())
	{
		loadmore();
	}
});

function loadmore()
{
  var val = document.getElementById("row_no").value;
  $.ajax({
  type: 'post',
  url: 'get_results.php',
  data: {
    getresult:val
  },
  success: function (response) {
	  
	var content = document.getElementById("all_rows");
    content.innerHTML = content.innerHTML+response;

    // We increase the value by 10 because we limit the results by 10
    document.getElementById("row_no").value = Number(val)+5;
  }
  });
};
</script>


  <h1>Load Results From Database On Page Scroll Using jQuery, Ajax And PHP</h1>
  <div id="all_rows">
    <?php
    $conn = mysqli_connect("localhost", "id5757217_testsql01", "9977553311", "id5757217_testsql1");
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
}
$sql = ("SELECT * FROM insertion LIMIT 0,5");

    $result = $conn->query($sql);
    while ( $row = $result-> fetch_array()) {
        echo "<div id = 'load'>";
        echo "<div id = 'load1'>" . $row['Title'] . "</div>";
        echo "<div id = 'load2'>" . $row['Description'] . "</div>";
        echo "<div id = 'get'>" . "<a href = '" .  $row['Link'] . "' target = '_blank' id = 'anchor'> Get This file </a> </div>";
        echo "</div>";
      }
            $conn->close();
 ?>
  </div>
  <input type="hidden" id="row_no" value="5">

</body>
</html>

This is the 'get_results.php' page: 

<?php

  if(isset($_POST['getresult']))
  {
    $conn = mysqli_connect("localhost", "id5757217_testsql01", "9977553311", "id5757217_testsql1");
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
}
    $no = $_POST['getresult'];
$sql = ("SELECT * FROM insertion LIMIT $no,5");

    $result = $conn->query($sql);
    while ( $row = $result-> fetch_array()) {
        echo "<div id = 'load'>";
        echo "<div id = 'load1'>" . $row['Title'] . "</div>";
        echo "<div id = 'load2'>" . $row['Description'] . "</div>";
        echo "<div id = 'get'>" . "<a href = '" .  $row['Link'] . "' target = '_blank' id = 'anchor'> Get This file </a> </div>";
        echo "</div>";
      }
    exit();
  }
 ?>

Thank you!

Upvotes: 2

Views: 1421

Answers (1)

user6299088
user6299088

Reputation:

Use Following Code I have given yo simple example:

<html>
<head>
</head>
<body>
<div id="userData">
</div>
</body>
</html>

ON LOAD

 $(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
        var last_id = $("#userData a:last-child").attr('id');
        if(last_id == "" || last_id == undefined)
        {
           last_id=0;
         }
        loadMoreData(last_id);
    }
});
**

FUNCTION LOAD MORE DATA

function loadMoreData(last_id) {
    $.ajax(
        {
            url: 'get_results.php?last_id=' + last_id ,
            type: "get",
            beforeSend: function () {
                $('.ajax-load').show();
            }
        })
        .done(function (data) {
             $('.ajax-load').hide();
            $("#userData").append(data);
        })
        .fail(function (jqXHR, ajaxOptions, thrownError) {
            console.log('server not responding...');
        });
}

At the controller you receive ID and select data greater that current received ID

    <?php

      if(isset($_GET['last_id']))
      {
        $conn = mysqli_connect("localhost", "id5757217_testsql01", "9977553311", "id5757217_testsql1");
            if ($conn->connect_error) {
                die("Connection failed: " . $conn->connect_error);
    }

 if($lastId!=0){
    $sql = ("SELECT * FROM insertion where id < '" . $lastId . "' ORDER BY id DESC LIMIT 5");
}else{
    $sql = ("SELECT * FROM insertion ORDER BY id DESC LIMIT 5");
}    
        $result = $conn->query($sql);
        while ( $row = $result-> fetch_array()) {
            echo "<div id = 'load'>";
            echo "<div id = 'load1'>" . $row['Title'] . "</div>";
            echo "<div id = 'load2'>" . $row['Description'] . "</div>";
            echo "<div id = 'get'>" . "<a href = '" .  $row['Link'] . "' target = '_blank' id =  '" .  $row['id'] . "'> Get This file </a> </div>";
            echo "</div>";
          }
        exit();
      }
     ?>

Upvotes: 2

Related Questions