getElementById referencing Null (called from Javascript)

Question

I have Javascript code written in an iframe, that is modifying the value of a hiddenfield in a contentplaceholder in parent window, and also firing a click event of a button, and setting the visibility of an iframe. They all are referenced erroneously.

Javascript in iframe:

 <script type="text/javascript">
      function ChangeView(obj) {

          parent.document.getElementById("HiddenField1").value = $(obj).attr('id');
          parent.document.getElementById("Button1").click();
          var iframe = parent.document.getElementById("newsFrame");
          iframe.style.display = "block";

      }

    </script>
</head>
<body>


 <form id="f">
    <nav>
      <ul id="nav">
        <li><a id="aHome"  href="#" onclick="ChangeView(this)" >Home</a></li>   
        <li><a href="#">About</a>
          <ul>
            <li><a id="aMessage" href="#" onclick="ChangeView(this)">Message</a></li>

          </ul>
        </li>
      </ul>
    </nav>
 </form>
</body>

Parent page:

<asp:Content ID="Content3"  ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
   <html xmlns="http://www.w3.org/1999/xhtml" > 

<head>
    <title> </title>
<script runat="server">

    Sub ChangeView()
        Dim t As HiddenField
        ' Dim mc As Control = FindControl("Label1")
        t = FindControl("HiddenField1")
        Dim m As MultiView
        m = FindControl("Multiview1")

        If (t.Value = "aHome") Then
            m.ActiveViewIndex = 0

        End If
        If (t.Value = "aMessage") Then
            m.ActiveViewIndex = 1
        End If

    End Sub

   </script>

</head>

<body>
   <form id="form1" runat="server">

   <asp:Button ID="Button1" runat="server"  Visible="True" OnClick="ChangeView"  />

       <asp:ScriptManager ID="SM1" runat="server" />

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
        <asp:HiddenField ID="HiddenField2"  runat="server"  />
         <asp:MultiView ID="MultiView2" runat="server" ActiveViewIndex="0">
            <asp:View ID="View8" runat="server">
                This is HOME 
            </asp:View>
            <asp:View ID="View9" runat="server">
                This is DEPARTMENT MESSAGE 
            </asp:View>

        </asp:MultiView>
        <br /><br />


        </ContentTemplate>
    </asp:UpdatePanel>
   </form>

</body>
</html>
                <iframe src="dept-menu/index.html" width="100%" height="650px" scrolling="no" frameborder="0"></iframe>

                    <iframe id="newsFrame" src="dept-news/news.html" width="100%" height="300px" scrolling="no" frameborder="0"></iframe>



</asp:Content>

HTML

 <input type="submit" name="ctl00$ContentPlaceHolder2$Button1" value="" id="Button1" />


       <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ContentPlaceHolder2$SM1', 'form1', ['tctl00$ContentPlaceHolder2$UpdatePanel1','ContentPlaceHolder2_UpdatePanel1'], [], [], 90, 'ctl00');
//]]>
</script>



<div id="ContentPlaceHolder2_UpdatePanel1">

        <input type="hidden" name="ctl00$ContentPlaceHolder2$HiddenField1" id="HiddenField1" />

                This is HOME 

        <br /><br />



</div>

At runtime the error says that they can't set the value of a null reference. What am I doing wrong? Thanks in advance.

P.S. the iframe is called from the contentplaceholder.

Why are you showing JavaScript+ASP.NET when it is a JavaScript+HTML problem? Show the HTML. — Quentin, Aug 18 '14 at 09:58
@Quentin I'm quite a novice, but I think the ASP.NET can't have an HTML declaration because there is one in its Masterpage. I guess I haven't grasped the whole HTML/ASP.NET integration concept yet — Nal, Aug 18 '14 at 10:03
— What does that have to do with anything? Show us the HTML you send to the browser, not the ASP that you use to generate it. — Quentin, Aug 18 '14 at 10:05
The HTML is in the iframe if I understand correctly. Otherwise would you mind elaborating as I'm getting confused at my own code. — Nal, Aug 18 '14 at 10:39
You have two HTML documents. The first one contains some JavaScript that tries to access the parent page. The second one is the parent page. You haven't shown us the HTML for the second one, just the ASP. — Quentin, Aug 18 '14 at 10:42
@Quentin I changed the code, apparently I hadn't understood html and masterpages well. Could you please review it? Thanks — Nal, Aug 19 '14 at 07:13
in browser use F12 debugger and look in console tab for errors. maybe this will give you a hint — lordkain, Aug 19 '14 at 07:14
@Nal — Open the page in the browser. View source. There is your HTML. We need to see it. — Quentin, Aug 19 '14 at 08:14
@Quentin I salute your patience! There is it, what am I doing wrong? — Nal, Aug 19 '14 at 08:29

score 1 · Accepted Answer · answered Aug 19 '14 at 08:39

1

Simply added

      parent.document.getElementById("ContentPlaceHolder2_HiddenField1").value = $(obj).attr('id');

instead of

      parent.document.getElementById("HiddenField1").value = $(obj).attr('id');

answered Aug 19 '14 at 08:39

Nal

121
2
15

getElementById referencing Null (called from Javascript)

1 Answers1