Scribd
Upload
18 views6 pages

Zee Web 2 Lab 2

This document contains code for implementing infinite scrolling on a webpage using jQuery and PHP. It includes PHP code to connect to a database and query for records. It also includes jQuery code to make AJAX calls to fetch additional records from the database as the user scrolls down the page. The records are appended to the page dynamically to give the effect of infinite scrolling.

Uploaded by

Zeeshan Hassan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
18 views6 pages

Zee Web 2 Lab 2

This document contains code for implementing infinite scrolling on a webpage using jQuery and PHP. It includes PHP code to connect to a database and query for records. It also includes jQuery code to make AJAX calls to fetch additional records from the database as the user scrolls down the page. The records are appended to the page dynamically to give the effect of infinite scrolling.

Uploaded by

Zeeshan Hassan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

NATIONAL UNIVERSITY OF MODERN

LANGUAGES

Web lab # 2
Web Engineering II
Submitted to:
Ma’am Huma Nadeem
Submitted by
M.Zeeshan Hassan (11786)

Database Connection:
<?php
$servername = "localhost";

$username = "root";

$password = "";

$database = "idata";

// Create connection

$conn = new mysqli($servername, $username, $password, $database);

// Check connection if ($conn->connect_error)

{ die("Connection failed: " . $conn-

>connect_error);

// Connected successfully

?>

Index:

<!DOCTYPE html>

<html lang="en">

<head>

<title> Infinte Scroll with Jquery & PHP</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

</head>

<body>

<body>

<div class="container">

<br />
<br />

</div>

<div id="load_data"></div>

<div id="load_data_message"></div>

<script>

$(document).ready(function()

{ var limit = 5; var start = 0; var

action = 'inactive'; function

load_data(limit, start) {

$.ajax({ url:

"fetch.php",

method: "POST",

data: { limit:

limit, start:

start

},

cache: false, success:

function(data) {

if (data != '') { $('#load_data').append(data);

$('#load_data_message').html("<center><img
src='https://flevix.com/wpcontent/uploads/2019/07/Ball-Drop-Preloader-1-1.gif' /></center>");

action = "inactive";

} else {
$("#loader").hide();

$('#load_data_message').html("<button type='button' class='btn btn-info'>No Data

Found</button>");

action = 'active';

});

if (action == 'inactive') { action

= 'active'; load_data(limit,

start);

$(window).scroll(function() { if ($(window).scrollTop() + $(window).height()

> $("#load_data").height() && action == 'inactive') { action = 'active'; start =

start + limit; setTimeout(function() {

load_data(limit, start);

}, 1000);

});

});

</script>

</body>
Fetch:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<div> <?php

include("databaseConnection.php"); if

(isset($_POST["limit"], $_POST["start"])) {

$query = "SELECT * FROM lab2 LIMIT " . $_POST["start"] . ", " .$_POST["limit"] .

"";

$result = mysqli_query($conn, $query);

$num_of_row= mysqli_num_rows ( $result );

while ($row = mysqli_fetch_array($result)) { echo

"<h2>",$row['id'], "</h2>

<p> </p><h3>", $row['name'],"</h3>";

?>

</div>

</body>
</html>

You might also like