Question

I am using CodeIgniter. In my controller I am decoding a JSON response and simply displaying the values upon loading a view. I am simply displaying all my content from a JSON array (no database used). It is completely an array from which i am rendering the data.I want to autoload the content whilst scrolling.

Example:

 $resultjson = $this->curl->simple_get("http://www.test.com/api/records.php?ak=XXXXXXXX&ts=XXXXXXXX&sig=XXXXXXXX&postano=XXXXXX&count=100");

How can I fetch 10 records when autoloaded? Just like the http://pinterest.com/ mechanism. How can I achieve this?

Are there any plugins? Does CodeIgniter already have a solution for it such that I can use classes or libraries?

Answer 1

You can use the jQuery scroll event, scrollTop() and the $.ajax();

Basicly catch the scroll event, see if $(window).scrollTop() is higher than <div id="auto_load"></div> (through .offset()) and run ajax once if that’s the case.

div#auto_load would be places bellow loaded content, and will “jump” down once content is added.

Example:

var ajax_once = false;
$(window).bind('scroll', function() {
    if (ajax_once)
        return;

    if ($(this).scrollTop() >= $('div#auto_load').offset().top) {
        ajax_once = true;
        $.ajax({
            /* Url, dataType json etc. */
        }).done(function(data) {
            /* use the data */
            ajax_once = false;
        });
    }
});