jquery Masquer/Afficher ne fonctionne pas après la publication partielle de la page

Question

J'avais un formulaire Web avec quelques menus déroulants en cascade et un bouton Soumettre. Cliquez sur le bouton Soumettre, j'obtiens des données de la base de données. Tout le Webform est dans le panneau de mise à jour comprenant le bouton.

Cela étant, j'essaie d'afficher Update Progress dans le formulaire Web. Je suis capable de le faire mais je ne pouvais pas le cacher quand même. Donc, j'ai essayé de mettre Update Update dans un et j'ai essayé de cacher la div en utilisant jquery.

J'ai été un peu réussi à cacher la div pendant le premier chargement. Mais plus tard si j'ai fait quelques sélections dans les listes déroulantes et encore une fois je soumets les données, la progression de mise à jour n'apparaît pas. Je veux dire, lors du premier chargement de la page et de l'événement de clic, la progression de mise à jour s'affiche et se cache. Mais après avoir effectué certaines sélections dans la liste déroulante en cascade, la page serait partiellement postback et la progression de mise à jour ne s'afficherait pas. encore une fois pour la deuxième fois cliquez sur ou d'autres. En dehors du chargement de la nouvelle page, dans les autres scénarios, la publication partielle se produit. Ainsi, la progression de la mise à jour n'apparaît pas pendant les scénarios de publication partielle.

Note: - Le formulaire en ligne est une page de contenu d'une page maître ...

Ici, je posterai le jquery et le Code. S'il vous plaît jeter un oeil et corrigez-moi où je me trompe et s'il vous plaît suggérer les bonnes choses.

<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

Changer votre code jquery comme suit:

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

Ici, nous utilisons la technique event delegation. En raison du panneau de mise à jour; votre ancien html est mis à jour par un plus récent. Par conséquent event listener ci-joint sont éliminés. L'utilisation ci-dessus technique du listener sera jointe à document et va obtenir délégué à #btnSearch si c'est disponible dans les html

Answer 3

Utilisez pageload dans votre JavaScript/JQuery comme celui-ci

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

Answer 4

Vous devez mettre votre code dans endRequest ainsi que vous utilisez UpdatePanel essayez donc ci-dessous le 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>