Show (Display) Loading Progress GIF Image on Button Click using JavaScript and jQuery in ASP.Net

Waghmare

SOLVED CLOSED ACTIVE ANSWERED
User: Waghmare
Posted: on May 02, 2020 12:07 PM
Forum: ASP.Net Web Forms
Answer: 1
Views: 15900
Sample Code: Download

Hi team,

How to show progress modal in page after button click

I am using below code in my page to disable button after click until it execution completes. So the user can get idea that data is processing.

Along with this in my script i want to show Progress image on center of page till execution completes.

It will be much better if you modify the below script which works fine in my application.

    <script type="text/javascript">
        function disableBtn(btnID, newText) {
            Page_IsValid = null;
            if (typeof (Page_ClientValidate) == 'function') {
                Page_ClientValidate();
            }
            var btn = document.getElementById(btnID);
            var isValidationOk = Page_IsValid;

            if (isValidationOk !== null) {
                if (isValidationOk) {
                    btn.disabled = true;
                    btn.value = newText;
                }
                else {
                    btn.disabled = false;
                    btnFilter.disabled = false;
                }
            }
            else {
                setTimeout("setImage('" + btnID + "')", 10);
                btn.disabled = true;
                btn.value = newText;
            }
        }
    </script>

<asp:Button ID="btnSubmit" Text="Submit" runat="server" CssClass="btn btn-primary"
    OnClick="btnSubmit_Click" ValidationGroup="validGroup1" OnClientClick="disableBtn(this.id, 'Saving Idea...')"
    UseSubmitBehavior="false" />

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on May 03, 2020 05:24 AM
Report

Hi Waghmare,

Refer below code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            background-color: black;
            z-index: 99;
            opacity: 0.8;
            filter: alpha(opacity=80);
            -moz-opacity: 0.8;
            min-height: 100%;
            width: 100%;
        }

        .loading {
            font-family: Arial;
            font-size: 10pt;
            border: 5px solid #67CFF5;
            width: 300px;
            height: 150px;
            display: none;
            position: fixed;
            background-color: White;
            z-index: 999;
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function disableBtn(btnID, newText) {
            Page_IsValid = null;
            if (typeof (Page_ClientValidate) == 'function') {
                Page_ClientValidate();
            }
            var btn = document.getElementById(btnID);
            var isValidationOk = Page_IsValid;

            if (isValidationOk !== null) {
                if (isValidationOk) {
                    btn.disabled = true;
                    btn.value = newText;
                } else {
                    btn.disabled = false;
                    btnFilter.disabled = false;
                }
            }
            else {
                setTimeout(function () {
                    ShowProgress();
                }, 100);
                btn.disabled = true;
                btn.value = newText;

            }
        }
        function ShowProgress() {
            setTimeout(function () {
                var modal = $('<div />');
                modal.addClass("modal");
                $('body').append(modal);
                var loading = $(".loading");
                loading.show();
                var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
                var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
                loading.css({ top: top, left: left });
            }, 200);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="loading" align="center">
            Loading. Please wait.<br />
            <br />
            <img src="loader.gif" alt="" />

        </div>
        <asp:Button ID="btnSubmit" Text="Submit" runat="server" CssClass="btn btn-primary"
            OnClick="btnSubmit_Click" ValidationGroup="validGroup1" OnClientClick="disableBtn(this.id, 'Saving Idea...')"
            UseSubmitBehavior="false" />
    </form>
</body>
</html>

Code

protected void btnSubmit_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(2000);
}

For more details refer below article.

Show (Display) Loading Progress GIF Image on Button Click using JavaScript and jQuery in ASP.Net

Display loading progress image when Page Loads or does PostBack using ASP.Net

Company

Explore

Follow us

Contact Us