Stop infinite scroll from repeating all page content

Question

I added infinite scroll to a page and now the page duplicates content from the top of the page each time more results load for the infinite scroll.

The page loads like this:

Advertisement
Sponsored content
Advertisement
First 9 Results from table for infinite scroll

When the page reaches the end for infinite scroll this happens

Advertisement repats
sponsored content repeats
advertisement repeats
next 9 rows from table shows as desired.

I want to know how I can stop the Advertisements and sponsored content from repeating with my infinite scroll.

here is the script i am using for the infinite scroll:

//      Loading news
    var pageLoad = 1;
    var totalPages = 1;
    /* This is function which is called to load news. The input parameter is page, a variable which assumes number of active page. Default is 1 */
    function loadingNews(page){
        $('#events').append('<div class="loader-div"><img src="" class="img img-responsive img-loader" /></div>');
        $.ajax({
               type: "GET",
               url: "websitephppagebelow.php",
               method: "POST",
               dataType: "json",
               data: {'eventuser': '0', 'page': page},
               success: function (data) {
               $(".loader-div").remove('.loader-div');
               $('#events').append(data.deals);
               totalPages = data.totalPages;
               },
               error: function (jqXHR, exception) {
               var msg = '';
               if (jqXHR.status === 0) {
               msg = 'Not connect.\n Verify Network.';
               } else if (jqXHR.status == 404) {
               msg = 'Requested page not found. [404]';
               } else if (jqXHR.status == 500) {
               msg = 'Internal Server Error [500].';
               } else if (exception === 'parsererror') {
               msg = 'Requested JSON parse failed.';
               } else if (exception === 'timeout') {
               msg = 'Time out error.';
               } else if (exception === 'abort') {
               msg = 'Ajax request aborted.';
               } else {
               msg = 'Uncaught Error.\n' + jqXHR.responseText;
               }
               console.log(jqXHR);
               }
               });
    }

    /* Here the function for page loading is calling. The input parameter (pageLoad) is variable which constantly is updating. */
    loadingNews(pageLoad);
    /* This is the function which "listen" scrolling on the page. If it reaches the bottom of the page, sends new call to loadingNews function. */
    var win = $(window);
    win.scroll(function(){
               if ($(document).height() - win.height() == win.scrollTop()) {
               pageLoad++;
               // console.log("page load: " + pageLoad + "; total: " + totalPages);
               if(pageLoad <= totalPages) {
               loadingNews(pageLoad);
               }else{
               pageLoad--;
               }
               }
               });

               });

here is the php I am using for my infinite scroll:

<?php
include('../db.php');

