从数据库动态加载元素

Question

I'm trying to create a blog thing which displays comments stored inside a database: however I would like the comments to appear when the user scrolls down, dynamically creating it on the page, rather than having links to the next set of comments.

At the moment I am using MySQL with php to display the comments stored.

$query  = "SELECT * FROM comment ORDER BY time DESC";
$result = mysql_query($query);

while($data = mysql_fetch_assoc($result)){
  echo "<comment><div class='comment-bubble'><p>" . $data['comment'] . "</p></div>";
  //other div structure & data here
}

I know there are plugins available like jscroll. But this fetches data from other HTML files rather than from a database.

I know the method may need changing as php loads the data before the page is ... so what would be the best way to go about this?

Thanks guys!

Answer 1

Ok so from the amount of research I put into this: it is actually impossible to update dynamically through mySQL without loading all the comments first. This is because PhP loads before the page displays it, so JavaScript cannot dynamically present more comments unless the page is refreshed.

I am going to give a whirl at AJAX as it is made for dynamically changing websites. I hopefully will post my full answer to the problem soon.

  EDIT: Using jquery AJAX I came up with this:

//Load more comments when reaching the end of the page
var isPreviousEventComplete = true, isDataAvailable = true;
$(window).scroll(function () {
    if ($(document).height() - 50 <= $(window).scrollTop() + $(window).height()) {
        if (isPreviousEventComplete && isDataAvailable) {

            isPreviousEventComplete = false;
            $(".LoaderImage").css("display", "block");

            $.ajax({
                type: "POST",
                url: 'ajax/query.php',
                data: "from=" + counter,

                success: function (html) {
                    $("#comments").append(html);
                    counter++;
                    isPreviousEventComplete = true;

                    if (html == '') isDataAvailable = false;

                    $(".LoaderImage").css("display", "none");
                },
                error: function (error) {
                    alert("error " + error);
                }
            });

        }
    }
});

Works like a charm. Thanks to Hendry Tanaka for pointing me in the right direction.