Cacher is the code snippet organizer for pro developers

// The following code loads a sample paypal checkout javascript file 
// along with a local file

loadExternalJS: function () {
 
    var js = document.createElement("script");
    js.type = "text/javascript";
    js.src = "http://www.paypalobjects.com/api/checkout.js";

    js.onload = function () {
        var paypalPluginJS = document.createElement("script");
        paypalPluginJS.type = "text/javascript";
        paypalPluginJS.src = p.modulePath + 'js/payment-paypal.js';

        document.body.appendChild(paypalPluginJS);
    }
    document.body.appendChild(js);
},

var PluginName;
var currentPluginNameID = 0;

(function ($) {
    $.PluginName = function (p) {
        p = $.extend({
            modulePath: '', DataObj: '', portalID: 0, userModuleID: ''
        }, p);
        PluginName = {
            config: {
                isPostBack: false,
                async: false,
                cache: false,
                type: 'POST',
                contentType: "application/json; charset=utf-8",
                data: '{}',
                dataType: 'json',
                crossDomain: true,
                baseURL: p.modulePath + 'Services/PluginNameService.asmx/',
                method: "",
                url: "",
                ajaxCallMode: "",
                userModuleID: p.userModuleID,
                portalID: p.portalID,
                service: {
                    Create: "Create",
                    GetList: "GetList",
                    GetByID: "GetByID",
                    Delete: "Delete",
                    GetDetail: "GetDetail",
                }
            },
            defaultParams: function () {
                return {
                    portalID: PluginName.config.portalID,
                    SageFrameUser: PluginName.config.UserName,
                    userModuleID: PluginName.config.userModuleID,
                    authToken: SageFrameSecureToken
                };
            },
            extendDefaultParams: function (param) {
                var newParams = Object.assign(param, PluginName.defaultParams());
                return newParams;
            },
            NotifySF: function (message, msgType) { SageFrame.messaging.show(message, msgType); },


            init: function () {
                currentPluginNameID = 0;
                PluginName.ClearStage();
                PluginName.GetList();
                PluginName.InitEvents();
                PluginName.ClearAddForm();
            },
            ajaxSuccess: function (data) { },
            ajaxFailure: function () { },
            ajaxCall: function (config) {
                $.ajax({
                    type: PluginName.config.type,
                    contentType: PluginName.config.contentType,
                    async: PluginName.config.async,
                    cache: PluginName.config.cache,
                    url: PluginName.config.url,
                    data: PluginName.config.data,
                    dataType: PluginName.config.dataType,
                    success: PluginName.config.ajaxCallMode,
                    error: PluginName.ajaxFailure
                });
            },
            ClearStage: function () {
                $('.pnlPluginNameContainer').show();
                $('.pnlNewPluginName').hide();
                $('.pnlViewPluginNameDetail').hide();
            },

            ClearAddForm: function () {
                // CLEAR ADD FORM 
            },

            GetList: function () {
                var offset_ = 1;
                var current_ = 1;
                var perpage = ($("#tblPluginGrid_pagesize").length > 0) ? $("#tblPluginGrid_pagesize :selected").text() : 10;
                this.config.url = this.config.baseURL;
                this.config.method = this.config.service.GetList;

                var newParams = PluginName.extendDefaultParams({
                    // YOUR PARAMS
                });

                this.config.data = newParams;

                $("#tblPluginGrid").sagegrid({
                    url: this.config.url,
                    functionMethod: this.config.method,
                    colModel: [
                                { display: '#', name: 'RowNum', cssclass: 'cssClassHeadNumber', coltype: 'label', align: 'center', controlclass: '' },
                                { display: 'ID', name: 'PluginNameID', cssclass: 'cssClassHide', controlclass: '', coltype: 'label', align: 'center', hide: true },
                                { display: 'Item Name', name: 'ItemName', cssclass: 'cssClassHide', controlclass: '', coltype: 'label', align: 'center' },
                                { display: 'Actions', name: 'action', cssclass: 'cssClassHeadNumber', coltype: 'label', align: 'center' }
                    ],
                    buttons: [
                                { display: 'View', cssclass: 'fa fa-file-text-o', name: '_detail', enable: true, _event: 'click', trigger: '3', callMethod: 'PluginName.GridRowView', arguments: '1,2,3' },
                                { display: 'Edit', cssclass: 'fa fa-file-text-o', name: '_detail', enable: true, _event: 'click', trigger: '3', callMethod: 'PluginName.GridRowEdit', arguments: '1,2,3' },
                                { display: 'Delete', cssclass: 'fa fa-trash-o', name: '_detail', enable: true, _event: 'click', trigger: '4', callMethod: 'PluginName.GridRowDelete', arguments: '1,2,3' },
                    ],
                    rp: perpage,
                    nomsg: "No Records Found!",
                    param: newParams,
                    current: current_,
                    pnew: offset_,
                    hidePagination: false,
                    NormalPaging: false,
                    sortcol: { 3: { sorter: false } }
                });
            },

            GridRowView: function (tblID, argus) { /* ID = argus[3] */ },
            GridRowEdit: function (tblID, argus) { },
            GridRowDelete: function (tblID, argus) { },



            GetList: function () { },

            InitEvents: function () { },

            GetRequest: function () {
                PluginName.config.url = PluginName.config.baseURL + "GetSomeData";
                PluginName.config.data = JSON.stringify({
                    portalID: parseInt(SageFramePortalID),
                    userModuleID: p.userModuleID,
                    userName: SageFrameUserName,
                    secureToken: SageFrameSecureToken
                });
                PluginName.config.ajaxCallMode = PluginName.CallBackRequest;
                PluginName.config.async = false;
                PluginName.ajaxCall(PluginName.config);
            },
            CallBackRequest: function (data) {
                if (data.d !== null && data.d !== '') {
                }
            },

        };
        PluginName.init();
    }
    $.fn.PluginName = function (p) {
        $.PluginName(p);
    };
})(jQuery);



