[RESOLVED] Controls ID changing @ run-time ??

[motil]

Hi guys, i've noticed that the ID's of the HTML objects (asp:table,asp:tablecell) is changing during run time, so if my current tablecell ID is "MainContent", when i view the soruce after i build the application it's new ID is "ctl00_MainContent", why its change and how can i address this control with javascript ?

[gep13]

Hey,

This is the way that ASP.Net works. Basically, it is trying to enforce a unique ID for every element that it renders to the screen.

Take an example of a Button that is available on each row of a GridView. In your aspx markup, within the ItemTemplate you reference this as Button1. However, when ASP.Net renders mulitple Buttons to the screen, it adds addtional information into the ID to make it unique, and this is what you are seeing happen here.

For each control, you should find another property in addition to ID, called ClientID. This is what the control will be known as on the client-side.

Hopefully using this will help you with what you need.

Gary

[motil]

Hi Gary and thank you for the reply

It looks like "ClientID" is what i need but i don't know how to set it, if this is my table cell control:

<asp:TableCell BackColor="#ffffff" 
                VerticalAlign="Top" 
                HorizontalAlign="Right"
                 ColumnSpan="2" ID="MainContent"  >

where do i set the clientID ?

EDIT: Another problem even if i try to address the changed id ("ctl00_MainContent") of the Table Cell with Javascript still give me a null value.

[gep13]

Hey,

You don't set the ClientID, this is created for you at runtime, you simply have to reference it in your JavaScript.

http://msdn.microsoft.com/en-us/libr....clientid.aspx

What exactly is it that you are trying to achieve?

Gary

[motil]

I'm trying to set the TableCell Height, i gave it ID named "MainContent"
how do i do that ?

[mendhak]

In ASP.NET 4.0, you'll be able to set the ID to be static or predictable.

Don't specify CSS for a table cell by ID. Give the table a CSS class, then use CSS inheritance to set its height.

.tableClass tr td 
{
height: 90px;
}

If it's a specific cell, give it a class. There's no point applying a style to a dynamic ID, it can change at any time for any reason.

[motil]

thanks mendhak, but i have a bit more experience then this,

i know how to set css classes and i know how to statistically set the height of HTML elements, but i want the TD cell will be in the client screen height once the page is loaded, and i think you accomplish that mostly by using javascript.

[mendhak]

You want a 100% height table cell? You can specify a height of 100% in the CSS. What makes using javascript necessary here?

[motil]

i tried that million times in many years from some reason the height command isn't working as the width , i tried to set the table itself and the table cell to be 100% and it just not taking place, even if it works i still need to understand how the id thingy working with ASP.NET because i'm using javascript and ajax a lot.. so this is what i have so far:

 // if i do this:

alert('<%=MainContent.ClientID %>')

  // i do get the correct ID, but if i try this :


alert(document.getElementById('<%=MainContent.ClientID %>'))

// I get null value, this id belongs to a table cell:

<asp:TableCell BackColor="#ffffff"
                VerticalAlign="Top"
                HorizontalAlign="Right"
                 ColumnSpan="2" ID="MainContent"   runat="server">



// this table cell contain this:

<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">


// now this table cell supposed to get the client browser height on page load so i used // // this javascript function:

function setSize() {
    
            var winHeight
            if (window.innerHeight) {
                winHeight = window.innerHeight;
            }
            else if ((document.body) && (document.body.clientHeight)) {
                winHeight = document.body.clientHeight;
            }
            
            alert('<%=MainContent.ClientID %>')
            alert(document.getElementById('<%=MainContent.ClientID %>'))    //.height = "800px"            
           
            
           
        }

but again, i can't get to this table cell properties


thanks.

[mendhak]

Using a table for page layout? I thought you had more experience than this

I see what you're trying to do now, I'll also let you know that this is going to fail spectacularly. You should either switch to using DIVs/CSS for layout or give that table cell an arbitrary height. The javascript solution fails when a user resizes the window.

If you still insist on continuing this way, try generating that javascript from the codebehind. You can create a string like this

string myJs = "alert('The element ID is: ' + " + MainContent.ClientId + ");";

Then, use ClientScript.RegisterClientScriptBlock to write that javascript out to the page.

[motil]

even if using divs as layout is the better method to use, i still can't understand why it so hard to get the td properties with javascript when using ASP.NET, it should be trivial task.
so far i found that doing anything with ASP.NET is very complicated and harder than doing it with traditional ASP, I'm sure asp.net has much to offer and i hope the complication i'm experiencing is just because i'm new to this language and not because of the way it was built.

[mendhak]

I'm thinking that too, using tables for layouts is something that was popular around the time classic ASP was... not classic

Maybe give us an overview of the problem - why does it need to be 100%?

[motil]

this is how my master page structure is designed :

<table>
   <tr>
     <td colspan="2">
           Logo
     </td>
  </tr>
  <tr>
     <td>
           Menu ITems
     </tD>
  </tr>
   <tr>
      <td  ID="CellID">  <B>I need to change this cell Height to be at 100&#37; </B>
         <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
            site content
       </asp:ContentPlaceHolder>
      </td>
   </tr>
</table>

still no matter if i want to change the TABLE CELL for design purpose or for any other reason, i should be able to easily access this TD with javascript "Document.GetElementByID("CellID").Whatever"

And when using ASP.NET so far i simply can't do it by it's ID

[mendhak]

Change the table height to 100%. Give the Logo td a small height, the content td will fill up the rest of the space.

<table height="100%">
   <tr>
     <td colspan="2" height="19px">
           Logo
     </td>
  </tr>
  <tr>
     <td>
           Menu ITems
     </tD>
  </tr>
   <tr>
      <td  ID="CellID">  <B>I need to change this cell Height to be at 100% </B>
         <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
            site content
       </asp:ContentPlaceHolder>
      </td>
   </tr>
</table>

[motil]

thanks for the help mendhak, i already fixed it.

i added this code in the master page:

 
     function setSize() {
    
           var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
 document.getElementById('<&#37;=MainContent.ClientID%>').style.height = myHeight - 180 + "px"      
}

its the same code i had before but from some reason this

window.onload = setSize()

didn't worked well.

anyway it all working just as i wanted now.

and as for the design layout, i took you advice and learned a bit about divs / css layout, its too late for me to change the current website i'm working on layout but i will use the divs layout in my future projects,

thank you for the advices and tips