Menu
I am using the update panel in my project. And I am using two button controls inside the panel. I have given postback trigger to that buttons but the progress bar is not working for that button controls. Because of the postback trigger. If I remove the postback trigger it works fine. But I want to add the postback trigger to my button. Can any one help me to solve this problem.
Thanks in advance
618
<script type="text/javascript">
var updateProgress = null;
function postbackButtonClick() {
updateProgress = $find("<%= UpdateProgress1.ClientID %>");
window.setTimeout("updateProgress.set_visible(true)", updateProgress.get_displayAfter());
return true;
}
</script>
<asp:UpdatePanel runat="server">
<Triggers>
<asp:PostBackTrigger ControlID="SyncButton" />
</Triggers>
<ContentTemplate>
<asp:Button runat="server" ID="AsyncButton" Text="Click for Async Postback" OnClick="AsyncButton_OnClick" />
<asp:Button runat="server" ID="SyncButton" Text="Click for Sync Postback" OnClick="SyncButton_OnClick"
OnClientClick="return postbackButtonClick();" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress runat="server" ID="UpdateProgress1">
<ProgressTemplate>
Please wait...
</ProgressTemplate>
</asp:UpdateProgress>
i found this and it works for me. you can change it according to your needs it works for every page postback, and if you want to restrict then change in code for your requirements.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.modalPopup
{
background-color: #696969;
filter: alpha(opacity=40);
opacity: 0.7;
xindex:-1;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
//Raised before processing of an asynchronous postback starts and the postback request is sent to the server.
prm.add_beginRequest(BeginRequestHandler);
// Raised after an asynchronous postback is finished and control has been returned to the browser.
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
//Shows the modal popup - the update progress
var popup = $find('<%= modalPopup.ClientID %>');
if (popup != null) {
popup.show();
}
}
function EndRequestHandler(sender, args) {
//Hide the modal popup - the update progress
var popup = $find('<%= modalPopup.ClientID %>');
if (popup != null) {
popup.hide();
}
}
</script>
<div>
<asp:UpdateProgress ID="UpdateProgress" runat="server">
<ProgressTemplate>
<asp:Image ID="Image1" ImageUrl="loader.gif" AlternateText="Processing" runat="server" />
</ProgressTemplate>
</asp:UpdateProgress>
<ajaxToolkit:ModalPopupExtender ID="modalPopup" runat="server" TargetControlID="UpdateProgress"
PopupControlID="UpdateProgress" BackgroundCssClass="modalPopup" />
<asp:UpdatePanel ID="pnlData" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" onclick="btnSubmit_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
