Referencing the ASP.NET web control in javascript

Question

I have created a drop down list in my user control, see source code below,

<asp:DropDownList ID="ddlInd" runat="server" DataSourceID="indXmlDS" DataTextField="text" DataValueField="text"></asp:DropDownList>

In Page_load I have done this:

protected void Page_Load(object sender, EventArgs e)
    {
       ClientScriptManager cs = Page.ClientScript;
       cs.RegisterStartupScript(this.GetType(), "myScript", "<script language='javascript' src='../Scripts/myJS.js'></script>");
        ddlInd.Attributes["onchange"] = "showTextbox()";
    }

So what code should I be using, if I would like to refer to this control in my external javascript file, myJS.js?

I have tried to use document.getElementById("<%=ddlInd.ClientID %>") but it would return NULL .

Can anyone help? Thanks

EDIT:

Not sure if attaching that myJS.js file would be helpful here

function showTextbox() {
    var sid = <%=ddlInd.ClientID %>;
    //alert(sid);
    var s = document.getElementById('<%=ddlInd.ClientID %>'); // <-- problem here 

    alert(s);
    if (s.options[s.selectedIndex].value == "Other") {
        myDiv.style.display = "inline";
        alert("display");
    }
    else {
        myDiv.style.display = "none";
        alert("none");
    }
}

EDIT2:

I kinda found the workaround which is to embed scripts in the user control page instead of using external script file. Thanks for the suggestions everyone. They were all very helpful.

Also the modified js script is as follows, and it works:

function showTextbox(objID) {
    var s = document.getElementById(objID);
    var div = document.getElementById("myDiv");
    if (s.options[s.selectedIndex].value == "Other") {
         div.style.display = "inline";
     }
     else {
         div.style.display = "none";
     }
}

Answer 1

Try using ClientScriptManager.RegisterClientScriptInclude instead of RegisterStartupScript.

It seems in your case you're including an external javascript file, rather than javascript code that should directly appear in the page.

Also try changing the double quotes " to single quotes ' in document.getElementById('<%=ddlInd.ClientID %>')

EDIT oh, I see that you're trying to do <%=ddlIndustry.ClientID %> inside your javascript file. That is not going to be interpreted in an external js file! You should either include your function directly in teh page (not as an external file) or try to pass the ColntrolId as an argument to the js function

Answer 2

Try to set the ClientIdMode of the control to Predictable:

<asp:DropDownList ID="ddlInd" ClientIDMode="Predictable" runat="server" DataSourceID="indXmlDS" DataTextField="text" DataValueField="text"></asp:DropDownList>

You can also use a static ClientId by using ClientIDMode="Static" in which case the ClientId will be equal to the id of the control, so you can say:

document.getElementById("ddlInd");

Answer 3

you could use this to reference your control to.js file

$('select#ddlInd').val(....)

if the dropdownlist is inside a "ContentPlaceholder", you could do this

$('select#ContentPlaceholderID_ddlInd').val(...)

place it in your.js file

Note: include of course your.js file

Answer 4

If you can't use .NET 4.0 and are stuck on 3.5/2.0, I wrote a small library called Awesome.ClientID to solve this problem.

I've posted it before in this answer: How do I make this getElementsbyName work for IE (and FF)?

Basically it will allow you to serialize all your controls to a JSON array, and you can change your JavaScript to:

document.getElementById(controls.ddlInd);

The library can be found here: http://awesomeclientid.codeplex.com/

Blog post about it: http://www.philliphaydon.com/2010/12/i-love-clean-client-ids-especially-with-net-2-0/

Answer 5

You can use <%=Control.ClientID %> When you have script on the.aspx page if your using an External file then u have to use the control id <%=ddlInd.ClientID %> will not work.