CODEWITHSUNDEEP
asp.netjavascriptnullgetelementbyid
Giffyguy
Giffyguy

Reputation: 21282

ASP.NET: Why is my JavaScript object set to null?

I have a <script> that contains this line:

var tbl = document.getElementById("<%= this.tblSelection.ClientID %>");

... but tbl always ends up being set to null.

The table is declared like this:

<asp:Table ID="tblSelection" runat="server" CellPadding="2" CellSpacing="0"
    cols="1" style="position: absolute; top: 0%; right: 0%">

Both the script and the table are in the same master page file.

What could be causing this?

EDIT: I should mention that this script is executed on onload

Upvotes: 0

Views: 452

Answers (3)

Valera Kolupaev
Valera Kolupaev

Reputation: 2315

Nick is correct. The table is not parsed/constructed yet. Try to move getElementById code to document.ready event. BTW, jQuery provides a nice wrapper around document events and more.

Here is code snippet:

$(document).ready(function() {
    $get('table-id').doManipulation();
});

Upvotes: 1

n8wrl
n8wrl

Reputation: 19765

MrGumbe and Valera are right about the timing of your Javascript. But I've seen this happen for another reason. We have had instances where server-side logic set tblSelection.Visible=false which means it isn't even emitted to the browser. Client-side code like yours runs looking for the ID and bang.

Upvotes: 1

cortijon
cortijon

Reputation: 983

I am guessing your JavaScript code is executing before your browser has a chance to fully render the table. At this point, the DOM of the page will not be complete and the getElementByID function will not be able to find the table because it doesn't exist yet!

Do this experiment:

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

<script language="javascript">

    function showTable() {

        var tbl = document.getElementById("<%= this.tblSelection.ClientID %>");

        alert(tbl);
    }

    showTable();

</script>

This will show you "null" when your page first loads. If you add a button to call this method again, however, you'll see that tbl gets populated.

<input type="button" value="CheckTable" onclick="showTable();" />

Upvotes: 3

Related Questions