CODEWITHSUNDEEP
phpjquery
Basmah
Basmah

Reputation: 33

Infinite scrolling jquery ajax

I'm using jquery ,ajax and php to implementing infinite scrolling the image from database

and the code just works one time when i reach the end of a page and show me the message "No More Content" when there is actually content in the database

here is my cod

index.php 

<html >
<?php include($_SERVER["DOCUMENT_ROOT"].'/db.php'); 

$query = "SELECT * FROM photo ORDER by PhotoNo DESC limit 12";

$result = mysql_query($query) or die('Query failed: ' . mysql_error());

$actual_row_count =mysql_num_rows($result);
 ?>
<head>
   <title>Infinite Scroll</title>
    <script src="jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
        var page = 1;


        $(window).scroll(function () {
            $('#more').hide();
            $('#no-more').hide();

            if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
                $('#more').css("top","400");
                $('#more').show();
            }
            if($(window).scrollTop() + $(window).height() == $(document).height()) {

                $('#more').hide();
                $('#no-more').hide();

                page++;

                var data = {
                    page_num: page
                };

                var actual_count = "<?php echo $actual_row_count; ?>";

                if((page-1)* 12 > actual_count){
                    $('#no-more').css("top","400");
                    $('#no-more').show();
                }else{
                    $.ajax({
                        type: "POST",
                        url: "data.php",
                        data:data,
                        success: function(res) {
                            $("#result").append(res);
                            console.log(res);
                        }
                    });
                }

            }


        });

    </script>


</head>
<body>
  <div id='more' >Loading More Content</div>
    <div id='no-more' >No More Content</div>
    <div id='result'>
        <?php
        while ($row = mysql_fetch_array($result)) {
        $rest_logo=$row['PhotoName'];
        $image="../images/rest/".$rest_logo;
            echo '<div><img src='.$image.' /></div>';
        }
        ?>
        </div>







</body>
</html>

data.php

<?php

$requested_page = $_POST['page_num'];
$set_limit = (($requested_page - 1) * 12) . ",12";


include($_SERVER["DOCUMENT_ROOT"].'/db.php'); 

$result = mysql_query("SELECT * FROM photo ORDER by PhotoNo DESC limit $set_limit");



$html = '';

while ($row = mysql_fetch_array($result)) {
$rest_logo=$row['PhotoName'];
$image="../images/rest/".$rest_logo;
$html .= '<div><img src='.$image.' /></div>';
}


echo $html;
exit;
?>

I really nead a help

Upvotes: 0

Views: 617

Answers (2)

Brian Barnes
Brian Barnes

Reputation: 1027

In index.php your query is only returning 12 rows meaning that $actual_row_count is only ever going to be 12. Instead I would set $actual_row_count to the result of the query "SELECT count (*) FROM photo".

My personal preference for these sort of things is to return a JSON response which only contains the n responses that are loading and have a template html stored in javascript. The way you've written it will return all the photo's on the last query instead of the last 12 that you want.

Upvotes: 0

Chris Morris
Chris Morris

Reputation: 983

You see to be setting the variables wrong from a quick look:

var actual_count = "<?php echo $actual_row_count; ?>";

You're using mysql_num_rows() to count the return on your first set of results. But that is limited to 12.

You need to do a second mysql query to get all the images without limi, then count them to get the total number of images in the database.

Upvotes: 1

Related Questions