2015-11-03 66 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

是的!!!現在它爲我工作.. –