Loading -- DIV Tags

Hello,

I'm developing an application which will do several postbacks. Some of them are taking more time. During this time, I want to display "Loading...Please wait" message to the user using DIV tags. How can I do this?

Thanks
praveenuniAsked:
Who is Participating?
 
RejojohnyCommented:
it will not show as soon as button is clicked as it is rendered in the next page been called ....
load event happens only after the whole page is loaded
u could also give this a try

How to show progress in the client browser for a long-running ASP.NET page
http://www.kbalertz.com/Feedback_837375.aspx

0
 
Jeff CertainCommented:
Create a DIV tag and set display=hidden. Use client-side script to make the DIV visible on the button click (before the postback).
0
 
praveenuniAuthor Commented:
can you please show me how to do that ?

Thanks
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
Jeff CertainCommented:
In your HTML:
<DIV id="divWait" style="DISPLAY: none; VISIBILITY: hidden" ms_positioning="FlowLayout">Loading....Please wait</DIV>

JavaScript:
function ShowDiv()
            {
                document.getElementById('divWait').style.visibility='visible';
                document.getElementById('divWait').style.display='inline';
            }
            function HideDiv()
            {
                document.getElementById('divWait').style.visibility='hidden';
                document.getElementById('divWait').style.display='none';
            }

In your server-side code, you need to have something like this:
btnSubmit.Attributes.Add("onclick","ShowDiv();")

0
 
praveenuniAuthor Commented:
thank you very much for the info. I want to show the div on every page load, not only on a button click. So how can I do this?

0
 
Jeff CertainCommented:
So you want to show the div during the page load and then hide it once the page is loaded?
0
 
praveenuniAuthor Commented:
yes that is correct.
0
 
Jeff CertainCommented:
Create the DIV so it is visible...

<DIV id="divWait" ms_positioning="FlowLayout">Loading....Please wait</DIV>

When the page is done loading, use the client-side javascript to hide the DIV....

<body onload='HideDiv();'>
0
 
praveenuniAuthor Commented:
where should I put this statement: <DIV id="divWait" ms_positioning="FlowLayout">Loading....Please wait</DIV>.

I want to appear this div in the center of the page and how can I control the font size and color for Loading..

Thanks
0
 
Jeff CertainCommented:
1. Place it in the HTML whever you want it to appear.

2. You can control the appearance using the STYLE attribute.
0
 
praveenuniAuthor Commented:
I tried this, but in the hide function, its giving page error saying "Object Expected"
Any suggestions
0
 
Jeff CertainCommented:
Sounds like it can't find the div called divWait.... have you placed it on the page? Did you keep the same name?
0
 
praveenuniAuthor Commented:
yes, I kept the same name and placed it under the body tag.
0
 
RejojohnyCommented:
use this code .. it should work

<HTML>
.......
<body MS_POSITIONING="GridLayout" onload="javascript:document.getElementById('divWait').style.visibility  = 'hidden';">
        <DIV id="divWait" ms_positioning="FlowLayout">Loading....Please wait</DIV>

0
 
praveenuniAuthor Commented:
This one is working fine. But loading.. tag is not appearing as soon as the user clicks any button or do any postback. It is appearing only after the request and postback completed. It is appearing and disappearing in just a second.

Any suggestions

Thanks
0
 
RejojohnyCommented:
note, the response.flush is very important .. also after u do a flush, if u try to redirect to another page, u will get an error ..
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.