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.

Answer 1

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());

Answer 2

In the ASP page:

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

And in external JavaScript access TextBox2 in this way:

documnet.getelementByid(test2);

Answer 3

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.

Answer 4

Use explicity global parameter.

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

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