CODEWITHSUNDEEP
asp.netjavascriptjqueryweb-user-controls
TonyAbell
TonyAbell

Reputation: 1330

javascript and asp.net web user controls

I have a web user control that generates the following html on the client.

I want to reference a specific RadioButton control using JavaScript.

I am not sure how to do this as the RadioButton ID is generated by asp.net.

For example I give the RadioButton ID = 1_RadioButton

asp.net generates an ID = ctl00_ContentPlaceHolder1_Material_1_RadioButton

how can this javascript code find Radio Button controls? 

    <script type="text/javascript">
        $(document).ready(function() {
            if (document.getElementById("1_RadioButton").checked) {
                $("#1_other").hide();
            }
        });    
    </script>

The following is what asp.net generates for the client.

    <input id="ctl00_ContentPlaceHolder1_Material_1_RadioButton" type="radio" name="ctl00$ContentPlaceHolder1$Material$Academic" value="1_RadioButton" onclick="javascript:$('#1_other').show('fast');" />

    <label for="ctl00_ContentPlaceHolder1_Material_1_RadioButton">Yes</label>

    <input id="ctl00_ContentPlaceHolder1_Material_2_RadioButton" type="radio" name="ctl00$ContentPlaceHolder1$Material$Academic" value="2_RadioButton" checked="checked" onclick="javascript:$('#1_other').hide('fast');" />

    <label for="ctl00_ContentPlaceHolder1_Material_2_RadioButton">No</label>

    <input id="ctl00_ContentPlaceHolder1_Material_3_RadioButton" type="radio" name="ctl00$ContentPlaceHolder1$Material$Academic" value="3_RadioButton" onclick="javascript:$('#1_other').hide('fast');" />

    <label for="ctl00_ContentPlaceHolder1_Material_3_RadioButton">Uncertain</label>

    <div id='1_other'>
         <input name="ctl00$ContentPlaceHolder1$Material$4_TextBox" type="text" value="bbb chabng" id="ctl00_ContentPlaceHolder1_Material_4_TextBox" />
   </div>

Upvotes: 1

Views: 11401

Answers (4)

BeSam
BeSam

Reputation: 1

Very simple just set the clientidmode of the web control to static (clientidmode="static") and you can be sure that asp.net will keep your ID as seen in the designer UI.

Upvotes: -1

Adam Markowitz
Adam Markowitz

Reputation: 13127

If that code is in the .aspx file use <%= MyRadioButton.ClientID %> in its place and the ASP.NET rendering engine will properly render the ID for you.

Update: For example:

<script type="text/javascript">
    $(document).ready(function() {
        if ($get("<%= MyRadioButton.ClientID %>").checked) {
            $("#1_other").hide();
        }
    });    
</script>

Upvotes: 6

RedWolves
RedWolves

Reputation: 10395

I had written a blog post on how to do this:

So say you have a label control on your page:

The generated output of the html and the ID of that control might look like this:

<span id="ctl00_ContentPlaceHolder1_Label1"></span>

Unfortunately the generated ID of ct100_ContentPlaceHolder1_Label1 isn't always going to be the same from build to build. So trying to select it like this:

$("#ct100_ContentPlaceHolder1_Label1").hide();

will eventually break and it won't hide the label control.

The trick is to use ASP.NET inside the jQuery selector. Label1.ClientID will return the generated ID everytime. We combine ASP.NET and jQuery into one line like this:

$("#<%= Label1.ClientID %>").hide();

This will get the generated ID of the Label control everytime.

Upvotes: -1

Mike Robinson
Mike Robinson

Reputation: 25159

var radioButton = document.getElementById("<%= 1_RadioButton.ClientID %>");

And then go from there. Note - I'm not positive about the quotation marks.

Upvotes: 1

Related Questions