Jquery get dynamically generated Id of control

Question

I have a page where Ids are changed to ctl00_MainContent_txt_insurance. In this case I cannot use the actual Id as $("#txt_insurance"). so what I did was to use $("#<%= txt_insurance.ClientID %>"), which works fine now.

But now if I want to replace the above ID and show it I did this:

divToChangeVisible = $("#<%= txt_insurance.ClientID %>");
divToChangeVisible.replace("txt_", "val_").show();

This will get me an object and throws an error saying cannot be replaced. Is there a way to get txt_insurance as Id without having to replace ctl00_MainContent_?

Edit :: If I do $("#<%= txt_insurance.ClientID %>").attr('id') this will again return the dynamic id...

$('#<% = txt_insurance.ClientId %>") returns an object, it is not an string so obviously .replace wont work. ur need is not clear, you want to change the id of the element or wat?? in that case use .attr('id') to get it and change its value by .val() — Manish Mishra, Feb 06 '13 at 11:46
ct100_MainContent gets appended to Id because you must have kept your control in a Master page or some kind of data grid. in any case, its pattern of the prefix is always going to be fixed, which you can easily replace by grabbing the attr id value. you have to hardcode the pattern somewhere — Manish Mishra, Feb 06 '13 at 11:51
@ManishMishra you are right it is in masterpage...so it will never change not even in server, because all my logic will be based on jquery? — Zaki, Feb 06 '13 at 12:28

Pranav · Accepted Answer · 2013-02-06T12:34:00.623

2

you can use Jquery selector like "ID ends with":-

$("[id$='txt_insurance']")

above statement fetch the element whose ID ends with "txt_insurance".

for an example :-

var eleid=$("[id$='txt_insurance']").attr('id');
var rep=eleid.replace("txt_", "val_");
alert(rep);
$("[id$='txt_insurance']").attr('id',rep);
//this will replace old ID with new which is 'ctl00_MainContent_val_insurance'

UPDATE:-

    var ele=eleid.split("_");
alert(ele[ele.length-2]+'_'+ele[ele.length-1]);
    var originalid=ele[ele.length-2]+'_'+ele[ele.length-1];
    // originalid will give you original id of element :-

so you can proceed like :-

$('.myform :input').each(function () 
{
    var id = this.id; 
    var orgid=id.split("_");
    var orgid1=orgid[orgid.length-2]+'_'+orgid[orgid.length-1];
    var id2 = $("[id$=" + orgid1 + "]");
 });

edited Feb 06 '13 at 12:34

answered Feb 06 '13 at 11:44

Pranav

8,563
4
26
42

Yea that works but what if i have $('.myform :input').each(function () {var id = this.id; var id2 = $("[id$=" + this.id + "]")...now id will get me the prefixed ctl00..and id2 will get me object is there a way to get the proper id – Zaki Feb 06 '13 at 12:25
you can split the id on "_", and construct original ID . – Pranav Feb 06 '13 at 12:28
ok, but the auto prefix is not going to change ever, even after deployment to server, right? – Zaki Feb 06 '13 at 12:36
yes ...it is naming convention by ASP.NET to uniquely identify each element and to avoid confusion. – Pranav Feb 06 '13 at 12:37
if my answer has helped you ..please do not forget to mark it as correct. – Pranav Feb 06 '13 at 12:39

Jquery get dynamically generated Id of control

1 Answers1