Question

I have a calendar control that is hosted on an iframe. I get a javascript error when I click on a date on the calendar. window.top.document.getElementById(..) is null or not an object

The iframe is hosted on another page ConfigSettings.aspx

The code in the calendar control code behind is:

Dim sjscript As String = "<script language=""javascript"" type=""text/javascript"">"
sjscript &= "window.top.document.getElementById('" & HttpContext.Current.Request.QueryString("DateTextID") & "').value = '" & Calendar1.SelectedDate & "';"
sjscript &= "window.top.document.getElementById('" & HttpContext.Current.Request.QueryString("DateTextID") & "1').style.display = 'none';"
sjscript = sjscript & "</script" & ">"
Literal1.Text = sjscript  

The html code is:

<input type="text" class="TextBox" id="ToDate" runat="server"/>
    <a href="javascript:ShowCalendar('ToDate1')"><img src="images/Calendar.jpg" border="0" /></a>
                    <iframe src="Calendar.aspx?DateTextID=ToDate" style="display:none; width:200px; height:100px" name="ToDate1" id="ToDate1"></iframe>
<asp:Label runat="server" ID="lblEndTime" Text="End Time:"></asp:Label>

What would be causing the error?

Answer 1

You’re calling “getElementById()” but not checking to see if it’s actually found anything. In other words, if no element on the top page has the “id” value you’re looking for, the return value from that function will be null. Your code does not check for that eventuality, however.

edit — to check for null, I’d do something like this:

var dateText = window.top.document.getElementById( ... whatever ... );
if (dateText !== null)
  dateText.value = ... whatever ... ;
else
  alert("cannot find date element");

Another possibility is that “window.top” is not really the right window. If there’s another layer of <iframe> involved, then “window.top” would skip over the parent of the <iframe> in the code you posted. You might try changing it to “window.parent” instead of “window.top” and see if that helps.