jquery Hide/Show not working after partial postback of the page

Question

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">
                            &nbsp;
                        </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">
                            &nbsp;
                        </td>
                        <td class="style67">
                            <asp:Label ID="lblDivision" runat="server" Text="Division"></asp:Label>
                        </td>
                        <td class="style116">
                            &nbsp;
                        </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">
                            &nbsp;
                        </td>
                        <td class="style38">
                            <asp:Label ID="lblRange" runat="server" Text="Range"></asp:Label>
                        </td>
                        <td class="style117">
                            &nbsp;
                        </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">
                            &nbsp;
                        </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">
                            &nbsp;
                        </td>
                        <td class="style67">
                            <asp:Label ID="lblBeat" runat="server" Text="Beat"></asp:Label>
                        </td>
                        <td class="style116">
                            &nbsp;
                        </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">
                            &nbsp;
                        </td>
                        <td class="style38">
                            &nbsp;
                        </td>
                        <td class="style117">
                            &nbsp;
                        </td>
                        <td class="style98">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td class="style68">
                            <asp:Label ID="lblYear" runat="server" Text="Year"></asp:Label>
                        </td>
                        <td class="style115">
                            &nbsp;
                        </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">
                            &nbsp;
                        </td>
                        <td class="style67">
                            &nbsp;
                        </td>
                        <td class="style116">
                            &nbsp;
                        </td>
                        <td class="style110">
                            &nbsp;
                        </td>
                        <td class="style110">
                            &nbsp;
                        </td>
                        <td class="style38">
                            &nbsp;
                        </td>
                        <td class="style117">
                            &nbsp;
                        </td>
                        <td class="style98">
                            &nbsp;
                        </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>

could you try `$(document).on("click",'#btnSearch', function() {` instead of `$('#btnSearch').click(function() {` — vijayP, Nov 03 '15 at 12:08

score 3 · Accepted Answer · answered Dec 16 '15 at 10:30

<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>

score 1 · Answer 2 · answered Nov 03 '15 at 12:20

Change your jquery code as follows:

<script type="text/javascript">
        $(function() {
            setTimeout(function() { $("#Progress").fadeOut(1500); }, 6000)
            $(document).on("click",'#btnSearch', function() {
                $('#Progress').show();
                setTimeout(function() { $("#Progress").fadeOut(1500); }, 6000)
            })
        })
    </script>

Here we are using event delegation technique. Due to update panel; your old html is getting updated by newer one. Hence event listener attached previously are getting wiped out. Using above technique the listener will be attached to document and will get delegated to #btnSearch if that is available within html

Oops !!! Its not working dude !!! Its again the same !!! During the first submission,its showing up the Update Progress and Fading Out. But if I again submit it by clicking the same button,firing the event, the Update Progress is not showing up. Please have a look into the code. One more thing I forgot to mention is that webform is a Content Page of a Master Page. Will that effect the Update Progress in anykind ? — Bhanu Chandra, Nov 04 '15 at 04:09

score 1 · Answer 3 · answered Nov 03 '15 at 13:25

1

Use pageload in your JavaScript/jQuery like this

function pageLoad(sender, args) { 
            setTimeout(function () { $("#Progress").fadeOut(1500); }, 6000)
            $('#btnSearch').click(function() {
                $('#Progress').show();
                setTimeout(function () { $("#Progress").fadeOut(15000); }, 6000)
            })
        }

answered Nov 03 '15 at 13:25

Sid M

4,354
4
30
50

Oops !!! Its not working dude !!! Its again the same !!! During the first submission,its showing up the Update Progress and Fading Out. But if I again submit it by clicking the same button,firing the event, the Update Progress is not showing up. Please have a look into the code. – Bhanu Chandra Nov 04 '15 at 04:09

Purvesh Desai · Answer 4 · 2015-11-06T11:20:52.647

You need to put your code into endRequest as well as you are using UpdatePanel so try below code:

<script type="text/javascript">
    $(function() {
        setTimeout(function() { $("#Progress").fadeOut(1500); }, 6000)
        $('#btnSearch').click(function() {
            $('#Progress').show();
            setTimeout(function() { $("#Progress").fadeOut(1500); }, 6000)
        })
    })

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(function () {
        setTimeout(function() { $("#Progress").fadeOut(1500); }, 6000)
        $('#btnSearch').click(function() {
            $('#Progress').show();
            setTimeout(function() { $("#Progress").fadeOut(1500); }, 6000)
        })
    });
</script>

Well !!! Even this couldn't helped me. After placing this code, the icon is not even fading away, nor working on second/partial page submit. Could you please put the exact code what I have to replace so that I would like to try it again.Thank You. — Bhanu Chandra, Nov 06 '15 at 09:39

jquery Hide/Show not working after partial postback of the page

4 Answers4