Listview load data on scroll [solved!!]

Does anyone have tried to add some javascript to load more data when the user scrolls down (like twitter) instead of clicking Load more..
3 answers

The following code should work if you place it in a snippet below the listview.

var interval;
var thisObj = this;

function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();
    return ( >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
this.interval = setInterval(function() {
    var listview = thisObj.domNode.previousSibling;
    var loadmoreButton = (listview.lastElementChild || listview.lastChild);
    var isButton = dojo.hasClass(loadmoreButton, "mx-listview-loadMore");
    if (isButton && isElementInViewport(loadmoreButton)) {;
}, 250);

I put Paul's code into a custom widget. In an HTMLSnippet, the interval doesn't get turned off when you change pages, and the browser starts logging 4 errors per second!

Please give it a try and let me how it works! Note: I didn't build out the test project or documentation yet, but just drop this widget below your list view and it should work.


Direct link to the widget


My best suggestion would be to use something like jquery.visible with a trigger that clicks the load more button if available and it scrolls into view.

Haven't built that myself though.