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 3.5 it would be nice, if he let me know.

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 3.5 it would be nice, if he let me know.

• javascript
• asp
• controls
• external
• clientid

Share Improve this question Follow edited May 23, 2017 at 12:19 CommunityBot 111 silver badge asked Oct 24, 2011 at 13:56 Andre HofmeisterAndre Hofmeister 3,4161111 gold badges5555 silver badges7878 bronze badges 7

• 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 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 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 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 plete JS code is in ascx file. Or did I understand that incorrectly? – 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 Commented Oct 27, 2011 at 13:43

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 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 acplish 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());

In the ASP page:

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

And in external JavaScript access TextBox2 in this way:

documnet.getelementByid(test2);

I've never found a solution to this that I like, but I've implemented a couple work-arounds that aren't pletely 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 mon 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.

Use explicity global parameter.

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

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