Wednesday, 30 January 2019

Common jQuery functions to use in web applications

Following functions depends on some external jQuery libraries, so you can download these js libraries using link 


Step 1: Copy the following code and paste in your common.js file.
(function (exports) {
    "use strict";
    var variables = {
        /**/
    };
    var elements = {
        /**/
    };
    var common = {
        InputSubmitButtonOldVal: "",
        Init: function () {

        },
        Get: function (url, data, successCallback, errorCallback, showLoading = false) {
            get(url, data, successCallback, errorCallback, showLoading);
        },
        Post: function (url, data, successCallback, errorCallback, showLoading = false) {
            post(url, data, successCallback, errorCallback, showLoading);
        },
        ShowLoadingInForm: function (form) {
            var inputButton = $(form).find("input.submit");
            if (inputButton[0]) {
                this.InputSubmitButtonOldVal = $(inputButton).val();
                $(inputButton).val("Loading..");
                $(inputButton).attr("disabled", "disabled");
            } else {
                inputButton = $(form).find("button.submit");
                if (inputButton[0]) {
                    this.InputSubmitButtonOldVal = $(inputButton).text();
                    $(inputButton).text("Loading..");
                    $(inputButton).attr("disabled", "disabled");
                }
            }
        },
        HideLoadingInForm: function (form) {
            var inputButton = $(form).find("input.submit");
            if (inputButton[0]) {
                inputButton.val(this.InputSubmitButtonOldVal);
                inputButton.removeAttr("disabled");
            }
            else {
                inputButton = $(form).find("button.submit");
                if (inputButton[0]) {
                    inputButton.text(this.InputSubmitButtonOldVal);
                    inputButton.removeAttr("disabled");
                }
            }
        },
        SubmitFailure: function (response) {
            $("#formError").text(response.statusText);
        },
        ShowSuccessAlert: function (message, modalSelector) {
            swal("Success", message, "success").then(function (value) {
                if (modalSelector) {
                    showModal(modalSelector);
                }
            });
        },
        ShowErrorAlert: function (message, modalSelector) {
            swal("Oops", message, "error").then(function (value) {
                if (modalSelector) {
                    showModal(modalSelector);
                }
            });
        },
        IsConfirm: function (message) {
            return swal({
                title: message,
                // text: "You are about to perform this action",
                icon: "warning",
                buttons: true,
                dangerMode: true,
            })
        },
        GetTimeZoneName: function () {
            var timeZoneName = (new Date).toString().split('(')[1].slice(0, -1);
            return timeZoneName;
        },
        FixTextLength: function (text, length = 100) {
            if (text.length < length) {
                return text;
            }
            else if (text.length > length) {
                text = text.substr(0, length) + "...";
            }

            return text;
        },
        GetNameFirstLetters: function (name) {
            var nameList = name.split(' ');
            var leaderName = "";

            if (nameList.length > 0) {
                leaderName = nameList[0].substr(0, 1).toUpperCase() + (nameList.length > 1 ? nameList[1].substr(0, 1).toUpperCase() : "");
            }

            return leaderName;
        },
        ShowLoading: function () {
            showLoading();
        },
        HideLoading: function () {
            hideLoading();
        },
        ResetForm: function (formId) {
            var $form = $(formId);

            // reset errors with unobtrusive
            $form.trigger('reset.unobtrusiveValidation');

            // reset inputs
            var validator = $form.validate(); // get saved validator
            //validator.settings.ignore = ''; // if form hided (closed ui dialogs, etc)
            validator.resetForm();
        },
        BindDatepicker: function (selector) {
            $(selector).datepicker({ dateFormat: 'dd M yy' });
        },
        BindImagePopup: function (selector) {
            $(selector).magnificPopup({ type: 'image' });
        }
    };

    //BEGIN: Private functions
    // BEGIN: Making ajax calls
    function get(url, data, successCallback, errorCallback, showLoading = false) {
        if (showLoading) {
            showLoading();
        }
        $.ajax({
            type: "GET",
            url: url,
            data: data,
            success: function (response) {
                if (showLoading) {
                    hideLoading();
                }
                successCallback(response);
            },
            error: function (response) {
                if (showLoading) {
                    hideLoading();
                }
                errorCallback(response);
            }
        });
    }
    function post(url, data, successCallback, errorCallback, showLoading = false) {
        if (showLoading) {
            showLoading();
        }
        $.ajax({
            type: "POST",
            url: url,
            data: data,
            success: function (response) {
                if (showLoading) {
                    hideLoading();
                }
                successCallback(response);
            },
            error: function (response) {
                if (showLoading) {
                    hideLoading();
                }
                errorCallback(response);
            }
        });
    }
    //END
    function showLoading() {
        $.LoadingOverlay("show", {
            image: "",
            fontawesome: "fa fa-spinner fa-spin" // classes from font-awesome.min.css
        });
    }
    function hideLoading() {
        $.LoadingOverlay("hide");
    }
    //END

    exports.common = common;
})(this);

Step 2: Usage: You can use the above functions as following:
$(document).ready(function () {
 common.ShowLoading();
});

Click Here to Download the complete source code.


No comments:

Post a Comment