Show Loading progress bar/gif image for every postback without using update panel in asp.net

Question

0.00/5 (No votes)

See more:

, +

I am trying to do a very simple task, to show a pop-up in my application which says
"Please wait..We are Processing your Request..." or "Loading... ", whenever an user clicks on a button and after processing his request, the pop-up should disappear.
But the important thing is i don't want to use update panel to achieve this.

I have gone through many sites for solutions, and i got the below related solutions so far.

1. By using some ajax controls like update panel, update progress and modal pop extender and some javascript which gets the instances of when the request begun and when it ended, hence showing a pop-up between the range, which is what i was looking for. But the problem came when i got to know that it only handles the asynchronus requests, not the synchronus requests.

2. Some jquery functions(SetTimeOut), which will show a pop-up menu for a few seconds(even the time limit is defined while scripting), and disappears after the time limit. Again, this is far from what i have been looking for. This will have no clue, when exactly the processing of request has been completed!

So i wanted to have the same functionality of what the above FIRST method does, but for a normal synchronus postback, so that i can use it wherever i need, without touching update panel.

Below is the javascript code for FirstMethod.(Just to provide more info about my first point)

C#

 var prm = Sys.WebForms.PageRequestManager.getInstance();
        
//Raised before processing of an asynchronous postback
      prm.add_beginRequest(BeginRequestHandler);

        //Raised after an asynchronous postback is finished 
 prm.add_endRequest(EndRequestHandler);
 
       function BeginRequestHandler(sender, args) {
            //Shows the modal popup - the update progress
            var popup = $find('<%= modalPopup.ClientID %>');
            if (popup != null) {
                popup.show();


            }
        }

        function EndRequestHandler(sender, args) {
            //Hide the modal popup - the update progress
            var popup = $find('<%= modalPopup.ClientID %>');
            if (popup != null) {
                popup.hide();

            }
        }

Posted 13-Dec-13 0:04am

Prathap S V

Updated 13-Dec-13 1:27am

v6

Add a Solution

Comments

Mitchell J. 13-Dec-13 6:11am

How is the client browser supposed to receive information about how the task is going?

Prathap S V 13-Dec-13 6:31am

@Craig even i am not sure how it is supposed to recieve., and i didn't mean to use the same javascript method to achieve this, any alternate methods also be helpful.
Though i can say,Sys.WebForms.PageRequestManager is able to get the information about when the task has been started and ended for all the controls which are inside update panel.

Mitchell J. 13-Dec-13 6:39am

Then I suppose you should use a non-progressive indicator, like rotating dots or a marquee style progress bar :-)

Prathap S V 13-Dec-13 6:45am

@Craig Yes. that will do, but i don't know any methods that tracks and displays a loading gif image/rotating dots ,whenever a synchronus postback request is sent to server(to display that loading image during start and end of a event/request). that is what i have been looking for.

Mitchell J. 13-Dec-13 6:51am

Ahh... now I understand. You can't find a way to trigger events for the synchronous operations? Do you call the synchronous operations in your own code?

Prathap S V 13-Dec-13 7:04am

@Craig Let me explain in detail, yes .i have lots of synchronous operations in my code, i can trigger events as well and good. But, what i need to show is, when a user clicks "ADD" button after filling a form,
1. The event triggers,
2. Page with filled information is sent to server for processing.
3. Server Returns the page back to the client with certain result after completion of processing request.
So, in order to complete all the above 3 steps, it will take a variety of time which may range from 10 seconds to 2 mins depending upon various xyz factors like amount of data, trafficking etc.
So all i wanted is to show a loading gif image, from @Step1(event triggered/request begun) to @Step 3(event ended/request completed and returned back to the client).

Mitchell J. 13-Dec-13 7:17am

I submitted 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)

Mitchell J. · Answer 1 · 2013-12-13T01:17:00

Is this what you are after?

Imagine you have a form like this...

HTML

<form>
    <input type="text" id="box1" />
    <input type="text" id="box2" />
    <input type="submit" id="btn_submit" />
</form>

Now, with jQuery...

JavaScript

$(document).ready(function () {
   $('#btn_submit').click(function (event) {
      //Display the popup using the same or similar visuals as in the asynchronous operations.
   });
});

Now I'm not sure - does the DOM refresh when the server responds? If it does, you don't need to worry about cancelling the progress animation.

If it doesn't you could watch with a javscript loop every few seconds for the DOM changes to occur, and then remove the animation.

Hopefully this helps :-)