[ Usage ]
<script type="text/javascript">
    $(function () {
        $(this).PluginName({
            modulePath: '<%=modulePath%>',
            portalID: '<%=portalID%>',
            userModuleID: '<%=userModuleID%>'
        });
    });
</script>



//  [ Javascript  for SageGrid]
//  "/js/SageGrid/jquery.tablesorter.js",
//  "/js/SageGrid/jquery.grid.js",
//  "/js/SageGrid/SagePaging.js",
//  "/js/SageGrid/jquery.global.js",
//  "/js/SageGrid/jquery.dateFormat.js",
//  "/js/jquery.easing.1.3.js"

  SageConfirmDialog('Do you wish to remove this audience ?').done(function () { });

var PluginName;
(function ($) {
    $.PluginName = function (p) {
        p = $.extend({
             modulePath: '', DataObj: '', portalID: 0, userModuleID: ''
        }, p);
        PluginName = {
            config: {
                isPostBack: false,
                async: false,
                cache: false,
                type: 'POST',
                contentType: "application/json; charset=utf-8",
                data: '{}',
                dataType: 'json',
                crossDomain: true,
                baseURL: p.modulePath + 'Services/PluginNameService.asmx/',
                method: "",
                url: "",
                ajaxCallMode: "",
                userModuleID: p.userModuleID
            },
            init: function () {
               
            },
            ajaxSuccess: function (data) {
            },
            ajaxFailure: function () {
            },
            ajaxCall: function (config) {
                $.ajax({
                    type: PluginName.config.type,
                    contentType: PluginName.config.contentType,
                    async: PluginName.config.async,
                    cache: PluginName.config.cache,
                    url: PluginName.config.url,
                    data: PluginName.config.data,
                    dataType: PluginName.config.dataType,
                    success: PluginName.config.ajaxCallMode,
                    error: PluginName.ajaxFailure
                });
            },

           GetRequest: function () {
                PluginName.config.url = PluginName.config.baseURL + "GetSomeData";
                PluginName.config.data = JSON.stringify({
                    portalID: parseInt(SageFramePortalID),
                    userModuleID: p.userModuleID,
                    userName: SageFrameUserName,
                    secureToken: SageFrameSecureToken
                });
                PluginName.config.ajaxCallMode = PluginName.CallBackRequest;
                PluginName.config.async = false;
                PluginName.ajaxCall(PluginName.config);
            },
      CallBackRequest : function (data) {
                if (data.d !== null && data.d !== '') {
                }
            },

        };
        PluginName.init();
    }
    $.fn.PluginName = function (p) {
        $.PluginName(p);
    };
})(jQuery);




[ Usage ]
<script type="text/javascript">
    $(function () {
        $(this).PluginName({
            modulePath: '<%=modulePath%>',
            portalID: '<%=portalID%>',
            userModuleID: '<%=userModuleID%>'
        });
    });
</script>