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

Question

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 14-May-24 3:30am

Mekadosky

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Hasham Ahmad · Answer 1 · 2024-05-14T19:11:00

Solution 1

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>

Posted 14-May-24 19:11pm

Hasham Ahmad

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)"