Unable to select table id in javascript

Question

Possible Duplicate:
Why does jQuery or a DOM method such as `getElementByID` not find the element?

Apologize for the silly question, but I am not getting what I want. I am using following code to change visibility of table.

<script type="text/javascript"> 
   document.getElementById('<%= tblEnablePreferredZerker.ClientID %>').style.display = "none";
</script>
<table class="style1" id="tblEnablePreferredZerker" >
   <tr></tr>
</table>

Is there any mistake? or any other method to do this? Or can it be easily possible with jQuery? Thanks,

@ryadavilli: Still error occuring. "The name 'tblEnablePreferredZerker' does not exist in the current context" — Diboliya, Dec 25 '12 at 09:44

Adil · Accepted Answer · 2012-12-25T10:33:49.340

You are trying to access this id of table with ClientID which is not server accessible, You need to add runat="server" in table tag.

<table class="style1" id="tblEnablePreferredZerker" runat="server">
   <tr></tr>
</table>

You are trying to access the element that is not yet available. Put your script just after the table you are try to access or before the closing body tag so that you have every html element ready before use. You can also use document.ready jquery event if you want to place before your html element.

Putting script below the element you want to access.

<table class="style1" id="tblEnablePreferredZerker" >
   <tr></tr>
</table>

<script type="text/javascript"> 
   document.getElementById('<%= tblEnablePreferredZerker.ClientID %>').style.display = "none";
</script>

Putting script just before closing of body tag

<!-- your thml -->

<script type="text/javascript"> 
   document.getElementById('<%= tblEnablePreferredZerker.ClientID %>').style.display = "none";
</script>
</body>

Using jQuery document.ready

<script type="text/javascript"> 
  $(document).ready(function() {
      document.getElementById('<%= tblEnablePreferredZerker.ClientID %>').style.display =  "none";
   });       
</script>

Use document.ready, I have updated my answer, see last section. — Adil, Dec 25 '12 at 09:48
Your table in not server accessible as you do not have runat="server" add this attribute and check it again. — Adil, Dec 25 '12 at 09:57

score 1 · Answer 2 · answered Dec 25 '12 at 07:58

1

Enclose your script in $(document).ready() because the element doesn't exist when the script runs. & be sure to include jQuery.

<script type="text/javascript"> 
   $(document).ready(function() {
    $('#<%= tblEnablePreferredZerker.ClientID %>').hide();
   });
</script>
<table class="style1" id="tblEnablePreferredZerker" >
   <tr></tr>
</table>

answered Dec 25 '12 at 07:58

gopi1410

6,567
9
41
75

@Engineer hm. I just added `$(document).ready()` without modifying the code. Will edit my answer now. thanks – gopi1410 Dec 25 '12 at 08:02
Still getting error- "The name 'tblEnablePreferredZerker' does not exist in the current context" – Diboliya Dec 25 '12 at 09:45
1

@RajeevDiboliya Well, seems an error in your asp code, though I dont know much of asp. This would work (without asp): `$('#tblEnablePreferredZerker').hide();` – gopi1410 Dec 25 '12 at 09:50

Dejan Janjušević · Answer 3 · 2012-12-25T08:30:52.403

You have tagged jQuery so you might as well use it.

You can use $(document).ready() like so:

/* load jQuery first! */
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript"> 
    $(document).ready(function() {
        document.getElementById('<%= tblEnablePreferredZerker.ClientID %>').style.display = "none";
    });
</script>

This will fire only when all elements in this document are loaded.

Unable to select table id in javascript

3 Answers3