javascript元素未找到

Question

我在我的應用程序中有一個「導出爲ex​​cel」選項。當我點擊那個按鈕時，我向用戶顯示一條確認消息。當用戶點擊確定時，我正在使用JavaScript調用一個點擊事件。

<asp:Content ID="Content3" ContentPlaceHolderID="PagePlaceholder" runat="Server"> 
<asp:ScriptManager ID="smMainpage" runat="server"> 
</asp:ScriptManager> 
<table style="width: 100%"> 
    <tr> 
     <td colspan="2"> 
      <asp:UpdatePanel runat="server" ID="up"> 
       <ContentTemplate> 
        <div style="text-align: left; font-size: 8pt" id="div5" runat="server"> 
         <table width="100%" cellpadding="0" cellspacing="0"> 
          <tr> 
           <td align="right" style="width: 50%"> 
            <table> 
             <tr> 
              <td style="display: none"> 
               <asp:Button ID="btnblkupdate" runat="server" Text="None" OnClick="btnblkupdate_click" /> 
               <div> 
                <asp:Button ID="btnhdnExport" runat="server" OnClick="btnhdnExport_click" /></div> 
              </td> 
              <td> 
               &nbsp; 
               <asp:LinkButton ID="lnkExport" OnClick="lnkExport_Click" CssClass="customFont" runat="server" 
                Text="Export to Excel"></asp:LinkButton> 
               &nbsp; 
              </td> 
              <td> 
               &nbsp; 
               <asp:LinkButton ID="lnkbtnFilter" OnClick="lnkbtnFilter_Click" CssClass="customFont" 
                runat="server" Text="Filter Data"></asp:LinkButton> 
               &nbsp; 
              </td> 
              <td> 
               <asp:LinkButton ID="lnkReset" OnClick="lnkReset_Click" Visible="false" CssClass="customFont" 
                runat="server" Text="Reset Filter"></asp:LinkButton> 
               &nbsp; 
              </td> 
              <td> 
               <asp:LinkButton ID="lnkbtnViewAll" OnClick="lnkbtnViewAll_Click" runat="server" Text="View All"></asp:LinkButton> 
               &nbsp; Selected Records:<asp:Label ID="lblselTsks" Width="20px" Font-Size="10pt" 
                Font-Bold="true" runat="server" Text="0"></asp:Label> 
               &nbsp; 
              </td> 
              <td> 
               Total Records found:&nbsp;<asp:Label ID="lblTotRecCount" Font-Bold="true" runat="server" 
                ForeColor="Black" Font-Size="10pt" Text="0"></asp:Label> 
              </td> 
             </tr> 
            </table> 
           </td> 
          </tr> 
         </table> 
        </div> 
       </ContentTemplate> 
       <Triggers> 
        <asp:PostBackTrigger ControlID="lnkExport" /> 
        <asp:PostBackTrigger ControlID="btnhdnExport" /> 
       </Triggers> 
      </asp:UpdatePanel> 
      <asp:UpdateProgress ID="UpdateProgress5" EnableViewState="false" AssociatedUpdatePanelID="up" 
       DisplayAfter="10" runat="server"> 
       <ProgressTemplate> 
       </ProgressTemplate> 
      </asp:UpdateProgress> 
     </td> 
    </tr> 
</table> 

protected void lnkExport_Click(object sender, EventArgs e) 
{ 
    DataSet dsResult = new DataSet(); 
    try 
    { 
     string strName = string.Empty; 
     clsSearch_BL clsObj = new clsSearch_BL(); 
     //dsResult = (DataSet)Session["SearchRes"]; 

     if (Session["detObj"] != null) 
     { 
      DetState detObj = (DetState)Session["detObj"]; 
      dsResult = clsObj.getSearchResults_BL(detObj); 
      HashSet<string> orderIdclmtest = new HashSet<string>(); 
      int j = dsResult.Tables[0].Rows.Count; 
      for (int k = 0; k < j; k++) 
      { 
       orderIdclmtest.Add(dsResult.Tables[0].Rows[k][1].ToString()); 
      } 
      Session["orderIdclmtest"] = orderIdclmtest.ToString(); 

      HashSet<string> strtest = new HashSet<string>(); 
      strtest =(HashSet<string>)Session["orderIdclm"]; 

      var testttt=strtest.Except(orderIdclmtest).ToList(); 
      int cnt = testttt.Count; 
      StringBuilder str = new StringBuilder(); 
      for (int i = 0; i < cnt; i++) 
      { 
       if (str.Length == 0) 
        str.Append(testttt[i]); 
       else 
        str.Append(", " + testttt[i]); 
      } 
      ScriptManager.RegisterClientScriptBlock(this.up, this.GetType(), "export", "hdnExportExcel()", true); 
      //if (testttt != null && testttt.Any()) 
      //{ 
      // ScriptManager.RegisterClientScriptBlock(this.up, this.GetType(), "export", "hdnExportExcel('"+str+"')", true); 
      //} 
     } 
    } 
    catch (Exception ex) 
    { 
     log4net.Config.XmlConfigurator.Configure(); 
     log.Warn("Logging:" + ex); 

    } 
    finally { 
     if(dsResult != null) 
     dsResult.Dispose(); 
    } 
} 

function hdnExportExcel() { 
if (confirm('You are about to miss the tasks do you want to continue?')) { 
    document.getElementById('ctl00_PagePlaceholder_btnhdnExport').click(); 
} 
else { 
    return false; 
}} 

我的問題是我得到document.getElementById('ctl00_PagePlaceholder_btnhdnExport')爲空。但在頁面的源中，我可以看到元素ID爲ctl00_PagePlaceholder_btnhdnExport

我不知道爲什麼它不起作用。我猜這是因爲updatepanel中的postbacktrigger。我嘗試將btnhdnExport置於更新面板之外並將其從觸發器選項中刪除。但它沒有奏效。有什麼建議麼？

在此先感謝

Answer 1

正如ANKUR說，你的元素ID是不是表明，JavaScript加載時間訪問（被動態創建的頁面）。

我將建議改變

document.getElementById('ctl00_PagePlaceholder_btnhdnExport')

到

document.getElementById('btnhdnExport')

Answer 2

當UpdatePanel的更新，它取代其容器<div>內的一切。當你的JS代碼被調用時，按鈕字面上不存在。解決這個問題的一個方法是在UpdatePanel完成之後使用.NET的PageRequestManager來調用JS代碼。試試這樣：

function hdnExportExcel() { 

    var prm = Sys.WebForms.PageRequestManager.getInstance(); 
    prm.add_pageLoaded(function() { 

     if (confirm('You are about to miss the tasks do you want to continue?')) { 
      document.getElementById('<%= btnhdnExport.ClientID %>').click(); 
     } 
     else { 
      return false; 
     } 
    } 

} 

你會注意到我也沒有硬編碼按鈕的ID值。您將希望避免對由.NET動態生成的任何id值進行硬編碼，因爲將來您的頁面結構發生更改時它們將發生更改。在頁面上的其他地方做一個不相關的改變並且在測試或後來發現之前的固體功能現在被破壞是沒有意義的。