Ajax infinite scroll doesn't work properly

Question

I was trying to apply the Ajax Infinite Scroll on an instance that should load results as long as i scroll down into the instance. The problem is that when i scroll it loads the results but it doesn't do that on the bottom of the box but it loads my results right under the 1° result that appears when you open the page es. (for clarify)
Example 1
Example 2 -> When i scroll it loads the results from there
Example 3

Here is the code

    <script type="text/javascript" src="js/jquery-ias.min.js"></script>
            <script type="text/javascript">
   $(document).ready(function() {
    // Infinite Ajax Scroll configuration
    var ias = $('.item').ias({
      container : '.item', // main container where data goes to append<
     item: '#testami', // single items
     pagination: '.nav2', // page navigation
     next: '.nav2 a', // next page selector
     delay: 500 // show load more if scroll more than this
   });
        ias.extension(new IASSpinnerExtension({
   html: '<div class="ias-spinner" style="text-align: center;"><img src="css/ajax-loader.gif"/></div>', // optionally
                }));
  });
</script>


            <div class="item" style="overflow-y:scroll">
                                     <?php
                                            $limit = 10;
                                             $page = (int) (!isset($_GET['p'])) ? 1 : $_GET['p'];
                                             $sel_badge1="select * from cms_news ";
                                             $start = ($page * $limit) - $limit;
                                             if( mysqli_num_rows(mysqli_query($link,$sel_badge1)) > ($page * $limit) ){
                                                            $next = ++$page;
                                                    }
                                                    $query = mysqli_query($link,$sel_badge1 . " ORDER BY id DESC LIMIT {$start}, {$limit} ")or die(mysqli_error($link));
                                                    if (mysqli_num_rows($query) < 1) {
                                                            header('HTTP/1.0 404 Not Found');
                                                            echo 'Page not found!';
                                                            exit();
                                                    }

                                    while($row2=mysqli_fetch_array($query))
                                    {
                            ?>     
                               <div id="testami"><p><a href="news.php?id=<?php echo $row2['id']; ?>"><?php echo $row2['title']; ?></a></p></div>
                <?php } ?>
                            <?php if (isset($next)): ?>
                            <div class="nav2">
                                    <a href='news.php?p=<?php echo $next?>'>Next</a>
                            </div>
                            <?php endif?>
            </div>

So, if i understand, your problem is that the new elements are not appended at the end of your page but somwhere else. — litelite, Aug 24 '15 at 20:18
Yeah you right. Now as soon as possibile i'll try the solution of litelite and i'll see if it works properly! — Eren, Aug 24 '15 at 20:44

score 0 · Answer 1 · edited May 23 '17 at 12:22

In your loop, change id="testami" to class="testami" and in the call to .ias() change your item selector from item: '#testami' to item: '.testami'.

Explanation:

Id's are supposed to be unique. but you are creating multiple elements with the same id in your loop. The default behavior when multiple items with the same id are found is to only return the first one. So this was why your new elements where inserted after your first element. reference

Ajax infinite scroll doesn't work properly

1 Answers1