How to show Page loading progress with modal background

Problem:

In my recent application development I have faced a strange problem to show modal background with page loading progress. I had tried in different way but not working perfectly. Then I have solved it. I think that there is another efficient way to solved it but now this time it is working for me.

Solution:

In css class:
.divModalBackground
{
filter: alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5;
width:100%;
background-color: #999988;
position: absolute;
top: 0px;
left: 0px;
z-index: 800;
}

In aspx page:
<asp:Panel ID=”Panel1″ runat=”server” Height=”900px” Width=”100%” CssClass=”divModalBackground” Visible=”true” >
<asp:Image runat=”Server” ID=”ImageLoader” CssClass=”LoadingProgress” ImageUrl=”../../App_Themes/Black/images/ajax-loader.gif” />
</asp:Panel>

In aspx.cs page I put the code like this:
//to show modal popup at page startup
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
Panel1.Visible = true;
}

In aspx page place this
// to clear the modal background when page load complete, place this code at the end of your page just before the end of the form tag
<script type=”text/javascript” >
function init()
{
var objdiv=document.getElementById(‘<%=Panel1.ClientID%>’)
if(objdiv)
{
objdiv.style.visibility = ‘hidden’;
}
}

init();
</script>

Problem using AJAX call in IE6 and IE7

IE6 & IE7 makes problem when use xmlhttprequest for ajax

At first time when I used core ajax using xmlhttprequest. Using this technique we sent parameter as querystring through the url,like this,

function GetEmailId()
{
var url=”http://server.com/test.aspx&#8221;;
url=url+”&sid=test”;
xmlhttp.onreadystatechange=statechangedLogin;
xmlhttp.open(“GET”, url, true);
xmlhttp.send(null);
}
function statechangedLogin()
{
if(xmlhttp.readyState==4)
{
if(xmlhttp.responseText==”Login”)
{
//write your code
}
}
}

For the first time it is working fine,but when you try to second time in the same browser(IE6) its not work.

This is becuse Internet Explorer will also cache dynamic pages and this is a problem because the URL of the page may not change but the content will.A workaround for this situation can be achieved by adding a unique time stamp or random number, or possibly both, typically using the Date object and/or Math.random() such as url=url+”&sid=test”+Math.random();.

As for example:

function GetEmailId()
{
var url=”http://server.com/test.aspx&#8221;;
url=url+”&sid=test”+Math.random();
xmlhttp.onreadystatechange=statechangedLogin;
xmlhttp.open(“GET”, url, true);
xmlhttp.send(null);
}

For simple document request the query string delimiter ‘?’ can be used, or for existing queries a final sub-query can be added after a final ‘&’ – to append the unique query term to the existing query. The downside is that each such request will fill up the cache with useless (never reused) content that could otherwise be used for other cached content (more useful data will be purged from cache to make room for these one-time responses).

A better workaround can be achieved by adding meta tags to dynamic pages in order to make them no-cachable:

<meta http-equiv=”Pragma” content=”no-cache” />
<meta http-equiv=”Expires” content=”-1″ />

For more info please visit:
http://en.wikibooks.org/wiki/JavaScript/XMLHttpRequest
http://blogs.msdn.com/ie/archive/2006/01/23/516393.aspx
http://stackoverflow.com/questions/1229821/problem-using-ajax-call-in-ie6-and-ie7-i-am-asking-the-same-question-again-ca