CODEWITHSUNDEEP
phpjquerymysqlajaxpdo
Liam
Liam

Reputation: 9855

Entries retrieved from table are being duplicated? PHP

I have a page of results on my site, im using AJAX to return more reslts when scrolled down, my problem is however as it pulls the results, it seems to pull the same ones multiple times? I dont know what causes this, can anybody see what im doing wrong?

AJAX

$(window).scroll(function () {
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10)  {
         var number = $(".directory").children().length;
        $.ajax({
           type: "POST",
           url: "getentries.php",
           data: "count="+number,
           success: function(results){
             $('.directory').append(results);
           }
         });



    } else {}
});

PHP

$result = mysql_query("SELECT * FROM directory LIMIT {$_POST['count']},12");

$c = 1;
while($row = mysql_fetch_array($result))
  {
  echo '<div class="entry';
            if (($c % 4) == 1) echo ' alpha ';
            echo 'ALL THE DATA IS GOING HERE';      
            $c++;
  }

Upvotes: 0

Views: 77

Answers (3)

el_pup_le
el_pup_le

Reputation: 12179

The problem is most likely multiple ajax calls being fired while you scroll. Set up a timed event listener like so:

didScroll = false;
$(window).scroll(function() {
    didScroll = true;
});

setInterval(function() {
    if ( didScroll ) {
        didScroll = false;
        if(($(document).height() - $(window).height()) - $(window).scrollTop() < 100) {
            // load more results
        }
    }
}, 250);

This article explains why your solution is a bad idea: http://ejohn.org/blog/learning-from-twitter/

Upvotes: 2

Matthew Nie
Matthew Nie

Reputation: 629

So the issue is that you are making the ajax call multiple times once you hit your scroll threshold. You need to add a flag on the first ajax call so it doens't get called again until the ajax call has finished.

ajaxInProgress = false;
if (!ajaxInProgress && ($(window).scrollTop() >= $(document).height() - $(window).height() - 10)) {
    ajaxInProgress = true;
    $.ajax({
       type: "POST",
       url: "getentries.php",
       data: "count="+number,
       success: function(results){
         ajaxInProgress = false;
         $('.directory').append(results);
       }
     });
}

Upvotes: 1

Fabio Berger
Fabio Berger

Reputation: 1146

The issue is with how you are passing data with your ajax call. From the Jquery docs, you need to put count and the amount in a javascript object within data:

$.ajax({
       type: "POST",
       url: "getentries.php",
       data: {count: number},
       success: function(results){
         $('.directory').append(results);
       }
     });

Once you fix this, your Mysql query should return the correct next pieces of data to your view.

Hope this helps!

Upvotes: 0

Related Questions