Using $.post to load data

Question

I'm currently coding my own blog type site, just for fun. I didn't know any php/mysql/javascript at the beggining of this project, and I've learnt a ton, and so far the process of coding this has been more or less fluid, however, I have finally found myself stuck, with the problem of content loading in the main part of the site, which I guess is a bit more complex than the stuff I've been doing...

I want to use a triggered way of displaying more posts, by order of date, and I found a Jquery plugin called Jscroll; so far it does what it says it does, but I don't know how to use it along with some other method in order for it to load new content with every click on a certain link.

I guess this can be achieved by applying AJAX techniques, and I've been looking at the documentation on the $.post() function from Jquery, which, from what I understand, is able to send data to a target file so then you're able to retrieve that data with $_POST, for instance.

Here's my code for the Jscroll plugin, with an explanation of the parameters...

$('#postwrap').jscroll({
    autoTrigger: false, //False makes the content load only by a trigger (a link)
    loadingHtml: "<div><img src=/img/loading.gif><small> Loading...</small></div>",
    callback: Test, //Loads a function after the content is loaded (it doesn't actually work if I write it with the (), like Test()
});

And... here's the Test function referenced by the callback setting in the code above

  function Test(){
   $.post( "loadArticle.php", { test1: "a", test2: "b" } );
  }

So, in "loadArticle.php", I am trying to retrieve the values $.post sends, through $_POST['test'], but after the trigger loads the next set of contents, I do a var_dump of the variable sent, and I get NULL values. I know I'm "sending" nothing worthwhile, but if I actually manage to get something, then I'll procceed to whatever I come up with to actually retrieve database posts in an orderly manner.

I don't know if this can be done this way, if $.post() is even supposed to do what I think it does, if I am misunderstanding something, and if there is any other way... I'd really appreciate your help, thanks.

Answer 1

Count the the element loaded in your container div each time you call your AJAX function.. Do something like this..

var loader = {};

    loader.content = function(element){
        var contentCount = $(element).children().length;
        $.ajax({
            url: 'http://yoursite.com/loadcontent.php',
            dataType: "json",
            type: "post",
            data:{
                offset:contentCount
            }
            success:function(data){
                var htmlString = '<div class="samplechild"><h4>'+data.title+'</h4><p>'+data.post+'</p></div>';
                $(element).append(htmlString);
            }
        });
    }

    $('#postwrap').jscroll({
        autoTrigger: false, //False makes the content load only by a trigger (a link)
        loadingHtml: "<div><img src=/img/loading.gif><small> Loading...</small></div>",
        callback: loader.content('.container'), //Loads a function after the content is loaded (it doesn't actually work if I write it with the (), like Test()
    });

ANOTHER OPTION FOR INFINITE SCROLL

var loader = {};

    loader.content = function(element){
        var contentCount = $(element).children().length;
        $.ajax({
            url: 'http://yoursite.com/loadcontent.php',
            dataType: "json",
            type: "post",
            data:{
                offset:contentCount
            }
            success:function(data){
                var htmlString = '<div class="samplechild"><h4>'+data.title+'</h4><p>'+data.post+'</p></div>';
                $(element).append(htmlString);
                $(element).animate({ scrollTop: $(document).height() }, 1000);
            }
        });
    }

    $(document).on('click','.button-link',function(event){
        event.preventDefault();
        loader.content('.containerDiv');
    });