loadonscroll.js

/*

    Updated: Saturday August 13,2011 2:55 PM
    By: Andrew Hodgson

    loadonscroll widget

    <div id="mainarea">
        <div id="contentarea">
        </div>
    </div>

    $(function () {
        $("#mainarea").loadonscroll({
            targetId: "#contentarea",
            url: "/GetData"
        });
    });

*/
$.widget("ui.loadonscroll", {
    options: {
        targetId: null,     /* target element to append content to when scroll event is handled*/
        getparameters: null, /* optional function to get parameters to be passed to the $.ajax.data option, function is passed ref to widget*/
        getdata: null,      /* optional function to return the scroll data manually,if this option is set then the widget will INGORE any ajax calls*/
        success: null,      /* $.ajax.success() event handler*/
        error: null,        /* $.ajax.error() event handler*/
        type: "GET",       /* $.ajax.type option */
        url: null,          /* $.ajax.url option */
        contentType: "application/x-www-form-urlencoded", /* $.ajax.contentType option default is form, i.e. json: "application/json; charset=utf-8"*/
        dataType: "json",   /* $.ajax.dataType option */
        cache: true        /* $.ajax.cache option */
    },
    _create: function () {

        var options = this.options;
        var selfelement = this.element;
        var target = $(options.targetId);

        selfelement.scroll(function () {

            var self = $(this);
            var scrollTop = self.scrollTop();
            var sheight = self.height();
            var theight = target.height();
            var contentLoadTriggered = self.data("contentLoadTriggered") || false;
            var noMoreItems = self.data("noMoreItems") || false;
            var successfunc = options.success;
            var errorfunc = options.error;
            var getparametersfunc = options.getparameters;
            var getdatafunc = options.getdata;

            if (scrollTop >= (theight - sheight) && contentLoadTriggered === false && noMoreItems === false) {
                self.data("contentLoadTriggered", true);

                /*if options.getdata then call local function and process target with results */
                if (getdatafunc != null && $.isFunction(getdatafunc)) {

                    var resp = getdatafunc(self, options);

                    self.data("contentLoadTriggered", false);

                    if (resp == null || resp.d === null || resp.d === undefined || resp.d === "") {
                        console.debug("getdatafunc -> noMoreItems->true");
                        self.data("noMoreItems", true);
                    }
                    else {
                        if (successfunc != null && successfunc != undefined) {
                            if ($.isFunction(successfunc)) {
                                successfunc(target, resp, status, xhr);
                                return;
                            }
                        }
                        console.debug("getdatafunc-> target->append: resp.d");
                        target.append(resp.d);
                    }
                }
                else {
                    /*make ajax call to retrieve content*/
                    $.ajax({
                        type: options.type || "POST",
                        url: options.url,
                        data: getparametersfunc === null ? "{}" : getparametersfunc(self),
                        contentType: options.contentType || "application/x-www-form-urlencoded",
                        dataType: options.dataType || "json",
                        async: true,
                        cache: options.cache || false,
                        success: function (resp, status, xhr) {

                            self.data("contentLoadTriggered", false);

                            if (resp == null || resp.d === null || resp.d === undefined || resp.d === "") {
                                console.debug("noMoreItems->true");
                                self.data("noMoreItems", true);
                            }
                            else {
                                if (successfunc != null && successfunc != undefined) {
                                    if ($.isFunction(successfunc)) {
                                        successfunc(target, resp, status, xhr);
                                        return;
                                    }
                                }
                                console.debug("target->append: resp.d");
                                target.append(resp.d);
                            }
                        },
                        error: function (e, xhr) {

                            self.data("contentLoadTriggered", false);

                            if (errorfunc != null && errorfunc != undefined) {
                                if ($.isFunction(errorfunc)) {
                                    errorfunc(e, xhr);
                                }
                            }
                        }
                    });
                }
            }
        }); /* end scroll*/
    } /*end _create*/
});  /*end loadonscroll widget*/