Jquery infinity scroll loops over and over using Mysql/PHP

Question

I'm trying to implement Jquery infinity scroll found at (http://infiniteajaxscroll.com/) together with my MYSQL and PHP. And it works, sort of.

I found similar example here but my was quite different anyway (http://www.w3bees.com/2013/09/jquery-infinite-scroll-with-php-mysql.html)

The loading more works fine however my results are being looped over and over again. I mean i display all the results in the first page and when i scroll down at the bottom and infinity scroll fires up then same results are being showed instead of splitting those first results in different pages.

Here is my code, quite long :)

<?php


$page = (int) (!isset($_GET['s'])) ? 1 : $_GET['s'];


// GET ALL THE SHOUTBOX
$sql = "SELECT * FROM shoutbox
ORDER BY id DESC
LIMIT 20";

//prepare the statement
$statement = $dbConn->prepare($sql);

//execute the statement
$statement->execute();

//Count the shouboxes         
$number_of_shoutbox = $statement->rowCount();

$number_of_posts_per_page = '10';

$total_pages = $number_of_shoutbox / $number_of_posts_per_page;


?>

<div class="background_spacing"></div> <!-- end of background spacing -->

<div id="header_background">
    <div class="shoutbox-background text-center">

        <div id="shoutbox">
            <!-- SHOUTBOX COMPLETE STARTS -->
            <div class="shoutbox_complete">
                <div class="shoutbox_left">
                    <img src="images/girl-shoutbox.jpg">
                </div>

                <div class="shoutbox_right background-white">
                    <div class="no-padding padding10">
                        <span class="font24 font-color-000000">NAPISI SVOJ</span>
                        <span class="font24 username_male">SHOUTBOX</span>

                        <textarea class="shoutbox-form  no-padding" placeholder="Ostavite i vi jedan shoutbox..."></textarea>
                        <input type="submit" class="button_standard_pink float-right">                  

                    </div>

                </div>
            </div>
            <!-- SHOUTBOX COMPLETE STARTS -->



        </div> <!-- end of id="shoutbox -->

    </div>
</div> <!-- END OF HEADER_BACKGROUND -->



<div class="margin30"></div><!-- Spacing -->


<div class="shoutbox-total">

            <div id="shoutbox">
                <div class="shoutbox-counter no-padding padding-10 background-shoutbox-counter">
                    <div class="font48 text-center"><?php count_shoutbox();?></div>
                    <div class="text-center">shoutbox has been shouted!</div>
                    <div class="text-center padding-10"><img src="images/default/default-shoutbox-shout.png"></div>
                    <div class="text-center font10">INVITE YOUR FRIENDS TO SHOUT!</div>
                </div>
            </div>


            <?
            //LOOP THROUGH THE SHOUBOXES    
            while($show_shoutbox = $statement->fetch(PDO::FETCH_BOTH)) {
            ?>      
            <div id="shoutbox">
            <!-- SHOUTBOX COMPLETE STARTS -->
                <div class="shoutbox_complete_display">
                    <div class="shoutbox_left">
                        <img src="images/man-shoutbox.jpg">
                    </div>

                    <div class="shoutbox_right-display background-box-light-gray">

                        <div class="no-padding padding-10">
                            <div class="font24 username_male" style="line-height:1;"><?php echo strtoupper($show_shoutbox['user_name']);?> <?php echo $show_shoutbox['user_age'];?> GODINE</div>
                            <span class="font-color-898a8b">IZ <?php echo strtoupper($show_shoutbox['country']);?> -  TRAŽI <?php echo strtoupper($show_shoutbox['gender_search']);?> IZMEĐU <?php echo strtoupper($show_shoutbox['age_from']);?> I <?php echo strtoupper($show_shoutbox['age_to']);?> GODINA</span>

                            <div class="margin15"></div>
                            <div class="font20"><?php echo $show_shoutbox['text'];?></div>

                            <div style="margin-top:52px;">
                                <table cellpadding="0" cellspacing="0" width="100%">
                                    <tr>
                                        <td><div class="font18 font-bold">32,222</div>
                                            <span class="font-color-898a8b">ACHIVEMENTS</span>
                                        </td>
                                        <td><div class="font18 font-bold">32,222</div>
                                            <span class="font-color-898a8b">ACHIVEMENTS</span>
                                        </td><td><div class="font18 font-bold">32,222</div>
                                            <span class="font-color-898a8b">ACHIVEMENTS</span>
                                        </td><td><div class="font18 font-bold">32,222</div>
                                            <span class="font-color-898a8b">ACHIVEMENTS</span>
                                        </td>
                                    </tr>

                                </table>
                            </div> <!-- end of margin-top:60 -->


                        </div>  <!-- end of no-padding padding-10 -->



                        <!-- COMMENT START HERE -->





                        <?php 
                        //    d($detail);
                               $type='question';
                        //       include('like.php');
                               include('includes/comment.php');
                        ?>
                        <!-- COMMENT END HERE -->

                    </div> <!-- end of shoutbox_right-display -->



                </div> <!-- end of shoutbox_complete -->

            </div> <!-- end of id="shoutbox -->

            <?php } // end of the shoubox loop 
            ?>





