• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 472
  • Last Modified:

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
0
praveenuni
Asked:
praveenuni
  • 7
  • 7
  • 3
2 Solutions
 
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
 
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 7
  • 7
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now