2015-11-03 67 views
3

我有一个带有一些级联下拉菜单和提交按钮的web窗体。在点击提交按钮时,我从数据库获取数据。整个webform在包含按钮的更新面板中。jquery在页面部分回发后隐藏/显示不工作

事情是,我试图在网络表单中显示更新进度。我能够做到,但无论如何都无法隐瞒它。所以,我试图把这个更新进程放在一个,并尝试使用jquery隐藏div。

我在第一次加载时隐藏div有点成功。但后来如果我在下拉菜单中做了一些选择,并再次提交数据,则更新进度不会显示。我的意思是,在第一次加载页面和单击事件时,更新进度显示并隐藏。但是,在Cascading下拉列表中进行了一些选择后,该页面将部分回发,并且更新进度未显示出来再次点击或其他。

由于除了新鲜的页面加载,在其他情况下会发生部分回发。因此,在部分回发方案期间没有显示更新进度。

注: - WebForm的是母版页的内容页...

我在这里张贴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> 
+0

可以试试'$(document).on(“click”,'#btnSearch',function(){'而不是'$('#btnSearch')。click(function(){' – vijayP

回答

2
<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> 
+0

是的!这就是我期待的!像魔术一样工作! –

1

如下更改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

+0

糟糕!它不工作的家伙!它再次相同!在第一次提交时,它显示更新进度和淡出。但是如果我再次通过点击相同的按钮来提交它,发起事件,更新进度没有显示出来。请查看代码。我忘了提及的另一件事是webform是主页的内容页面。这会影响anykind的更新进度吗? –

1

,可以用pageload在你的JavaScript/jQuery的这样

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

糟糕!它不工作的家伙!它再次相同!在第一次提交时,它显示更新进度和淡出。但是如果我再次通过点击相同的按钮来提交它,发起事件,更新进度没有显示出来。请查看代码。 –

1

你需要把你的代码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> 
+0

好吧!即使这不能帮助我。放置此代码后,图标甚至不会消失,也不会处理二次/部分页面提交。请你把确切的代码放在我必须替换的位置,以便我再次尝试。谢谢。 –

+1

编辑我的回答 –

+0

是的!!!现在它为我工作.. –