Question

I have a segment of my website which needs to dynamically load content when the user reaches the bottom. I’m using jQuery, and this is the code to detect the scroll:

$(document).ready(function() { 
    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() == $(document).height()) {
        alert("Bottom reached");
            $('div#loadMoreComments').show();
            dataStr = "from=" + $(".n:last").attr('id')
            $.ajax({
                type: "POST",
                url: "ajax/query.php",
                data: dataStr,
                success: function(html) {
                    if(html){       
                        $("#hold").append(html);
                        alert("Data was added");
                    }
                    else{       
                        $('div#loadMoreComments').replaceWith("<center><h1 style='color:red'>End of countries !!!!!!!</h1></center>");
                        alert("Data was not added");
                    }
                }
            });
        }
    });
});

The first problem I have is that the scroll to the bottom is only detected when the user reaches the top of the page. The second problem is that it doesn’t load any content, at all, because the variable doesn’t seem to be posted, here’s my code in the query.php:

if(array_key_exists('from', $_POST)) {
    $from = htmlspecialchars(stripslashes(mysql_real_escape_string($_POST['from'])));
    $to = 15;
    $re = ("SELECT status as status, sid as sid, UNIX_TIMESTAMP(timestamp) as timestamp FROM mingle_status WHERE uid = '$uid' ORDER BY timestamp DESC LIMIT $from,$to"); //query
  }
  else {
    $re = ("SELECT id as id, status as status, sid as sid, UNIX_TIMESTAMP(timestamp) as timestamp FROM mingle_status WHERE uid = '$uid' ORDER BY timestamp DESC LIMIT 1"); //query
  }
  $result = mysql_query($re) or die (mysql_error());
  while($st = mysql_fetch_assoc($result)) {
    $status = nl2br($st['status']);
    $sid = $st['sid'];  
    $td = $st['timestamp'];
    $id = $st['id'];
    ?>
        <div id="<?php echo $id; ?>" class="id">
            <!-- stuff -->
        </div>
    <?php
    }
    ?>

And the error:

You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '",15' at line 1

If anyone could help me with this, it’d be great, I’d really appreciate it.

EDIT: Okay, I can now get a div generated, but only when I scroll to the top of the page, and it only appends one div, and if I scroll to the top again, it appends the exact same div.

Answer 1

This is just wrong:

$from = htmlspecialchars(stripslashes(mysql_real_escape_string($_POST['from'])));

If from is supposed to be an integer, just use:

$from = (int) $_POST['from'];

I also see that that number comes from an id in the html and ids cannot start with a number.

Edit: An additional problem is that you are not selecting the ID in your sql query if from exists and even if you would do that, this approach can lead to problems in the future when you delete records and your IDs are not sequential any more.

About the first problem, I can solve that in firebug changing:

 if($(window).scrollTop() + $(window).height() == $(document).height()) {

to:

 if( ($(window).scrollTop() + $(window).height()) > ($(document).height() -  10) ) {

Edit 2: To solve your non-sequential ID problem, the easiest way would be to calculate from in javascript using something like:

dataStr = "from=" + $(".n").length;    // just count the number of elements you are showing already