Pass Multiple Controls to Javascript Function in WebUserControl

Question

If I have a Web User Conrol (ASP.NET), how do I pass multiple objects to javascript function from the markup? See Below under the image control calling ShowList...

<script type="text/javascript">
function ShowList(txt, lst) {
    var t = document.getElementById(t.id);
    var l = document.getElementById(l.id);
    l.style.display = 'block';
}
</script>

<asp:Panel ID="Wrapper" runat="server" Width="200px">
<asp:TextBox ID="TextBox1" runat="server" Width="150px"></asp:TextBox>
<asp:Image ID="Image1" runat="server" CssClass="image" ImageUrl="~/Images/cb-button-b3.png"
    onclick='<%="ShowList("TextBox1,ListBox1)"%>'>
</asp:Image>
<asp:ListBox ID="ListBox1" runat="server" CssClass="listbox">
    <asp:ListItem>a</asp:ListItem>
    <asp:ListItem>b</asp:ListItem>
    <asp:ListItem>c</asp:ListItem>
</asp:ListBox>
</asp:Panel>

Katie Kilian · Accepted Answer · 2011-04-18 17:08:39Z

1

Why do you have the <% and %> in this code snippet?

onclick='<%="ShowList("TextBox1,ListBox1)"%>'

That is telling ASP.NET to process that part on the server side, before it gets to the client. But you are trying to call a javascript function that is supposed run in the web browser on the client side. Also, your double quotes are in the wrong places.

Try changing the above snipped to this instead:

onclick='ShowList(TextBox1,ListBox1)'

The whole line would be this:

<asp:Image ID="Image1" runat="server" CssClass="image" 
    ImageUrl="~/Images/cb-button-b3.png" 
    onclick='ShowList(TextBox1,ListBox1)'></asp:Image>

Also, make sure the control IDs in the HTML generated by ASP.NET match the IDs you assigned on the server. If you're using master pages, they won't. In that case, you need to check what names they are assigned by doing View Source from the web browser and searching for the name. A control's final ID is assigned based on its NamingContainer. The details are a little bit beyond the scope of your question, but the main thing is to make sure the IDs you're using in Javascript (in this case, TextBox1 and ListBox1) match what ASP.NET is actually outputting to the web browser.

answered Apr 18, 2011 at 17:08

Katie Kilian

7,0435 gold badges45 silver badges67 bronze badges

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

4 Comments

Troy Mitchel Over a year ago

Thanks for the reply. I edited the markup but I get this error now "Microsoft JScript runtime error: 'TextBox1' is undefined". I think it is trying adding the intance name of the user control in front of the parameteres. Like UserControl1_TextBox1 and so on...

Troy Mitchel Over a year ago

As to why I used <%...%> is I originally tried to do this '<%="ShowList(" + Me.ClientID + "_TextBox1," + Me.ClientID + "_ListBox1)"%>'. I forgot to post it though.

Katie Kilian Over a year ago

I think this would be better accomplished from inside the VB.NET code. In your Page_Load event: Image1.Attributes.Add("onclick", "ShowList(" + TextBox1.ClientID + ", " + ListBox1.ClientID + ")")

Katie Kilian Over a year ago

ClientID is definitely the Right Way to do it. My code is adding the OnClick attribute via the server side code instead of in the markup. That makes it easier to access the .ClientID property of both the controls.

Collectives™ on Stack Overflow

Pass Multiple Controls to Javascript Function in WebUserControl

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related