05sie Load content while scrolling with Prototype and JSON-P via Yahoo API

Today I’d like to present my solution for loading content while scrolling down the page in the DZone style using PrototypeJS library.

Check out simple DEMO »
Demo was tested in Firefox, Chrome, IE7/8 and Opera.

I used Yahoo Local Search API as a JSON data source for keyword kitesurfing.

Here is simple table where data will be put.


<body id="body">
    <table id="table-scroll">
        <tr><th>Name</th><th>Address</th><th>City</th></tr>
        <tbody id="result"></tbody>
    </table>
    <div id="loader">
        <img src="loader.gif" />
    </div>
</body>

Class Scroll manages all the JavaScript.


var Scroll = {
//init method run at the page load
    init: function(){
//Start fetching elements from 1
        this.start = 1;
//10 elements for each request
        this.limit = 10;
        this.loading = false;
//Template for one table row
        this.tpl = new Template('<tr><td><a href="#{ClickUrl}">#{Title}</a></td><td>#{Address}</td><td>#{City}</td></tr>');
//Window scroll event handled by onScroll method
        window.onscroll = this.onScroll.bind(this);
//Get data for the first time
        this.getData();
    },
    onScroll: function(){
        var docView, pxToTop;
//Get viewport's scroll offsets
        docView = document.viewport.getScrollOffsets();
//Sum top offset and viewport height
        pxToTop = docView.top + document.viewport.getHeight();
//If pixels amount from the bottom of page to the top is greater than whole body height
//user reached the end of the page and we can get more data
        if (pxToTop > document.body.clientHeight) {
//Increase start by limit value
            this.start += this.limit;
//Get more data
            this.getData();
        }
    },
    getData: function(){
//If we scroll fast, only one JSON-P request can be made at the time
        if (!this.loading) {
//Show loader div with gif
            $('loader').show();
//Set loading to true
            this.loading = true;
//my-src is the id of script tag which is inserted in the head of the document
            if ($('my-src')) {
//It'll be removed if it was inserted earlier
                $('my-src').remove();
            }
//Document head element has id 'my-head'
//New element script is created and inserted into head tag to make JSON-P request
//We set parameter 'callback' to 'Scroll.showItems', so 'showItems' method will be invoked after data is loaded.
            $('my-head').insert(new Element('script', {
                src: 'http://local.yahooapis.com/LocalSearchService/V3/localSearch?appid=YahooDemo&amp;&amp;output=json&amp;
callback=Scroll.showItems&amp;query=kitesurfing&amp;start=' + this.start + '&amp;results=' + this.limit,
                type: 'text/javascript',
                id: 'my-src'
            }))
        }
    },
    showItems: function(Data){
//Get Result from Yahoo to List var
        var List = Data.ResultSet.Result;
        var rows = ''
//For each 'List' element build html in variable rows, using 'evaluate' method on 'tpl' object.
        List.each(function(d){
            rows += this.tpl.evaluate(d)
        }
.bind(this))
//Add 'rows' to the <tbody id="result"> tag.
        $('result').insert(rows);
//Set loading to false to make another JSON-P request possible.
        this.loading = false;
//Hide loader
        $('loader').hide();
    }
}
document.observe('dom:loaded', Scroll.init.bind(Scroll));

Thanks for reading!

This blog in mainly in polish, but maybe I’ll change this