How to make loader image show on every page when user click on any task

Question

I have a webform application with master page, I want when user initiate any task in the website the loader image will show with modal screen untill the task is finished. below is my master page code.

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <%-- Start of wating message  --%>  <%--Loading progress--%> 
    <script>
        $(function () {
            // Handle form submission
            $("form").submit(function (event) {
                // Prevent default form submission
                event.preventDefault();

                // Show loader modal
                $(".modal").show();

                // Optionally, you can perform additional tasks here

                // Submit the form (if needed)
                $(this).unbind('submit').submit();
            });
        });
    </script>
    <%-- End of wating message  --%>

css

<style type="text/css"> /* Loading progress*/
        .modal {
                display:    none;
                position:   fixed;
                z-index:    1000;
                top:        0;
                left:       0;
                height:     100%;
                width:      100%;
                background: rgba( 255, 255, 255, .8 ) 
                url('../Asset/Loading.gif') 
                50% 50% 
                no-repeat;
               }
        .loading {
                overflow: hidden;   
                }
        .disp {
                display: block;
              }
    </style>

within the formID in the master page

<form id="form" runat="server">

         <div id="modal" class="modal" style="text-align: center">
    </div>

when I run the code the loading image will show, but when I click on any button the loading image will come up, roll but the button "button_click(object sender, EventArgs e)" will not fire to execute commands.

Please who can help me figure out where the issue is, as this is my first time of doing this.

Answer 1

you just need to display the modal, don't cancel submit. also you should check for validation first:

 $(function () {
    // Handle form submission
    $("form").submit(function (event) {
       // check if valid
       if (!window.Page_ClientValidate || Page_ClientValidate())
            // Show loader modal
            $(".modal").show();
    });
});

Answer 2

Hi @Emeka Okoye,

You need to replace onClick with onserverClick.

<button type="submit" runat="server" id="btnsubmit" onserverclick="Button1_Click">submit</button>

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 3

// Show loader modal $(".modal").show();

Is it really modal? If not and if the issue is solved when <div id="modal" class="modal" style="text-align: center"> is shown as modal, I suggest that you use the Modalpopup Extender of ASP.NET Ajax Control Toolkit:

ModalPopup Demonstration