I had a webform with some cascading dropdowns and a Submit Button. On Click of the Submit Button, I am getting data from database.The Whole webform is in update panel including Button.
Thing is that, I am trying to show Update Progress in the webform. I am able to do it but could not hide it anyway. So, I tried to put that Update Progress in a and tried to hide the div using jquery.
I was bit successful in hiding the div during the first load.But later if I made some selections in the dropdowns and again I submit the data, the Update Progress is not showing up. I mean,initially during the first time loading of the page and click event,the Update Progress is showing up and hide out.But after making some selections in Cascading dropdown,the page would be partially postback,and the Update Progress is not showing up again for the second time click or others.
As apart from fresh load of page,in the other scenarios partial postback happens.So the Update Progress is not showing up during Partial Postback Scenarios.
Note:- The webform is a content page of a master page...
Here I am posting the jquery and the Code. Please have a look and correct me where I am doing wrong and please suggest the right things.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function() {
setTimeout(function() { $("#Progress").fadeOut(1500); }, 6000)
$('#btnSearch').click(function() {
$('#Progress').show();
setTimeout(function() { $("#Progress").fadeOut(1500); }, 6000)
})
})
</script>
<asp:UpdatePanel ID="updatepanel1" runat="server">
<ContentTemplate>
<h2 style="text-decoration: underline; font-family: 'Courier New'; text-align: center;"
align="center">
Plantation KML File</h2>
<asp:Panel ID="pnlloc" runat="server" BorderColor="#365672" BorderStyle="Double"
Height="150px" HorizontalAlign="Center" BackColor="LightSteelBlue" Width="85%">
<br />
<table align="center" class="style1" style="height: 116px; width: 94%">
<tr>
<td class="style68">
<asp:Label ID="lblCircle" runat="server" Text="Circle"></asp:Label>
</td>
<td class="style115">
</td>
<td class="style23">
<asp:DropDownList ID="ddCircle" runat="server" Width="150px">
</asp:DropDownList>
<asp:CascadingDropDown ID="ddCircle_CascadingDropDown" runat="server" BehaviorID="circleajax"
Category="Circle" Enabled="True" LoadingText="Loading Circles" PromptText="Select a Circle"
ServiceMethod="GetWLTRSFCircles" ServicePath="~/Common/WebService/GetMasters.asmx"
TargetControlID="ddCircle">
</asp:CascadingDropDown>
</td>
<td class="style23">
</td>
<td class="style67">
<asp:Label ID="lblDivision" runat="server" Text="Division"></asp:Label>
</td>
<td class="style116">
</td>
<td class="style110">
<asp:DropDownList ID="ddDivision" runat="server" Width="150px">
</asp:DropDownList>
<asp:CascadingDropDown ID="ddDivision_CascadingDropDown" runat="server" BehaviorID="divisionajax"
Category="Division" Enabled="True" LoadingText="Loading Divisions" ParentControlID="ddCircle"
PromptText="Select a Division" ServiceMethod="GetDivision" ServicePath="~/Common/WebService/GetMasters.asmx"
TargetControlID="ddDivision">
</asp:CascadingDropDown>
</td>
<td class="style110">
</td>
<td class="style38">
<asp:Label ID="lblRange" runat="server" Text="Range"></asp:Label>
</td>
<td class="style117">
</td>
<td class="style98">
<asp:DropDownList ID="ddRange" runat="server" Width="150px">
</asp:DropDownList>
<asp:CascadingDropDown ID="ddRange_CascadingDropDown" runat="server" BehaviorID="rangeajax"
Category="Range" Enabled="True" LoadingText="Loading Range " ParentControlID="ddDivision"
PromptText="Select a Range" ServiceMethod="GetRange" ServicePath="~/Common/WebService/GetMasters.asmx"
TargetControlID="ddRange">
</asp:CascadingDropDown>
</td>
</tr>
<tr>
<td class="style68">
<asp:Label ID="lblSection" runat="server" Text="Section"></asp:Label>
</td>
<td class="style115">
</td>
<td class="style23">
<asp:DropDownList ID="ddSection" runat="server" Width="150px">
</asp:DropDownList>
<asp:CascadingDropDown ID="ddSection_CascadingDropDown" runat="server" Category="Section"
Enabled="True" LoadingText="Loading Sections" ParentControlID="ddRange" PromptText="Select Section"
ServiceMethod="GetSection" ServicePath="~/Common/WebService/GetMasters.asmx"
TargetControlID="ddSection">
</asp:CascadingDropDown>
</td>
<td class="style23">
</td>
<td class="style67">
<asp:Label ID="lblBeat" runat="server" Text="Beat"></asp:Label>
</td>
<td class="style116">
</td>
<td class="style110">
<asp:DropDownList ID="ddBeat" runat="server" Width="150px">
</asp:DropDownList>
<asp:CascadingDropDown ID="ddBeat_CascadingDropDown" runat="server" Category="Beat"
Enabled="True" LoadingText="Loading Beats" ParentControlID="ddSection" PromptText="Select Beat"
ServiceMethod="GetBeat" ServicePath="~/Common/WebService/GetMasters.asmx" TargetControlID="ddBeat">
</asp:CascadingDropDown>
</td>
<td class="style110">
</td>
<td class="style38">
</td>
<td class="style117">
</td>
<td class="style98">
</td>
</tr>
<tr>
<td class="style68">
<asp:Label ID="lblYear" runat="server" Text="Year"></asp:Label>
</td>
<td class="style115">
</td>
<td class="style23">
<asp:DropDownList ID="ddPlntYear" runat="server" Width="150px">
<asp:ListItem Value="0">Select Year</asp:ListItem>
<asp:ListItem>2015</asp:ListItem>
</asp:DropDownList>
</td>
<td class="style23">
</td>
<td class="style67">
</td>
<td class="style116">
</td>
<td class="style110">
</td>
<td class="style110">
</td>
<td class="style38">
</td>
<td class="style117">
</td>
<td class="style98">
</td>
</tr>
</table>
<br />
</asp:Panel>
<br />
<div align="center">
<asp:Button ID="btnSearch" runat="server" Height="32px" Text="Download" Width="106px"
BackColor="#365672" BorderStyle="Solid" BorderWidth="1px" Font-Bold="True" Font-Italic="True"
ForeColor="White" OnClick="btnSearch_Click1" />
</div>
<br />
<asp:Label ID="lblMsg" runat="server"></asp:Label>
<br />
</ContentTemplate>
</asp:UpdatePanel>
<div id="Progress">
<asp:UpdateProgress runat="server" ID="PageUpdateProgress" AssociatedUpdatePanelID="updatepanel1"
DisplayAfter="3" DynamicLayout="False">
<ProgressTemplate>
<img alt="Generating KML File" src="Images/progressbar.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
</div>
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
function InitializeRequest(sender, args) {
var updateProgress = $get('UpdateProgress1');
var postBackElement = args.get_postBackElement();
if (postBackElement.id == '<%= Button1.ClientID %>') {
updateProgress.control._associatedUpdatePanelId = 'dummyId';
}
else{
updateProgress.control._associatedUpdatePanelId = null;
}
}
</script>