GetElementByID - Partial IDs

[pkavanagh]

Been wondering about this. With .net and controls that runat server, the ids are often changed to reflect their hierarchy on the control tree for the page. So, a link with the id "lnkNav" might become something like "ctl10_ctl15_lnkNav" when rendered to the browser.

Given this, and that I don't know exactly what the rendered id will be at runtime, if I want to access client side (assume no server side code for this), how can I find the actual id from the partial string lnkNav?

Thanks,

Paul

[Kor]

This should work

function getRealId(partialid){
var re= new RegExp(partialid,'g')
var el = document.getElementsByTagName('*');
for(var i=0;i<el.length;i++){
if(el[i].id.match(re)){
alert(el[i].id)
}
}
}

Now pass the partial id to the function.

The code will work with reasonable speed if the page has a reasonable number of tags. If too many, the loop should be restricted somehow, for instance if your element with that id is nested in a certain parent (a table, a div, ...something like that)

For instance:
var el = document.getElementById('myTable').getElementsByTagName('*');

[pkavanagh]

Thanks Kor!!! I see what you mean about limiting the loop. Problem is that parent or container element ids may also be generated/modified by .net at runtime.

But I think that specifying a tag name should work in most cases. In any cases that I have needed this, I would know the element that I want to get a handle on. So I will try something like:

function getRealId(partialid,tagname){
var re= new RegExp(partialid,'g')
if (tagname==''||tagname==null) tagname = '*';
var el = document.getElementsByTagName(tagname);
for(var i=0;i<el.length;i++){
if(el[i].id.match(re)){
alert(el[i].id)
}
}
}

I could also modify the function to give the option for parent id also. This gives me a great starting point.

Cheers,

Paul

[Kor]

To speed the code, you may also break the loop, if you are looking for a single element

if(el[i].id.match(re)){
alert(el[i].id);break;
}

[StrikeEagle]

I know you said no-server-side code, but you really should be using the 'ClientID' attribute in .net to get the ID of a control. This way you are guaranteed to get the correct client-side ID.

[pkavanagh]

I know you said no-server-side code, but you really should be using the 'ClientID' attribute in .net to get the ID of a control. This way you are guaranteed to get the correct client-side ID.
Yep, agreed, but there are cases where I am modifying or working with controls where I do not have access to the source. For this type of case I am trying to kludge together a method for getting access some page elements via Javascript.

[DssTrainer]

Just wanted to say thank you here. I came across this code and this was exactly what i needed for my project.

[Kor]

Just wanted to say thank you here. I came across this code and this was exactly what i needed for my project.
You are welcome. That was an old post. Meanwhile I have learned that a while loop is faster:

function getRealId(partialid){
var re= new RegExp(partialid,'g');
var elems = document.getElementsByTagName('*'), i=0, el;
while(el=elems[i++]){
if(el.id.match(re)){
alert(el.id);
}
}
}