</div>
<!--page navigation-->

      <div id="nav">
        <?php
            for ($x = 2; $x <= $total_pages; $x++) {
        ?>
            <a href='welcome.php?p=shoutbox&s=<?php echo $x;?>' <?php if($x=='2') { echo 'class="next"';}?>></a>
        <?php } ?>

      </div>


<script type="text/javascript" src="js/jquery.infinity.scroll.js"></script>
<script type="text/javascript">
var ias = $.ias({
  container: ".shoutbox-total .shoutbox_complete_display",
  item: "#shoutbox",
  pagination: "#nav",
  next: ".next"
});

ias.extension(new IASSpinnerExtension());
ias.extension(new IASTriggerExtension({offset: 3}));
ias.extension(new IASNoneLeftExtension({text: 'There are no more pages left to load.'}));

======================================================================== UPDATE CODE BY STILL GIVING ERRORS NOW IN MYSQL:

Tried @Rob Schmuecker solution but now getting errors in mysql.

Here is my modified code with PDO and with Rob Schmuecker suggestion

// GET ALL THE SHOUTBOX
$sql = "SELECT
shoutbox.shoutbox_id,
shoutbox.text,  
shoutbox.date,
shoutbox.time,
shoutbox.approved,
shoutbox.`new`, 
shoutbox.user_id, 
users.profile_image,
users.user_name,
users.user_age,
users.country,
users.gender_search,
users.age_from,
users.age_to
FROM    shoutbox INNER JOIN users ON shoutbox.user_ID = users.id
WHERE   users.profile_image = '2'
AND     shoutbox.approved = '1'
AND     shoutbox.new = '0'
AND     shoutbox.user_id != :admin_id
AND (shoutbox.user_id NOT IN (SELECT user_id FROM users_blocked WHERE blocked_id = :user_id))  
ORDER BY shoutbox.shoutbox_id DESC
LIMIT :limit_start :limit_row_amount";

//prepare the statement
$statement = $dbConn->prepare($sql);

//execute the statement
$statement->execute(array(
            'admin_id' => $admin_id,
            'user_id' => $user_id,
            'limit_start' => $limit_start,
            'limit_row_amount' =>$limit_row_amount


        ));

Answer 1

You need to implement the page into your SQL query.

Below we define two new variables, one which is the total amount you want to retrieve each time and the next is the amount of rows to skip in each limit query, starting from 0 if $page = 1

$page = (int) (!isset($_GET['s'])) ? 1 : $_GET['s'];

$limit_row_amount = 20;
if($page > 1){
    $limit_start = $page * $limit_row_amount;
} else {
    $limit_start = 0;
}

// GET ALL THE SHOUTBOX
$sql = "SELECT * FROM shoutbox
ORDER BY id DESC
LIMIT $limit_start, $limit_row_amount";