jquery Hide/Show не работает после частичной обратной передачи страницы

Question

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

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

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

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

Примечание: - веб-форма представляет собой страница содержания мастера-страницу ...

Здесь я проводка 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> 

Answer 1

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

Answer 2

Изменить 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 технику. Из-за панели обновления; ваш старый html обновляется более новым. Следовательно, event listener, прикрепленные ранее, вырываются. Используя выше Технологи listener будет прикреплен к document и получите делегированных #btnSearch, если таковой имеется в html

Answer 3

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

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

Answer 4

Вы должны поместить свой код в 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>