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