CODEWITHSUNDEEP
javascriptphpjqueryajaxautoload
Sam
Sam

Reputation: 143

Autoload page when scrolling down with JQuery and PHP

I want to get an Auto load on page scroll done with the data pull from my postgresql database.

Here is the desired result: http://www.sanwebe.com/assets/ajax-load-on-scroll/

I believe problem is in the Javascript code of index.php and/or the audoload_process.php but I'm not able to find the problem.

Here code using MySQL

I have 3 files:

Config.php which is working correctly:

<?php
$db_username = 'user=myuser';
$db_password = 'password=mytest';
$db_name = 'dbname=test';
$db_host = 'host=localhost';
$items_per_group = 5;

$db = pg_connect($db_host, $db_username, $db_password, $db_name);
?>

Index.php file: (I tested and the PHP part of it is working, I think is the javascript that is not working).

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>

<?php
include("config.php");

    $get_total_rows = 0;

    $db = pg_connect("$db_host $db_name $db_username $db_password");
    $query = "SELECT * FROM paginate";
    $results = pg_query($query);

    $get_total_rows = pg_numrows($results); 

    //break total records into pages
    $total_groups= ceil($get_total_rows/$items_per_group);
?>

<script type="text/javascript">
$(document).ready(function() {
var track_load = 0; //total loaded record group(s)
var loading  = false; //to prevents multipal ajax loads
var total_groups = <?=$total_groups;?>; //total record group(s)

$('#results').load("autoload_process.php", {'group_no':track_load}, function() {track_load++;}); //load first group

$(window).scroll(function() { //detect page scroll

    if($(window).scrollTop() + $(window).height() == $(document).height())  //user scrolled to bottom of the page?
    {

        if(track_load <= total_groups && loading==false) //there's more data to load
        {
            loading = true; //prevent further ajax loading
            $('.animation_image').show(); //show loading image

            //load data from the server using a HTTP POST request
            $.post('autoload_process.php',{'group_no': track_load}, function(data){

                $("#results").append(data); //append received data into the element

                //hide loading image
                $('.animation_image').hide(); //hide loading image once data is received

                track_load++; //loaded group increment
                loading = false; 

            }).fail(function(xhr, ajaxOptions, thrownError) { //any errors?

                alert(thrownError); //alert with HTTP error
                $('.animation_image').hide(); //hide loading image
                loading = false;

            });

        }
    }
});
});
</script>
<style>
body,td,th {font-family: Georgia, Times New Roman, Times, serif;font-size: 15px;}
.animation_image {background: #F9FFFF;border: 1px solid #E1FFFF;padding: 10px;width: 500px;margin-right: auto;margin-left: auto;}
#results{width: 500px;margin-right: auto;margin-left: auto;}
#resultst ol{margin: 0px;padding: 0px;}
#results li{margin-top: 20px;border-top: 1px dotted #E1FFFF;padding-top: 20px;}
</style>
</head>

<body>

<ol id="results">
</ol>
<div class="animation_image" style="display:none" align="center"><img src="ajax-loader.gif"></div>

</body>
</html>

autoload_process.php file

<?php
include("config.php"); //include config file

if($_POST) //NOT SURE IF THIS WORKS FOR Postgresql or I would need somethingk like if ($_SERVER["REQUEST_METHOD"] == "POST") 
{
echo "inside IF"  //To see if it gets to here --> It doesn't
//sanitize post value
$group_number = filter_var($_POST["group_no"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);

//throw HTTP error if group number is not valid
if(!is_numeric($group_number)){
    header('HTTP/1.1 500 Invalid number!');
    exit();
}

//get current starting point of records
$position = ($group_number * $items_per_group);

    $query = "SELECT id, name, message FROM paginate ORDER BY id ASC LIMIT $position, $items_per_group";
    $result = pg_query($query);

    $myrow = pg_fetch_assoc($result);
    $id = $myrow[id];
    $name = $myrow[name];
    $message = $myrow[message];

echo '<ul class="page_result">';
while(pg_fetch_assoc($results)){ //fetch values
    echo '<li id="item_'.$id.'"><span class="page_name">'.$id.') '.$name.'</span><span class="page_message">'.$message.'</span></li>';  
}
echo '</ul>';

pg_close();
}
?>

RESULTS AND ISSUES

  1. I get nothing as results when executing my Index.php

  2. If I write this code in the Index.php to see if information is being retrieved:

    $get_total_rows = pg_numrows($results); 
echo "total number of rows" .$get_total_rows;
echo '<br>';
echo '<br>';

//break total records into pages
$total_groups= ceil($get_total_rows/$items_per_group);
echo "total number of groups" .$total_groups;
echo '<br>';
echo '<br>';


while($myrow = pg_fetch_assoc($results)) {
$id = $myrow[id];
$name = $myrow[name];
$message = $myrow[message];
echo $id;
echo $name;
echo $message;
echo '<br>';
echo '<br>';

}

Then I get (Total number of rows= 50 (correct) Total number of groups = 10 (Correct) and all the records printed but when I scroll down down I get the following error (Internal Server Error): The little load image appear on the bottom of the page. (I'm guessing that this is because I already showed all 50 records, but it is not acting as it suppose to.

enter image description here

enter image description here

Any help would be highly appreciated.

Upvotes: 0

Views: 1571

Answers (2)

imvain2
imvain2

Reputation: 15847

since the key can be wrapped in single/double quotes, I suspect its your php, I see some things:

missing semicolon at the end

echo "inside IF";

for testing you could try:

instead of: 

if($_POST)

use

if(isset($_POST["group_no"]))

and for testing ONLY, instead of 

header('HTTP/1.1 500 Invalid number!');

try

echo "Error not a number: " . $_POST["group_no"];

the changing of the error will allow you to see the actual error quickly, instead of returning 500 and having it fail with: internal server error

These might not solve the problem, but at least help with diagnosis.

Upvotes: 1

larsAnders
larsAnders

Reputation: 3813

You have a syntax error in your ajax .post - single quotes where they are not needed. This:

$.post('autoload_process.php',{'group_no': track_load}

Should be this:

$.post('autoload_process.php',{group_no: track_load}

Upvotes: 1

Related Questions