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";
     }
}

@paolo I think its document.getElementByID that returns NULL — woodykiddy
– woodykiddy, Commented Jun 30, 2011 at 7:52
Where and how have you tried document.getElementById("<%=ddlInd.ClientID %>"), as parameter for showTextbox? It could also be helpful to see the relevant part of your Usercontrol where ddlInd and the TextBox are. Doesn't showTextbox also needs the ID of the TextBox? — Tim Schmelter
– Tim Schmelter, Commented Jun 30, 2011 at 7:54
what if you comment all what you've done in page load? Still NULL is returned? — asma
– asma, Commented Jun 30, 2011 at 7:54
@Tim the js function showTextbox() is in the myJS.js file which is stored under Scripts folder as you can see from the code written in Page_Load event. — woodykiddy
– woodykiddy, Commented Jun 30, 2011 at 8:05

Paolo Falabella · Accepted Answer · 2011-06-30 08:27:41Z

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

edited Jun 30, 2011 at 8:27

answered Jun 30, 2011 at 8:01

Paolo Falabella

26.1k3 gold badges79 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Paolo Falabella Over a year ago

this seems to be a javascript error, now. Are you sure the path to your javascript file is correct? You should try "~/Scripts/myJS.js" as the path to your js file. A relative path to your js is tricky from inside a user control, because the path to the js is relative to the page where you include the control, not to the user control itself.

Edwin de Koning · Accepted Answer · 2011-06-30 07:51:26Z

0

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

answered Jun 30, 2011 at 7:51

Edwin de Koning

14.4k9 gold badges60 silver badges74 bronze badges

5 Comments

woodykiddy Over a year ago

No luck. still giving me NULL, when I call alert(document.getElementById("<%=ddlInd.ClientID %>"))

Edwin de Koning Over a year ago

@woodykiddy: and when you call: alert("<%=ddlInd.ClientID %>") ?

woodykiddy Over a year ago

No luck there either when ClientIDMode = "Static" Not sure what's wrong with my code :(

woodykiddy Over a year ago

if I do alert("<%=ddlInd.ClientID %>") it will just show a string <%=ddlInd.ClientID%>

Edwin de Koning Over a year ago

@woodykiddy: Woops, you need single quotes. Which, by the way, you should probably do in your document.getElementById as well...

eronille · Accepted Answer · 2011-06-30 08:13:26Z

0

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

edited Jun 30, 2011 at 8:13

answered Jun 30, 2011 at 7:56

eronille

11 bronze badge

1 Comment

Edwin de Koning Over a year ago

This would assume the OP has access to jQuery, obviously.

Community · Accepted Answer · 2017-05-23 12:19:02Z

0

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/

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Jun 30, 2011 at 8:39

Phill

19k7 gold badges66 silver badges104 bronze badges

Comments

Nitish Katare · Accepted Answer · 2011-07-01 09:14:25Z

0

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.

answered Jul 1, 2011 at 9:14

Nitish Katare

1,1653 gold badges12 silver badges22 bronze badges

Collectives™ on Stack Overflow

Referencing the ASP.NET web control in javascript

5 Answers 5

1 Comment

5 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

5 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related