$event = '';


    if(isset($_REQUEST['myevents'])) {

if(!isset($_REQUEST['eventuser']) || (strlen($_REQUEST['eventuser']) < 2)) {

$get = mysql_query("SELECT * FROM table ORDER BY stdate ASC");

} else {

$get = mysql_query("SELECT * FROM table WHERE user = '".$_REQUEST['eventuser']."' ORDER BY stdate ASC ");

}
if(mysql_num_rows($get) > 0) {

    while($row = mysql_fetch_array($get)) {
    //echo mysql_num_rows($get).$row['id'].$row['name'].$row['stdate'].$row['description'].$row['fname'];


    $desc = substr($row['description'],0,50);

    $event .= '     <div id="eventslist" onclick="goevent('.$row['id'].');" style="border-bottom:1px solid gray;padding:2px;width:100%;float:left;">
                        <div style="width:35%;float:left;">
                            <img src="path" style="width:100%;height:140px;border-radius:10px;" class="img-rounded">
                        </div>
                        <div style="width:65%;float:left;">
                            <h4 style="margin:0;"><span style="float:left;">'.$row['fname'].'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="float:left;text-align:right;font-size:12px;">Start Date: '.$row['stdate'].'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><br/><span style="float:left;text-align:right;font-size:12px;">End Date: '.$row['endate'].'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><br/><span style="float:left;text-align:right;font-size:12px;">City: '.$row['city'].'</span></h4><p style="margin-bottom:0;">'.substr($row['description'],0,56).'...</p>
                        </div>
                </div>  ';

    }
    //echo $event."<br/>";

    $arr['status']=1;
    $arr['msg'] = 'ok';
    $arr['deals'] = $event;

} else {
    $event .= 'No Events Found '.mysql_error();
    $arr['status']=0;
    $arr['msg'] = $event;
    $arr['deals'] = $event;
}


    } else {

if(!isset($_REQUEST['eventuser']) || (strlen($_REQUEST['eventuser']) < 2)) {

$get = mysql_query("SELECT * FROM table2 WHERE fname='mobile' ORDER BY RAND() LIMIT 1");

} else {

$get = mysql_query("SELECT * FROM table2 WHERE user = '".$_REQUEST['eventuser']."' ORDER BY stdate ASC");

}
    if(mysql_num_rows($get) > 0) {

    while($row = mysql_fetch_array($get)) {
    //echo mysql_num_rows($get).$row['id'].$row['name'].$row['stdate'].$row['description'].$row['fname'];


    $desc = substr($row['description'],0,50);

    $event .= '     <div style="float:left" class="movead"> 
                                        <p style="margin-left:5%; color:black;text-align: left;width:100%;height:15px"><b>Advertisment</b></p>
                                        <a href="'.$row['link'].'" target="_blank" style="text-decoration: none;">
                                        <div style="margin-left:2%;margin-bottom: 25px;width: 320px; height: 50px; background-image: url(path'); color: #fff; line-height: 50px; text-align: center; ">
                                        </div>
                                        </a>
                                    </div>  ';


    }
    //echo $event."<br/>";

    $arr['status']=1;
    $arr['msg'] = 'ok';
    $arr['deals'] = $event;

} else {
    $event .= 'No Events Found '.mysql_error();
    $arr['status']=0;
    $arr['msg'] = $event;
    $arr['deals'] = $event;
}


if(!isset($_REQUEST['eventuser']) || (strlen($_REQUEST['eventuser']) < 2)) {

$get = mysql_query("SELECT * FROM table WHERE promote='YES' ORDER BY RAND() LIMIT 3");

} else {

$get = mysql_query("SELECT * FROM table WHERE user = '".$_REQUEST['eventuser']."' ORDER BY stdate ASC ");

}
if(mysql_num_rows($get) > 0) {

    while($row = mysql_fetch_array($get)) {
    //echo mysql_num_rows($get).$row['id'].$row['name'].$row['stdate'].$row['description'].$row['fname'];



    $desc = substr($row['description'],0,50);

    $event .= '     <div id="eventslist" class="zoom" onclick="goevent('.$row['id'].');" style="background-image: url(path);background-position: center;background-position-y: -1px;background-repeat: no-repeat;background-size: 100% 98%;box-shadow: 0 -2px 18px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);border-radius: 25px 25px 0 0;padding:2px;width:103%;margin-left:-1.6%;margin-bottom: 25px;float:left;">

                        <div style="height:25px;width:101.08%;float:left;text-align: center;background-color: gold;margin-left:-.5%;margin-top:-.8%;border-radius: 25px 25px 0 0;">
                                                            <b style="font-size: 16px;">Sponsored</b>
                        </div>
                        <div style="width:101.19%;float:left;background-color: white;margin-left:-.65%;margin-top:60%;">
                                                            <div style="float:left;width:100%;text-align: center;padding-bottom: 5px;padding-top: 5px;">
                                                            <b style="font-size: 16px;">'.$row['fname'].'</b>
                                                            </div>
                                                            <div>
                            <img src="path" style="margin-top:-1%;margin-left:2%;float:left;width:20px;height:20px;"><b><span style="margin-left:-2%;float:left;text-align:left;font-size:12px;padding-left: 10px;">Start Date: '.$row['stdate'].'</span><span style="float:right;text-align:right;font-size:12px;padding-right: 10px;">City: '.$row['city'].'</span><img src="path" style="margin-top:-1%;float:right;width:20px;height:20px;"></b>
                                                            </div>
                                                            <div>
                            <p style="float:left;margin-bottom:0;padding:10px;">'.substr($row['description'],0,160).'...</p> 
                                                            </div>
                        </div>
                </div>  ';


    }
    //echo $event."<br/>";

    $arr['status']=1;
    $arr['msg'] = 'ok';
    $arr['deals'] = $event;

} else {
    $event .= 'No Events Found '.mysql_error();
    $arr['status']=0;
    $arr['msg'] = $event;
    $arr['deals'] = $event;
}


    }

