/    Sign up×
Community /Pin to ProfileBookmark

GetElementByID – Partial IDs

Copy linkTweet thisAlerts:
Jul 25.2006

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

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorJul 25.2006 — This should work
<i>
</i>function getRealId(partialid){
var re= new RegExp(partialid,'g')
var el = document.getElementsByTagName('*');
for(var i=0;i&lt;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('*');
Copy linkTweet thisAlerts:
@pkavanaghauthorJul 25.2006 — 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
Copy linkTweet thisAlerts:
@KorJul 25.2006 — 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);[B]break[/B];

}
Copy linkTweet thisAlerts:
@StrikeEagleJul 25.2006 — 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.
Copy linkTweet thisAlerts:
@pkavanaghauthorJul 25.2006 — 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.[/QUOTE]
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.
Copy linkTweet thisAlerts:
@DssTrainerJan 22.2008 — Just wanted to say thank you here. I came across this code and this was exactly what i needed for my project.
Copy linkTweet thisAlerts:
@KorJan 22.2008 — Just wanted to say thank you here. I came across this code and this was exactly what i needed for my project.[/QUOTE]
You are welcome. That was an old post. Meanwhile I have learned that a [B]while[/B] loop is faster:
<i>
</i>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);
}
}
}
×

Success!

Help @pkavanagh spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...