jquery Скрыть / Показать не работает после частичной обратной передачи страницы

Question

jquery Скрыть / Показать не работает после частичной обратной передачи страницы

У меня была веб-форма с несколькими каскадными выпадающими списками и кнопкой "Отправить". При нажатии кнопки "Отправить" я получаю данные из базы данных. Вся веб-форма находится на панели обновления, включая кнопку.

Дело в том, что я пытаюсь показать прогресс обновления в веб-форме. Я могу это сделать, но все равно не могу это скрыть. Итак, я попытался поместить этот Progress Update в a и попытался скрыть div, используя jquery.

Я был немного успешен в сокрытии div во время первой загрузки. Но позже, если я сделал некоторые выборы в выпадающих списках и снова отправляю данные, процесс обновления не отображается. Я имею в виду, что изначально при первой загрузке страницы и событии щелчка процесс обновления отображается и скрывается. Но после выбора в раскрывающемся списке "Каскадирование" страница будет частично возвращена, а процесс обновления не отображается. снова во второй раз нажмите или другие.

Помимо новой загрузки страницы, в других сценариях происходит частичная обратная передача. Так что процесс обновления не отображается во время сценариев частичной обратной передачи.

Примечание. - Веб-форма - это страница содержимого главной страницы...

Здесь я публикую jquery и кодекс. Пожалуйста, посмотрите и исправьте меня, где я делаю неправильно, и, пожалуйста, предложите правильные вещи.

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

4

jquery updateprogress partial-postback

Источник

user5515352 03 ноя '15 в 11:35

4 ответа

Решение

Измени свой jquery код следующим образом:

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

Здесь мы используем event delegation техника. Due to update panel; your old html is getting updated by newer one. следовательно event listener attached previously are getting wiped out. Using above technique the listener будет прикреплен к document and will get delegated to #btnSearch if that is available within html

1

Источник

user1321167 03 ноя '15 в 12:20

Использование pageload в вашем JavaScript/ JQuery, как это

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

1

Источник

user2354564 03 ноя '15 в 13:25

Вы должны поместить свой код в endRequest так же, как вы используете UpdatePanel так что попробуйте следующий код:

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

1

Источник

user1508228 05 ноя '15 в 05:43

Другие вопросы по тегам jquery updateprogress partial-postback

16 дек '15 в 10:30 2015-12-16 10:30 · Accepted Answer · 2015-12-16 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>