Infinite scrolling jquery ajax

Question

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

Answer 1

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.

Answer 2

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.

Infinite scrolling jquery ajax

Question

2 answers

solution1
1 2013-07-24 09:05:26

solution2
0 2013-07-24 09:19:21

Infinite scrolling jquery ajax

Question

2 answers

solution1 1 2013-07-24 09:05:26

solution2 0 2013-07-24 09:19:21

solution1
1 2013-07-24 09:05:26

solution2
0 2013-07-24 09:19:21