add

Friday, 25 October 2013

loading image on button click in asp.net using c#,javascript

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function ShowProgress() {
            setTimeout(function () {
                var modal = $('<div />');
                modal.addClass("modal");
                $('body').append(modal);
                var loading = $(".loading");
                loading.show();
                var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
                var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
                loading.css({ top: top, left: left });
            }, 200);
        }
        $('form').live("submit", function () {
            ShowProgress();
        });
        
</script>

    .modal
    {
        position: fixed;
        top: 0;
        left: 0;
        background-color: black;
        z-index: 99;
        opacity: 0.8;
        filter: alpha(opacity=80);
        -moz-opacity: 0.8;
        min-height: 100%;
        width: 100%;
    }
    .loading
    {
        font-family: Arial;
        font-size: 10pt;
        border: 5px solid #67CFF5;
        width: 200px;
        height: 100px;
        display: none;
        position: fixed;
        background-color: White;
        z-index: 999;
    }
</style>



<asp:Button ID="btn1" runat="server" Text="sample" onclick="btn1_Click" />
    <div style='width:680px; height:332px;  margin-left:80px; overflow:auto; margin-top:5px;'>
       <dx:ASPxGridView ID="ASPxGridView1" runat="server" Width="627px">
         </dx:ASPxGridView>
            <asp:Button ID="btnsample" runat="server" Text="Load Grid"
            onclick="btnsample_Click" />
           </div>
           </div>
           <div>
    <%-- <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>--%>

             <div class="loading" align="center">
    Loading. Please wait.<br />
    <br />
    <img src="Images/preload.gif" alt="" />
</div>

load the data in button click event


and also we can do this same as in dropdown selection also for dropdown call the javascript function on dropdown onchange event

1 comment:

  1. Hi, this is very nice, but I tested on IE and doesn't work. on FF work's fine,
    How can I modify this to work well with IE?

    thks...

    ReplyDelete