Fetch ASP.NET label control through JavaScript the right way?

Question

Good day. I am trying to fetch an asp.net label control's text value using javascript. However the control id is returned as null when I use

var a = document.getElementById('<%= lblTreatyNo.ClientID %>').innerText;

However it does work when I use the full name from source like

var a = document.getElementById('ctl00_ContentPlaceHolder1_lblTreatyNo').innerText;

I am using master pages in my site design. I want to know the correct way of fetching this. Isn't there a way not to use the full name from the source file?

Update here is my code sample

<asp:Label ID="lblTreatyNo" runat="server"></asp:Label>    
<asp:Button ID="btnNewSec" runat="server" OnClientClick="javascript:void(window.open ('ft_newsec.aspx?ftid='+document.getElementById('ctl00_ContentPlaceHolder1_lblTreatyNo').innerHTML+'',null,'height=220,width=300,resizable=yes,status=no,toolbar=no,menubar=no,location=no,scrollbars=yes')); return false;" Text="Add New Company" CausesValidation="False" Width="155px" />

I don't see how your second code sample is correct, did you put <%= %> around the generated client id on accident? — JeremyWeir
– JeremyWeir, Commented Aug 26, 2010 at 5:26

Giuseppe Accaputo · Accepted Answer · 2010-08-27 05:37:31Z

3

The only problem that I can see is that you're trying to get the element before the DOM is loaded. An actual scenario would be if the asp:Label is defined after the JavaScript code; by the time the JavaScript code is executed, the element you're trying to get is not known, and document.getElementById will return null. But then again, the second approach shouldn't work neither in this case. We'd need to know more about the context to help you, i.e. the code where both the asp:Label and the JavaScript code are defined; it looks like something else might be wrong.

Regarding your question at the end, using the ClientID property is the right way to do it, since ClientID will be the value of the element's id attribute (HTML).

Update, in regard to Popo's newly posted code

lblTreatyNo.ClientID in the OnClientClick property (in the ASPX source) isn't rendered; if you have a look at the source code of the rendered page, you'll see something like the following:

onclick="&lt;%= lblTreatyNo.ClientID %>

No server-side code should be put in the OnClientClick when defined in an ASPX page, since the property's value won't be rendered. You can imagine that OnClientClick will be directly replaced by the JavaScript event handler onclick once the page is rendered, without rendering OnClientClick's value.

To circumvent this problem, you either can set the OnClientClick property in the code-behind:

protected void Page_Load(object sender, EventArgs e)
{
    btnNewSec.OnClientClick="javascript:void(window.open ('ft_newsec.aspx?ftid='+document.getElementById('"+lblTreatyNo.ClientID+"').innerHTML+'',null,'height=220,width=300,resizable=yes,status=no,toolbar=no,menubar=no,location=no,scrollbars=yes')); 

    return false;
}

Or, if you want to do it on the client-side, you could do the following with jQuery:

$(function() {
    $("#<%= btnNewSec.ClientID %>").click(function(e) {
        window.open('ft_newsec.aspx?ftid=' + document.getElementById('<%= lblTreatyNo.ClientID %>').innerHTML + '', null, 'height=220,width=300,resizable=yes,status=no,toolbar=no,menubar=no,location=no,scrollbars=yes');
        e.preventDefault();
    });
});

Once the DOM is loaded, the above defined jQuery code will attach your JavaScript code to the button's click event; once the user hits the button, your JavaScript code will be executed.

edited Aug 27, 2010 at 5:37

answered Aug 26, 2010 at 6:04

Giuseppe Accaputo

2,64217 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Giuseppe Accaputo Over a year ago

@Popo thanks for posting some more code. I've now updated my answer, and added a workaround to your problem. Hope it solves it

abatishchev Over a year ago

Using generated ID instead of original - is bad idea

Giuseppe Accaputo Over a year ago

@abatishchev Damn, I forgot to replace it with lblTreatyNo.ClientID; it wasn't intentional. I've corrected the code. Thanks for the hint. Maybe the downvote isn't necessary anymore.

Zo Has Over a year ago

Thank you Giu. I did not knew previously about the server side property values not being rendered. Your post was very informative for me =) Can I call a function in on ClientClickEvent(openWindow();). Maybe that would work as well. Thumbs up for the help !

Giuseppe Accaputo Over a year ago

@Popo you're welcome; I'm glad it helped you. Sure you can; the following code does exactly what you want: hpaste.org/fastcgi/hpaste.fcgi/view?id=29453#a29453 You just have to define a JavaScript function openWindow and reference (or call) it from within OnClientClick: OnClientClick="javascript:openWindow();return false;"

codeandcloud · Accepted Answer · 2010-08-26 06:12:03Z

Here is a sample scenario.
Suppose you have a label and a button inside a content page of a master page.
On clicking the button you want the labels text at clientside.

<div>
    <asp:Label ID="myLabel" runat="server" Text="Hello World"></asp:Label><br />
    <asp:Button ID="myButton" runat="server" Text="Click Me"/>
</div>

Add this on PageLoad Event

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        myButton.Attributes.Add("onclick", "javascript:return ChangeLabelText('"
            + myLabel.ClientID + "');");
    }
}

This way the rendered ClientID get passed to your function.
Now access it using javascript.

function ChangeLabelText(label_id) {
    alert(document.getElementById(label_id));
    //prevents postback, return true if you need postback
    return false;
}

Happy Coding!

abatishchev · Accepted Answer · 2010-08-26 07:05:56Z

0

What is the version of ASP.NET you're running? If it's 4.0 using Control.ClientIDMode might help

answered Aug 26, 2010 at 7:05

abatishchev

101k88 gold badges303 silver badges443 bronze badges

Comments

jerjer · Accepted Answer · 2010-08-26 05:43:47Z

-2

You may remove the asp short tags:

From:

var a= document.getElementById('<%=ctl00_ContentPlaceHolder1_lblTreatyNo %>').innerText;

To:

var a= document.getElementById('ctl00_ContentPlaceHolder1_lblTreatyNo').innerText;

answered Aug 26, 2010 at 5:43

jerjer

8,77634 silver badges36 bronze badges

Collectives™ on Stack Overflow

Fetch ASP.NET label control through JavaScript the right way?

4 Answers 4

Update, in regard to Popo's newly posted code

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Update, in regard to Popo's newly posted code

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related