JQuery: Why is this Load More Functionality not working? - php

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.