Listview load data on scroll [solved!!]

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

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 (
        rect.top >= 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)) {
        loadmoreButton.click();
    }
}, 250);
answered
9

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.

Repository

Direct link to the widget

answered
0

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.

answered