How to access the ClientID from a ServerControl in an external JavaScript

Question

At the moment, if I use JavaScript in my SharePoint projects, I add the code into the *.ascx file, in a <script type="text/javascript"></script> block and create for each element a variable for the ClientID.

For example:

var test = '<%= TextBox1.ClientID %>';

Now I would like to add an external JavaScript to my projects and insert the code there. But how could I access to the ClientID? In the external JavaScript I can’t use <%= TextBox1.ClientID %>. I found this: referencing server controls in external file but I doesn’t understand, how this should work. It would be awesome, if someone could explain my, how to access the ids.

By the way, why this:

<script type="text/javascript">
    var ClientIDs = {
        test1   : '<%= TextBox1.ClientID %>',
        test2   : '<%= TextBox2.ClientID %>'
        }

    function SetButtonStatus() {    
            alert($(ClientIDs.test1).value);
        }
</script>

doesn’t work, no message would be shown?

Greetz

Edit 1:

Okay, I could just use textBox1 in my external script? I did it this way, this is in my *.ascx file:

<script type="text/javascript">
    var ClientIDs = {
        textBox1:    '<%= textBox1.ClientID %>',
        textBox2:    '<%= textBox2.ClientID %>'
    }
</script>

In my external script I have just a function to test it:

function test () {
alert($(ClientIDs.textBox1).val();
}

I also tested it with "#" +. Every time test() is executed, I get following error:

"document.getElementById(...)" is null or not an object

Edit 2: I missed a ) in the alert. But now I get a message that the variable is not defined. If I use: $('#' + ClientIDs.SumbitSearch).val() I just get the Text and not the ID of my control.

Edit 3: At the moment I use:

<script type="text/javascript">
    var ClientIDs = {
        test1 :    '<%= TextBox1.ClientID %>',
        test2 :    '<%= TextBox2.ClientID %>'
    }

    function test() {
       alert($('#' + ClientIDs.test1).attr("id")));
    }
</script>

In my *.ascx file, it works. I don't like that way... It doesn't work in a external JS, the references doesn't work. If someone have some other ideas, which would work with .net 3.5 it would be nice, if he let me know.

I would avoid defining JS vars in your ASCX file: a page may include multiple controls (or multiple instances of the same control). If each control defines "var ClientIDs", they'll conflict with each other (damn JS global namespace!). If you only allow your .ASPX file to define the JS var, at least you know you'll only have one per page. — mikemanne
– mikemanne, Commented Oct 24, 2011 at 14:42
Actually, i define the JS var by hand. I found a small tool, which create the ClientIDs automatically link. But I can't access to the variable, from my external JS. Greetz. — Andre Hofmeister
– Andre Hofmeister, Commented Oct 25, 2011 at 8:43
I'm not sure what you mean "define the JS var by hand", and how it prevents collision if the same control defines the same var, but is included on the page multiple times. — mikemanne
– mikemanne, Commented Oct 25, 2011 at 14:02
...same control defines the same var... I'm sorry, I don't understand, what’s the problem? Do you mean, if a wepart is added multiple times the controls use the same id? I tested it. If I use in one website, the same webpart more times, the control id of each control is different. Webpart 1: TextBox1 ID: ..._yyyyyy_ctl00_TextBox1ID Webpart 2: TextBox1 ID: ..._xxxxxx_ctl00_TextBox1ID Or do you mean that the JS var, in this case ClientIDs exists more than one time? What did it care, if the ClientIDs is private and the complete JS code is in ascx file. Or did I understand that incorrectly? — Andre Hofmeister
– Andre Hofmeister, Commented Oct 27, 2011 at 6:32
If you write the javascript "var ClientIDs" in your ASCX file, then include 2 instances of that control on a page, then "var ClientIDs" will be included twice in the rendered page. Because JS vars are global, your two "var ClientIDs" definitions will collide. It will either cause JS errors, or more likely, when JS accesses "ClientIDs" you have no idea which one will be used. — mikemanne
– mikemanne, Commented Oct 27, 2011 at 13:43