if(!isset($_REQUEST['eventuser']) || (strlen($_REQUEST['eventuser']) < 2)) {

$get = mysql_query("SELECT * FROM table2 WHERE fname='mobile' ORDER BY RAND() LIMIT 1");

} else {

$get = mysql_query("SELECT * FROM table2 WHERE user = '".$_REQUEST['eventuser']."' ORDER BY stdate ASC");

}
if(mysql_num_rows($get) > 0) {

    while($row = mysql_fetch_array($get)) {
    //echo mysql_num_rows($get).$row['id'].$row['name'].$row['stdate'].$row['description'].$row['fname'];


    $desc = substr($row['description'],0,50);

    $event .= '     <div style="float:left" class="movead"> 
                                        <p style="margin-left:5%; color:black;text-align: left;width:100%;height:15px"><b>Advertisment</b></p>
                                        <a href="'.$row['link'].'" target="_blank" style="text-decoration: none;">
                                        <div style="margin-left:2%;margin-bottom: 25px;width: 320px; height: 50px; background-image: url(path); color: #fff; line-height: 50px; text-align: center; ">
                                        </div>
                                        </a>
                                    </div>  ';


    }
    //echo $event."<br/>";

    $arr['status']=1;
    $arr['msg'] = 'ok';
    $arr['deals'] = $event;

} else {
    $event .= 'No Events Found '.mysql_error();
    $arr['status']=0;
    $arr['msg'] = $event;
    $arr['deals'] = $event;
}



$numberRecords = 9;
$page = 1;
$limitLower = 3;
$limitUpper = 9;
$loadHtmlRes = '';

$page = $_REQUEST['page'];
$limitLower = ($page-1)*$numberRecords;
$limitUpper = $page*$numberRecords;
$allNewsQuery = mysql_query("select * from table");
$totalPages = ceil(mysql_num_rows($allNewsQuery)/9);

if(!isset($_REQUEST['eventuser']) || (strlen($_REQUEST['eventuser']) < 2)) {

$get = mysql_query("SELECT * FROM table ORDER BY stdate ASC LIMIT ".$limitLower.", 9");

}
if(mysql_num_rows($get) > 0) {

    while($row = mysql_fetch_array($get)) {
    //echo mysql_num_rows($get).$row['id'].$row['name'].$row['stdate'].$row['description'].$row['fname'];

        $getf = mysql_query("SELECT * FROM private WHERE eventid = '".$row['id']."' AND state = 'NY'");
        if(mysql_num_rows($getf) > 0) { } else {


    $desc = substr($row['description'],0,50);

    $event .= '     <div id="eventslist" class="zoom" onclick="goevent('.$row['id'].');" style="background-image: url(path');background-position: center;background-position-y: -1px;background-repeat: no-repeat;background-size: 100% 98%;box-shadow: 0 -2px 18px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);border-radius: 16px 16px 0 0;padding:2px;width:103%;margin-left:-1.6%;margin-bottom: 25px;float:left;">


                        <div style="width:101.19%;float:left;background-color: white;margin-left:-.65%;margin-top:60%;">
                                                            <div style="float:left;width:100%;text-align: center;padding-bottom: 5px;padding-top: 5px;">
                                                            <b style="font-size: 16px;">'.$row['fname'].'</b>
                                                            </div>
                                                            <div>
                            <img src="path" style="margin-top:-1%;margin-left:2%;float:left;width:20px;height:20px;"><b><span style="margin-left:-2%;float:left;text-align:left;font-size:12px;padding-left: 10px;">Start Date: '.$row['stdate'].'</span><span style="float:right;text-align:right;font-size:12px;padding-right: 10px;">City: '.$row['city'].'</span><img src="path" style="margin-top:-1%;float:right;width:20px;height:20px;"></b>
                                                            </div>
                                                            <div>
                            <p style="float:left;margin-bottom:0;padding:10px;">'.substr($row['description'],0,160).'...</p> 
                                                            </div>
                        </div>
                </div>  ';

        }       
    }
    //echo $event."<br/>";

    $arr['status']=1;
    $arr['msg'] = 'ok';
    $arr['deals'] = $event;
    $arr['totalPages'] = $totalPages;

} else {
    $event .= 'No Events Found '.mysql_error();
    $arr['status']=0;
    $arr['msg'] = $event;
    $arr['deals'] = $event;
}



echo json_encode($arr);

?>

I don't have the solution to your problem, but here's a tip to keep your page light and fast : unload elements that are higher. — Jean-Marc Zimmer, Nov 05 '18 at 15:53
I guess this is a typo in you PHP code : `background-image: url(path'); color: #fff` that makes a huge syntax error... (Yes I'm still here because I don't like not to help) — Jean-Marc Zimmer, Nov 05 '18 at 16:22
@Jean-MarcZimmer I removed my website urls and just entered path — historytiming, Nov 05 '18 at 16:25
I have to admit [I don't get your code.](https://me.me/i/22915199) Sorry. — Jean-Marc Zimmer, Nov 05 '18 at 16:52
@Jean-MarcZimmer Is there away I can help you and others by giving more details? — historytiming, Nov 05 '18 at 17:18

Stop infinite scroll from repeating all page content

0 Answers0