Question

Trying to implement a simple “load more” functionality with jquery. The idea is to use it in the same way as one does pages. Click and a certain number of posts loaded from the database show up.

I have the following javascript:

$(function(){
  var count = 0;
  var num = 20;
  $("#contents").load("posts.php");
  $("#more").click(
 function(){
 var count = 0;
var num = 20;
$("#contents").load("posts.php");
$("#more").click(
        function(){
                $(".loading").show("fast");
                        count += num;
                        $.post("posts.php", {'page': count}, function(data){

                                        $("#contents").append(data);
                                        $(".loading").hide("slow");
                                });

                }

);

and the following file posts.php

<?
echo "hello";
?>

And I have another file page.php with

 <div id="contents"></div>
<div class="loading"><span style="text-decoration: blink;">LOADING...!</span></div>
<button id="more">More..</button>

When i click the “More Button” though nothing happens even though I’m just trying to print out a simple hello world here. I have loaded the javascript in the head of the file like

<script type ="text/javascript" src ="javascript/load.js"></script>

Other javascript functionality I’ve implemented is working fine. Is there something to add to the “loading” or “contents” elements in page.php?

Answer 1

Your javascript lacks basic syntactic structure, and must be issuing a syntax error, unless you messed it up while posting here. Try this:

$(function(){
    var count = 0;
    $("#more").click(loadPosts);
    loadPosts();

    function loadPosts() {
        var num = 20;
        $(".loading").show("fast");
        count += num;
        $.post("posts.php", {'page': count}, function(data){
            $("#contents").append(data);
            $(".loading").hide("slow");
        });
    }
});

UPDATE

Edited the code above and removed $("#contents").load("posts.php");. It was not necessary, and redundant.