2012-08-04 89 views
0

我需要在ASP.NET上执行一个JavaScript函数,但我遇到了一个我似乎无法修复的错误...在Javascript document.getElementById('name')上获取错误。返回NULL

我有一个alreay尝试了一个小例子,它可以工作... 这里是......

aspx文件

<title>Untitled Page</title> 
<script type="text/javascript" language="javascript"> 
    function ExecuteConfirm() { 
    debugger 
     var returnValue = confirm('Do you want to proceed further?'); 
     if (returnValue) { 
      document.getElementById('hdnExecuteAfterConfirm').value = "1"; 
      document.getElementById('btnClickMe').click(); 
     } 


    } 
</script> 


<body> 
<form id="form1" runat="server"> 
<asp:Label runat="server" ID="lblMessage"> 
</asp:Label> 

<div> 
    <asp:Button ID="btnClickMe" runat="server" Text="Click me" 
     onclick="btnClickMe_Click" /> 
</div> 
<asp:HiddenField runat="server" ID="hdnExecuteAfterConfirm" /> 
</form> 
</body> 

CS文件

protected void btnClickMe_Click(object sender, EventArgs e) 
    { 
     //Do server side processing before confirmation 
     if (hdnExecuteAfterConfirm.Value != "1") 
     { 
      lblMessage.Text = "You clicked the button"; 
      ClientScript.RegisterStartupScript(this.Page.GetType(), btnClickMe.ID, "ExecuteConfirm()", true); 

     } 
     //Do server side processing after confirmation 
     else 
     { 
      //Proceed further with server side processing 

      //Reset the value of hidden field 
      hdnExecuteAfterConfirm.Value = ""; 
      //Notify the user that processing is complete. 
      ClientScript.RegisterStartupScript(this.Page.GetType(), btnClickMe.ID, "alert('Processing is complete.')", true); 
     } 
    } 

这里的目标是显交流onfirm消息,第一次点击按钮(如果),并且一旦你在确认消息上点击YES,它将重复按钮功能,但是,它会做一些不同的事情(其他)...

我是试图重新在我的项目这个功能,但我遇到了错误...

这里就是我有...

注意,我不是在复制我的整个项目,这些都只是部分是我必须改变...

Site.Master

<script type="text/javascript" language="javascript"> 
     function ConfirmarRegistroFecha(strAdvertencia) { 
      debugger 
      var returnValue = strAdvertencia; 

      if (returnValue) { 
       try{ 
       document.getElementById('hdnExecuteAfterConfirm').value = "1"; 
       document.getElementById('btnGuardarEvento').click(); 
       } 

       catch(error){ 
        alert(error); 
       } 
      } 
     } 
    </script> 

Agenda.aspx(我知道这很重要,但是,我全部都是复制它,因为可能错误就在这里。问题的关键是,至少,里面是一个HiddenField,和一个按钮)

<asp:View ID="ViewOperacionesAgenda2" runat="server"> 
      <asp:HiddenField runat="server" ID="hdnExecuteAfterConfirm" /> 
      <br /> 

      <asp:Panel ID="pnlRegistrarEvento" runat="server" DefaultButton="btnGuardarEvento"> 
       <table> 
        <tr> 
         <td align="left"> 
          Seleccione Vendedor: 
          <br /> 

          <asp:DropDownList ID="dpdLstVendedoresAgenda" runat="server" Width="150px"> 
          </asp:DropDownList> 
         </td> 

         <td align="left" rowspan="3"> 
          Descripcion: 
          <br /> 

          <asp:TextBox ID="tbxAlAgendaDescripcion" runat="server" Height="150px" TextMode="MultiLine" ValidationGroup="gpAgendaAlta" Width="150px"> 
          </asp:TextBox> 
         </td> 

         <td align="left" rowspan="3"> 
          Fecha: 
          <br /> 

          <asp:Calendar ID="Calendar1" runat="server" BackColor="White" 
           BorderColor="#3366CC" BorderWidth="1px" CellPadding="1" 
           DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="7pt" 
           ForeColor="#003399" Height="150px" Width="150px"> 
           <DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" /> 
           <NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" /> 
           <OtherMonthDayStyle ForeColor="#999999" /> 
           <SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" /> 
           <SelectorStyle BackColor="#99CCCC" ForeColor="#336666" /> 
           <TitleStyle BackColor="#003399" BorderColor="#3366CC" BorderWidth="1px" Font-Bold="True" Font-Size="10pt" ForeColor="#CCCCFF" Height="25px" /> 
           <TodayDayStyle BackColor="#99CCCC" ForeColor="White" /> 
           <WeekendDayStyle BackColor="#CCCCFF" /> 
          </asp:Calendar> 
         </td> 

         <td rowspan="3"> 
          <table> 
           <tr> 
            <td align="left"> 
             Hora Inicio: 
             <br /> 

             <asp:TextBox ID="tbxAlAgendaHoraInicio" runat="server" ValidationGroup="gpAgendaAlta" Width="130px">0:00 am</asp:TextBox> 

             <br /> 

             <asp:RegularExpressionValidator ID="RegularExpressionValidator3" runat="server" 
              ControlToValidate="tbxAlAgendaHoraInicio" 
              ErrorMessage="Hora Invalida: use 00:00 pm" 
              ValidationExpression="^((0?[1-9]|1[012])(:[0-5]\d)((\)?[ap](.)?m(.)?))" 
              ValidationGroup="vgpRegistrarEvento" Font-Bold="True" ForeColor="Red"> 
             </asp:RegularExpressionValidator> 

             <br /> 

             <asp:RequiredFieldValidator ID="RequiredFieldValidator8" runat="server" 
              ControlToValidate="tbxAlAgendaHoraInicio" ErrorMessage="Campo Requerido" 
              ValidationGroup="vgpRegistrarEvento" Font-Bold="True" ForeColor="Red"> 
             </asp:RequiredFieldValidator> 
            </td> 
           </tr> 

           <tr> 
            <td align="left"> 
             Hora Final: 
             <br/> 

             <asp:TextBox ID="tbxAlAgendaHoraFinal" runat="server" ValidationGroup="gpAgendaAlta" Width="130px">0:00 am</asp:TextBox> 

             <br /> 

             <asp:RegularExpressionValidator ID="RegularExpressionValidator4" runat="server" 
              ControlToValidate="tbxAlAgendaHoraFinal" 
              ErrorMessage="Hora Invalida: use 00:00 pm" 
              ValidationExpression="^((0?[1-9]|1[012])(:[0-5]\d)((\)?[ap](.)?m(.)?))" 
              ValidationGroup="vgpRegistrarEvento" Font-Bold="True" ForeColor="Red"> 
             </asp:RegularExpressionValidator> 

             <br /> 

             <asp:RequiredFieldValidator ID="RequiredFieldValidator9" runat="server" 
              ControlToValidate="tbxAlAgendaHoraFinal" ErrorMessage="Campo Requerido" 
              ValidationGroup="vgpRegistrarEvento" Font-Bold="True" ForeColor="Red"> 
             </asp:RequiredFieldValidator> 
            </td> 
           </tr> 
          </table> 
         </td> 
        </tr> 

        <tr> 
         <td align="left"> 
          Seleccione Cliente: 
          <br /> 

          <asp:DropDownList ID="dpdLstClientesAgenda" runat="server" AutoPostBack="True" onselectedindexchanged="dpdLstClientesAgenda_SelectedIndexChanged" Width="150px"> 
          </asp:DropDownList> 
         </td> 
        </tr> 

        <tr> 
         <td align="left"> 
          Tipo: 
          <br /> 

          <asp:DropDownList ID="dpdLstAlAgendaTipo" runat="server" Width="150px"> 
           <asp:ListItem>Reunion</asp:ListItem> 
           <asp:ListItem>Entrevista</asp:ListItem> 
           <asp:ListItem>Venta</asp:ListItem> 
           <asp:ListItem>Soporte</asp:ListItem> 
           <asp:ListItem>Instalacion</asp:ListItem> 
          </asp:DropDownList> 
         </td> 
        </tr> 
       </table> 

       <br /> 
       <asp:Button ID="btnCancelarEvento" runat="server" CausesValidation="False" onclick="btnCancelarEvento_Click" Text="Cancelar" Width="90px" /> 
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
       <asp:Button ID="btnGuardarEvento" runat="server" onclick="btnGuardarEvento_Click" Text="Guardar" ValidationGroup="vgpRegistrarEvento" Width="90px" /> 
      </asp:Panel> 

