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

Emeka Okoye 66 Reputation points
2024-05-19T04:01:14.2433333+00:00

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.

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,362 questions
JavaScript API
JavaScript API
An Office service that supports add-ins to interact with objects in Office client applications.
911 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,479 questions
{count} votes

Accepted answer
  1. Bruce (SqlWork.com) 59,046 Reputation points
    2024-05-20T17:11:16.9833333+00:00

    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();
        });
    });
    
    0 comments No comments

2 additional answers

Sort by: Most helpful
  1. Lan Huang-MSFT 27,716 Reputation points Microsoft Vendor
    2024-05-20T07:24:30.4733333+00:00

    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.

    1 person found this answer helpful.
    0 comments No comments

  2. SurferOnWww 2,171 Reputation points
    2024-05-20T01:25:18.69+00:00

    // 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

    0 comments No comments