This question popped up on the ASP.NET forums where I moderate:
"How do I find an HTML element on a Master Page, from a child page, using jQuery?"
I licked my chops. I like questions like this because when I don't know the answer, it gives me an excuse to explore and learn.
The problem is that element ids on Master Pages get mangled, or decorated, to prevent duplicate ids on the final rendered HTML.
For instance, a
textbox with an id like this:
MasterPageTextBox ends up with an id like this:
We could hard code the mangled id into the jQuery search criteria and it would work. But what a maintenance nightmare, in the future, the mangled id might change: Not acceptable. When people pay you money to write code, you should write good code.
If you are using ASP.NET 4, you have control over the generated ids and can make them predictable. Then you can hard code the generated id into the CSS selector. However, that isn't the case for most sites at this time.
After Googling and Binging around a bit, I came up with this approach to use in the Master Page:
protected void Page_Load(object sender, EventArgs e)
The code above takes the generated
ClientID and puts it in a
HiddenField that gets sent to the browser. The jQuery code in the child page can then get the value in the
HiddenField and use it to search for the element. I thought this was pretty cool but…the jQuery code wouldn't compile because the
HiddenField wasn't on its page. So an empty
HiddenField control has to be placed on the page. It's messy, but it works! Here is how the jQuery on the child page accesses the hidden field and then accesses the
textbox on the Master Page:
var HidField = $("#HiddenFieldClientID");
if (HidField.length == 1)
var ClientID = HidField.value;
$("#" + ClientID).val("Hello");
I went to post my 'brilliant' answer, but in the meantime another forum member posted an answer which was far superior to mine.
Frank Hong suggested wrapping the element with a
Two things make this next solution work.
Span tag IDs are NOT mangled or decorated.
- CSS selectors are cool, really cool…quick review:
The comma (,) operator means AND. All
divs and paragraphs on the page will be selected.
div > p
The greater than (>) operator means direct parent of. Any paragraphs directly inside of any
divs are selected
The space ( ) operator means ancestor of. Any paragraphs inside a
div are selected, even if they are inside of other elements within the
In the Master Page, wrap the
textbox with a
<asp:TextBox ID="MyTextBox" runat="server"></asp:TextBox>
Here's what it looks like rendered, note the
TextBox id got mangled but the
span id remains unscathed:
<input name="ctl00$MyTextBox" type="text" id="ctl00_MyTextBox" />
In the Child Page, we can use the greater than or the space operator. The greater than operator is more explicit as to our intent. We use 'input' because
textboxes render as HTML input elements.
So the CSS selector is:
#SpanMyTextBox > input.
$("#SpanMyTextBox > input").val("Hello");
Now, isn't that better? Of course, it's up to the developer to ensure duplicate span ids are not used.
Solution 5 (from the comments)
You can also use a wild card CSS selector.
The above line matches all HTML input elements with an
id attribute that ends with "
It will match:
<asp:TextBox ID="ctl00$MyTextBox" runat="server"...
<asp:TextBox ID="LaLaLaMyTextBox" runat="server"...
<asp:TextBox ID="abc123MyTextBox" runat="server"...
I hope someone finds this useful.