Display (Show) Loading Progress GIF Image on Bootstrap DatePicker selection using jQuery in ASP.Net

Last Reply one month ago By dharmendr

Posted 2 months ago

hello,

How to show loading bar in javascript on click

[Solved] Button Click event called multiple times on Datepicker selection in ASP.Net 

using the above question, I want as user select one date so its quickly show a loading bar to user and once button click even complete that loading bar disappear in this way it will work one by one.

it should be like user select one date so javascript first for button meanwhile textbox is blur so user cannot select second date until first is complete its bcs to void multiple click at once.

please advice

You are viewing reply posted by: dharmendr one month ago.
Posted one month ago

Hi nauna,

Refer below code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .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: 200px;
            height: 100px;
            display: none;
            position: fixed;
            background-color: White;
            z-index: 999;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:TextBox ID="txtdate" runat="server" AutoCompleteType="Disabled"></asp:TextBox>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        <div class="loading" align="center">
            Loading. Please wait.<br />
            <br />
            <img src="loader.gif" alt="" />
        </div>
    </form>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var selectedDates = [];
            datePicker = $('[id*=txtdate]').datepicker({
                startDate: new Date(),
                minDate: 0,
                multidate: true,
                format: "mm/dd/yyyy",
                daysOfWeekHighlighted: "5,6",
                language: 'en',
                daysOfWeekDisabled: [0, 6]
            });
            datePicker.on('changeDate', function (e) {
                selectedDates = e.dates;
                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 });
                    document.getElementById("<%=Button1.ClientID %>").click();
                }, 100);
            });
        });
        function ShowProgress() {

        }
    </script>
</body>
</html>

Code

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