Question about "document.getElementById"

lukin

I am putting a site together using an external javascript file referred to in an ASP page to locate a table in the ASP page.
I am using "document.getElementById" to find the rows in a table:

var z=document.getElementById('ctl00_mainContentPlaceHolder_DataGrid1').rows

When the ASP code is converted to HTML ,the table name created is ctl00_mainContentPlaceHolder_DataGrid1 (as you can see above).
At the moment the site is just running on my local machine. However, when it goes live, will the table name generated be different to the one above?
If it is the javascript won't work. I suppose that wouldn't be too much of a problem, I could just replace the table name in the javascript with the different one. Or is there a different table name generated each time? Does it depend on where I host it?

matt-dublin

how is the table being named?

why don't you just give the table a static id?

lukin

matt-dublin wrote: »

how is the table being named?

why don't you just give the table a static id?

Well it's not actually a table on the ASP page, it's an ASP DataGrid control. But when I run it it is converted to a table so that's how I end up with a "table id" tag. ctl00_mainContentPlaceHolder_DataGrid1 is the id that is created.
This the id that "document.getElementById()" finds.

matt-dublin

gonna say something along the lines of :

<asp:DataGrid ID="">

lukin

Yes, in the ASP code the grid is id'd like this:

    <asp:DataGrid ID="DataGrid1" runat="server" >

However as I explained, when I run it and then look at the source, the grid is converted into a table like so:

   <table cellspacing="0" cellpadding="0" rules="all" border="1" id="ctl00_mainContentPlaceHolder_DataGrid1">

The id for the table is "ctl00_mainContentPlaceHolder_DataGrid1" so that is what I put into the javascript function so "document.getElementById" will work.
My question is how do I know this will work when the page goes live as ASP converts it into html and converts the grid into a table. Will the table name be the same as the name it has on my local machine?

matt-dublin

im not sure, the only way to know would be to test it on the live server and see what happens.

clientside shouldn't be an issue as the datagrid is running at the server and being named at the server

mewso

The new id is based on the fact you are using either a masterpage or a usercontrol. Asp.net automatically renames your contorls in these cases so there will be no danger of you having two controls of the same id. i.e. you have 2 pages using the same masterpage and you have a datagrid in both pages called datagrid1. The renaming is based on the page name. I think it's ridiculous molly coddling by microsoft and even complained about it to them while version 2 was in beta. It also affects css. I like being able to use # declarations in css but the renaming can cause irritations with that too.
Anyway I'm fairly certain it won't change when you go live as the renaming is based on masterpage/page names. One way to be sure is to use class behaviours. i.e. give the datagrid a cssclass="datagrid1" then in your script:-

function getDatagrid()   {
   var tbls = document.getElementsByTagName("table");
   var i = 0;
   for (i=0; i<tbls.length;i++)   {
      if (tbls[i].className == "datagrid1")   {
         return tbls[i];
      }
   }
}
...
later on...
...
var mygrid = getDatagrid();
if (mygrid)   {
   var z = mygrid.rows;
}

matt-dublin

http://www.codeproject.com/useritems/IdOfControlsInDataGrid.asp?df=100&forumid=265443&exp=0&select=1363304

lukin

Best way to find out for sure is to do what matt said and put it live and see.
I am using a master page and a content placeholder so that's where the name "ctl00_mainContentPlaceHolder_DataGrid1" is coming from. I dunno what the ctl00 part is about though.
I will try out that function you posted musician, thanks for that.
Cheers also to matt for the codeproject link (it's a great site, I've already solved a few problems thanks to it).

Eoin

musician wrote: »

The new id is based on the fact you are using either a masterpage or a usercontrol. Asp.net automatically renames your contorls in these cases so there will be no danger of you having two controls of the same id. i.e. you have 2 pages using the same masterpage and you have a datagrid in both pages called datagrid1. The renaming is based on the page name. I think it's ridiculous molly coddling by microsoft and even complained about it to them while version 2 was in beta. It also affects css. I like being able to use # declarations in css but the renaming can cause irritations with that too.
Anyway I'm fairly certain it won't change when you go live as the renaming is based on masterpage/page names. One way to be sure is to use class behaviours. i.e. give the datagrid a cssclass="datagrid1" then in your script:-

I was wondering why that was done - I've been caught out before when my CSS and JavaScript stops working. Maybe it's something I'm doing, but it also seems to output a different name and ID:
[html]
<input name="ctl00$MainContent$txtName" type="text" id="ctl00_MainContent_txtName" />
[/html]

lukin

eoin_s wrote: »

I was wondering why that was done - I've been caught out before when my CSS and JavaScript stops working. Maybe it's something I'm doing, but it also seems to output a different name and ID:
[html]
<input name="ctl00$MainContent$txtName" type="text" id="ctl00_MainContent_txtName" />
[/html]

Yours has a prefix of "ctl00" just like mine. Seems to be a default prefix used by ASP.NET wherever there is a content page.

Eoin

lukin wrote: »

Yours has a prefix of "ctl00" just like mine. Seems to be a default prefix used by ASP.NET wherever there is a content page.

Sorry - meant that the name and ID aren't the same - note the dollar signs and underscores.

mewso

eoin_s wrote: »

Sorry - meant that the name and ID aren't the same - note the dollar signs and underscores.

Yep don't ask me why they made it do that. It catches out some people who copy the rendered name assuming it's the same as the id.

Evil Phil

var z=document.getElementById('<&#37;= DataGrid1.ClientID %>').rows

TBH.

Seriously, I know some people don't like putting code blocks into their code but if you do this it will always have the correct ID now matter what you do further up the container heirarchy.

will the table name generated be different to the one above?

It should be the same, unless you rename the ContentPlaceHolder in the masterpage.

mewso

I should probably add something to my signature. In general I will not try to provide answers to script problems which allow using script in html. Just my own bugbear