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>
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>
Comments
Post a Comment