CODEWITHSUNDEEP
javascripthtmldomdojoxpages
stwissel
stwissel

Reputation: 20384

Load new content when user scrolls to the bottom using Dojo?

Loading new content in a HTML page when users reach the bottom is quite popular (FB, G+, Twitter), so I want to implement that in XPages (which uses Dojo) too. Looking on SO (and close by) I find questions around JQuery and/or generic here and here and here and here and here and here and here and here and here and here, just to name a few.

But how would one do that in Dojo?

Upvotes: 2

Views: 1551

Answers (2)

Lorcan McDonald
Lorcan McDonald

Reputation: 61

Unfortunately I can't comment on Niklas' answer, but his answer is correct. The one thing I would change is to issue a Dojo event in the case where you've scrolled to the bottom instead of calling a specific function. 

var scrollingDetector = (function() {
    var max = calculateScrollHeight();

    return function(){
        if (max < window.pageYOffset) {   
            max = calculateScrollHeight();
            dojo.publish('/newsApp/onScrollBottom');
        }
    }
    function calculateScrollHeight(){
        return (document.documentElement.scrollHeight - document.documentElement.clientHeight) - 80; 
    }
})();   

setInterval(scrollingDetector, 500);

(I also took the liberty of refactoring slightly in the interest of performance, as we only need to recalculate the height when we hit the bottom of the page).

This will allow you to hook into this event elsewhere in your code without having to edit this snippet or override the onMoreButtonClick() function.

Upvotes: 2

Niklas Heidloff
Niklas Heidloff

Reputation: 962

I don't know how Dojo does it but you can do it with plain JavaScript DOM API.

I've done this in the mobile controls. Check out MobileControlsLite.nsf (mView.xsp and mobileControls.js) from http://www.openntf.org/Projects/pmt.nsf/downloadcounter?openagent&project=XPages%20Mobile%20Controls&release=4.5.0&unid=2D4F47CB07AAEE4086257887004ED6C5&attachment=MobileControls450.zip

Here are some snippets from my app:

function scrollingDetector() {
    ...

    var pos = window.pageYOffset;
    var max = document.documentElement.scrollHeight - document.documentElement.clientHeight;

    if (max - 80 < pos) {   
        onMoreButtonClick(...);
    }
}   

setInterval(scrollingDetector, 500);

Upvotes: 4

Related Questions