"If at first you don't succeed; call it version 1.0" :-Unknown

Pages

Tuesday, October 5, 2010

display wait message on server controlled event and on page load also

Last day one asked a question on http://forums.asp.net/ . He need to show a wait message on page load and same message on some server control rendering like Selectedindexchanged in drop-down and  text-changed in textbox.I liked that question because i had done both but using different type message ( for page load normal div show \hide, server control rendering ajax update progress  ). he need a Unique solution. Later I changed that Div a little bit and find the solution for that.

Here It is. on Html


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">


function hideLoading() {
    document.getElementById('pageIsLoading').style.display = 'none'; // DOM3 (IE5, NS6) only
}
function ShowLoading() {
    document.getElementById('pageIsLoading').style.display = 'Block'; // DOM3 (IE5, NS6) only
}

</script>
</head>
<body>
<body onload="hideLoading()">

    <form id="form1" runat="server">
    <div id="pageIsLoading" runat="server" style="position: absolute; display: block; padding-left: 50px; padding-right: 12px; width: auto; height: 65px; line-height: 40px; border: 1px solid #CCCCCC; color: #000000; font-weight: bold; font-family: verdana; font-size: 12px; background-color: #ffffff; background-image: url(http://localhost:8080/images/bannerz.jpg); background-position: 100px center; background-repeat: no-repeat;">
    <script type="text/javascript">
        var window_width;
        var window_height;
        if (typeof (window.innerWidth) == 'number') {
            window_width = window.innerWidth;
            window_height = window.innerHeight;
        } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
            window_width = document.documentElement.clientWidth;
            window_height = document.documentElement.clientHeight;
        } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
            window_width = document.body.clientWidth;
            window_height = document.body.clientHeight;
        }
        var left = Math.round((window_width - 240) / 2);
        var top = Math.round(((window_height - 130) / 3) + 30);
        document.getElementById('pageIsLoading').style.left = left + 'px';
        document.getElementById('pageIsLoading').style.top = top + 'px';
    </script><p><p><p><p>
    Loading <strong class="highlight">page</strong>..Please <strong class="highlight">wait</strong>...<img src="images/ajax-loader.gif" alt="" title="Loading..." />
</div>
    <div>
    <asp:TextBox ID="txt" Text="1232" runat="server" AutoPostBack="true" ontextchanged="txt_TextChanged" ></asp:TextBox>
    </div>
    </form>
</body>
</html>


on server side



using System.Web.UI.WebControls;
using System.Data;
using System.IO;
using System.Threading;
using System.Diagnostics;

public partial class loading : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Thread.Sleep(10000);
        }
    }
    protected void txt_TextChanged(object sender, EventArgs e)
    {
        pageIsLoading.Style["Display"] = "Block";
        Thread.Sleep(10000);
    }
}


Hope it help u someways
Have a nice day... 'N happy Coding :)

No comments: