Click here to Skip to main content
15,947,389 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
   <%-- Start of wating message  --%>  <%--Loading progress--%>
   <script type="text/javascript">
       $("#MasterFormID").submit(function () {
           $("body").addClass("loading disp");
           $("#modal").addClass("disp");
       });
   </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="MasterFormID" runat="server">

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


But this is not loading the load image, and I can't figure out what went wrong, and this is my first time I am trying this, please anyone can help
thats.

What I have tried:

I tried placing the code on every page page_load but it did not work out.
Posted

1 solution

Wrap your jQuery code inside the $(document).ready() function to ensure it runs after the DOM is fully loaded.


<script>
    $(document).ready(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>
 
Share this answer
 
Comments
Richard Deeming 15-May-24 3:46am    
Better yet, check the documentation:
.ready() | jQuery API Documentation[^]

Specifically the following remarks:

jQuery offers several ways to attach a function that will run when the DOM is ready. All of the following syntaxes are equivalent:

* $( handler )
* $( document ).ready( handler )
* $( "document" ).ready( handler )
* $( "img" ).ready( handler )
* $().ready( handler )

As of jQuery 3.0, only the first syntax is recommended; the other syntaxes still work but are deprecated.

So instead of:
$(document).ready(function () { ... });

use:
$(function () { ... });
Mekadosky 15-May-24 6:49am    
@Richard Deeming and @Hasham Ahmad I combined your contributions, the loading image is showing, but when I click on any button the loading image will come up roll but the button will not redirect to were in is intended to go.

what else can I do to resolve it?
Hasham Ahmad 15-May-24 20:22pm    
please explain more about how you are making the redirect call
Mekadosky 16-May-24 2:46am    
That is, for every button in the website, when clicked, the loading image show but the button will not execute the command it is meant to execute, or to redirect to another page for the ones meant to redirect.
The command or redirect call are based on the "button_click(object sender, EventArgs e)"

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900