wsanville · Accepted Answer · 2011-10-24 14:39:44Z

3

To explain, and simplify the question that you're linking to, all they are doing is setting a JavaScript variable from the page/server control, and reading that variable from an external JavaScript file.

For example, your *.ascx file will contain this JavaScript:

var textBox1 = '<%= TextBox1.ClientID %>';

Then, your external JavaScript file can just reference the variable textBox1.

Now, there are other ways to accomplish this. If you're using ASP.NET 4, you can use a new property ClientIDMode to prevent ASP.NET from changing your IDs. If you're not using ASP.NET 4, could also simply add a CSS class to the elements you want to select, and just change your jQuery selector to use a class (slightly slower than using an ID though).

Lastly, you'll need to use the # when evaluating a jQuery selector for an element id, so this will work:

alert($('#' + ClientIDs.test1).val());

edited Oct 24, 2011 at 14:39

answered Oct 24, 2011 at 14:04

wsanville

37.6k8 gold badges78 silver badges102 bronze badges

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

6 Comments

Andre Hofmeister Over a year ago

See my Edit 1:. Thank's for your answer. Greetz.

wsanville Over a year ago

Updated the jQuery selector, mine was totally wrong. Also, the method is val() not values.

mikemanne Over a year ago

Upvote for ClientIDMode - I'd forgotten about that. It solves the .JS / ClientID problem. Of course, it adds the problem that each control/page is responsible for ensuring unique naming of its elements.

wsanville Over a year ago

True, using clientIDMode="Static" forces you to do a bit of thinking/double checking ahead of time. But for the cases where you only have one instance of a control, it's much nicer from a CSS/JS perspective.

Andre Hofmeister Over a year ago

Okay, I will have a try with the 'clientIDMode'. But now i will make a break. I give you tomorrow feedback if everything works fine. Greetz.

|

Muhammad Jahangir Javed · Accepted Answer · 2012-08-27 06:53:45Z

1

In the ASP page:

<script>
    var test2 = '<%= TextBox2.ClientID %>'
</script>

And in external JavaScript access TextBox2 in this way:

documnet.getelementByid(test2);

edited Aug 27, 2012 at 6:53

user447356

answered Aug 27, 2012 at 6:46

Muhammad Jahangir Javed

496 bronze badges

Comments

mikemanne · Accepted Answer · 2011-10-24 14:05:02Z

0

I've never found a solution to this that I like, but I've implemented a couple work-arounds that aren't completely horrible:

For the JS code which must reference specific page elements, define it in the .aspx file, so you have access to <%= btnFoo.ClientID %>. Those functions can call common heavy-lifting functions in your .js file.
Define javascript variables in your .aspx file to hold the ClientID values. Functions in your .js file can reference those variables to get the client IDs. Of course, those functions will only work correctly on pages which define the expected variables.

Perhaps other SO'ers will have more elegant solutions to this problem - I look forward to seeing other responses.

answered Oct 24, 2011 at 14:05

mikemanne

3,5851 gold badge24 silver badges31 bronze badges

2 Comments

Andre Hofmeister Over a year ago

That's true. I also found no solution, which is quite nice. Greetz.

wsanville Over a year ago

If you do not have multiple instances of your user control on a page, the most elegant solution would be to set clientIDMode="Static" in the <pages> node of your web.config file. This was introduced in ASP.NET 4.

Sergey · Accepted Answer · 2011-10-25 12:06:44Z

0

Use explicity global parameter.

window.clientId= '<%= TextBox1.ClientID %>';

it means that you have gloabal variable "cilentId". And then you can use it everywhere.

answered Oct 25, 2011 at 12:06

Sergey

8,12116 gold badges52 silver badges77 bronze badges

1 Comment

mikemanne Over a year ago

My understanding is that any use of the "var" keyword in JS is the same thing as applying thing var to the "window" object (except vars defined specifically within the scope of a function). Perhaps my understanding is incorrect?

Collectives™ on Stack Overflow

How to access the ClientID from a ServerControl in an external JavaScript

4 Answers 4

6 Comments

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related