2015/03/31

How to Show Process Loader Using Ajax

How to Show Process Loader Using Ajax

Add AjaxControlToolKit

How to Show Process Loader Using Ajax
-------------------------------------

CSS
---------------------------------------
 <style>
        .ModalWindowsmallDUP {
            border: solid 1px #c0c0c0;
            text-transform: capitalize;
            background-color: #fff;
            overflow: hidden;
            width: 460px;
            height: auto;
            border: 1px solid #124191;
        }

        .modalBackground {
            background-color: Gray;
            filter: alpha(opacity=70);
            opacity: 0.7;
        }
    </style>
----------------------------------------
Javascript Script
----------------------------------------
<script type="text/javascript">
        $(document).ready(function () {
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_beginRequest(BeginRequestHandler);//for progress
            prm.add_endRequest(EndRequestHandler);//for progress           
            function BeginRequestHandler(sender, args) {
                //Shows the modal popup - the update progress
                $find("ModalBehaviour").show();
            }
            function EndRequestHandler(sender, args) {
                //for progress
                $find("ModalBehaviour").hide();
            }
        });
        var i = 0;
           function DisableBackButton() {
            window.history.forward()
        }
        DisableBackButton();
        window.onload = DisableBackButton;
        window.onpageshow = function (evt) { if (evt.persisted) DisableBackButton() }
        window.onunload = function () { void (0) }
    </script>

----------------------------------------------
Model PopUp Div
----------------------------------------------
 <div style="text-align: center">
                <cc1:ModalPopupExtender ID="MPopupdup" runat="server" TargetControlID="btnDup" PopupControlID="divdup"
                    DropShadow="false" BackgroundCssClass="modalBackground" BehaviorID="ModalBehaviour">
                </cc1:ModalPopupExtender>
                <asp:Button ID="btnDup" runat="server" Style="display: none;" />
                <div id="divdup" runat="server" class="ModalWindowsmallDUP" style="display: none;left: 617.5px; top: 186.5px; text-transform: none; width: 115px;">
                    <asp:Panel ID="Panel1" runat="server">
                        <table border="0" style="width: 100%">
                            <tr>
                                <td>
                                    <table border="0" style="width: 100%">
                                        <tr>
                                            <td valign="middle" style="text-align: center; font-size: 15px; font-family: Arial">
                                                <img src="images/preLoader.gif" alt="" />
                                            </td>

                                        </tr>

                                    </table>
                                </td>
                            </tr>
                        </table>
                    </asp:Panel>
                </div>
            </div>