Agenda.aspx.cs

protected void btnGuardarEvento_Click(object sender, EventArgs e) 
    { 

      if (hdnExecuteAfterConfirm.Value != "1") 
      { 
       strAdvertencia = "MESSAGE I WANT TO DISPLAY"; 
       ClientScript.RegisterStartupScript(this.Page.GetType(), btnGuardarEvento.ID, "ConfirmarRegistroFecha(" + strAdvertencia + ")", true); 

      } 

      else 
      { 
       hdnExecuteAfterConfirm.Value = ""; 
       //Rest of process 
      } 
    } 

使用Firebug的调试器,我可以清楚地看到, Site.Master,当它达到..

document.getElementById('hdnExecuteAfterConfirm').value = "1"; 

它显示以下例外:

TypeError: document.getElementById("hdnExecuteAfterConfirm") is null 

我已经试图复制上Agenda.aspx代替的Site.Master的JavaScript ...它仍然无法正常工作......

有谁知道这里的错误是。 .. 我是新来的JavaScript,所以我仍然相信这是一个语法错误...提前

谢谢,我希望你能帮助我

+2

您能否创建一个能够重现您问题的最小示例? – micha 2012-08-04 18:01:35

+0

非常大的问题!谁可以阅读这些? – hmmftg 2012-08-04 18:10:44

+1

您确定JavaScript中生成的元素没有用主页面前缀/后缀装饰吗? ASP.NET有一种创建相当详细的客户端ID的方法 - 我会说你的JS注释掉,然后检查ASPX生成的DOM。 – 2012-08-04 18:16:42

回答

1

使用该脚本:

document.getElementById('<%= hdnExecuteAfterConfirm.ClientID %>').value = "1"; 
document.getElementById('<%= btnGuardarEvento.ClientID %>').click(); 

当您使用母版页的hdnExecuteAfterConfirm客户端ID不一样的服务器ID。

1

的问题是,因为控制嵌入在容器控件中,其ID在客户端被修改。

我不确定Firefox中是什么,但在Internet Explorer(v9,至少)中,您可以按F12打开开发人员工具并浏览DOM结构以找出实际名称。

解决此问题的方法有很多种,包括硬编码完整ID(这是一种脆弱的解决方案),或者更新web.config以使用它们提供的ID,这可能会导致冲突的ID。

我们解决这个问题的方法是在使用客户端ID的代码中创建一个JavaScript变量。这样,如果控件移动到不同的容器控件或重命名,则不必调整代码来解决此问题。

为此,我们使用Page.ClientScript.PageClient.RegisterStartupScript。例如:

this.ClientScript.RegisterStartupScript(this.GetType(), "LocalVars", "var m_hdnExecuteAfterConfirmId = '" + hdnExecuteAfterConfirm.ClientID + "';" + Environment.NewLine, true); 

然后改变的JavaScript是:

document.getElementById('m_hdnExecuteAfterConfirmId').value = "1"; 
相关问题