JS Helpers are different helper function to improve UX and UI. JS helper files included in /libcommon/style-guide/js/helpers.js

JS Loader

Use this helper if you want to display a loader on html elements like buttons, div, span etc... To initialise this helper function, use $(<element>).loading() and $(<element>).resetLoading() inside your javascript function. loading() function will disable attached element and display a loader and loading text over the element. resetLoading() function removes loader and disable attribute from attached element.

<!-- HTML Content -->
<button id="submit-btn" class="btn btn-primary w-150" type="button">Click Here</button>
<a href="#" id="small-div">
    <div class="small-rectangle">
        <span class="h4" id="text-element">Click Here</span>
    </div>
</a>

<!-- jQuery event functions -->
<script type="text/javascript">
        $('#submit-btn').click(function (event) {
            //loader initializing
            $('#submit-btn').loading();

            setTimeout(function () {
                //loader removing
                $('#submit-btn').resetLoading();
            }, 1500);
        });

        $('#small-div').click(function (event) {
            //loader initializing
            $('#small-div').find('#text-element').loading();

            setTimeout(function () {
                //loader removing
                $('#small-div').find('#text-element').resetLoading();
            }, 1500);
        });
</script>

JS Loader with custom loader text

If you want to change loading text, add data-loading-text="Your text" attribute in which element you want to display loader.

<button id="loader-btn" class="btn btn-primary w-150" data-loading-text="Please Wait" type="button">
    Click Here
</button>
<a href="#" id="file-upload">
    <div class="small-rectangle">
        <span class="h4" data-loading-text="File Uploading" id="text-element">Click Here</span>
    </div>
</a>

<!-- jQuery event functions --><script type="text/javascript">
    $('#loader-btn').click(function (event) {
        //loader initializing
        $('#loader-btn').loading();

        setTimeout(function () {
            //loader removing
            $('#loader-btn').resetLoading();
        }, 1500);
    });


    $('#file-upload').click(function (event) {
        //loader initialized
        $('#file-upload').find('#text-element').loading();

        setTimeout(function () {
            //loader removing
            $('#file-upload').find('#text-element').resetLoading();
        }, 1500);
    });
</script>

String Replace

String replace function is a helper function to replace strings inside {}. Use <string>.strReplace({'variableName':'value'})

<!-- Above example HTML -->
<textarea id="example-text" cols="57" rows="2">Welcome {firstName} {lastName}</textarea>

<div class="form-group">
    <input type="text" placeholder="Enter first name" class="form-control" id="firstName">
</div>
<div class="form-group">
    <input type="text" placeholder="Enter last name" class="form-control" id="lastName">
</div>
<button class="btn btn-primary" id="str-replace-btn" type="button">Click Here to Replace Text
</button>
<button class="btn btn-danger" id="reset-btn" type="button">Reset
</button>

<!-- Javascript Code to replace dummy details -->
<script type="text/javascript">
    $(document).ready(function () {
        $('#str-replace-btn').click(function (event) {
            event.preventDefault();
            var template = $('#example-text').val();
            var values = {firstName: $('#firstName').val(), lastName: $('#lastName').val()};

            //Real values replacing with dummy values
            var replaced = template.strReplace(values);

            $('#example-text').val(replaced);
        });
    });
</script>

Get Query Param Value

To get url params from current url, use $.getUrlParam(key). This will return value for corresponding key.

<script type="text/javascript">
    $(document).ready(function () {
        var id = $.getUrlParam('id');
        var status = $.getUrlParam('status');
    });
</script>