onClientClick calling Javascript Function, can't pass parameter

Question

I'm currently working on a project using the Ajax Tabs control in ASP.NET. My language for this project is VB.NET. I'm trying to take advantage of the "OnClientClick" event on the tabs. I'm populating the tabs using data from a database, and I'm using a VB Function to actually create the tabs. The VB code is as follows:

Protected Sub makeTab(ByVal categoryName As String, ByVal categoryId As String)

            Dim label As New Label
            label.Text = categoryName
            Dim tab As New AjaxControlToolkit.TabPanel
            tab.Controls.Add(label)
            tab.HeaderText = categoryName
            tab.OnClientClick = "display_alert(" + categoryId + ")"

            tcResultSet.Tabs.Add(tab)
            'Next
            For x As Integer = 1 To tcResultSet.Tabs.Count
                If tcResultSet.Tabs(tcResultSet.Tabs.Count - x).HeaderText = "Tab0" Then tcResultSet.Tabs.RemoveAt(tcResultSet.Tabs.Count - x)
            Next


        End Sub

This function is called for every record that the database returns.

In the ASPX page, the tab container is:

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePartialRendering="true" />
                            <asp:TabContainer ID="tcResultSet" runat="server" AutoPostBack="true" ScrollBars="auto" >
                                <asp:TabPanel ID="tbTab0" runat="server" HeaderText="Tab0" />
                            </asp:TabContainer>

and my javascript function is:

<script type="text/javascript" >
    function display_alert(categoryNumber) {
        window.alert("Hello! You clicked a tab");
    }
</script>

and it is placed inside of my page head at the top of the page. As you can see, I'm currently not even using my variable inside my Javascript function, but I will. Currently, this code does not work. It works if I remove the variable from the Javascript function definition, and if I call my Javascript function (from my VB) like "display_alert". It will not work if I include "()" after the function name. Is there any way around this? Any way to make this work properly?

So if you use `tab.OnClientClick = "display_alert()"`, that doesn't work? Also, let me suggest that you don't use `OnClientClick` to set inline event handlers, and instead bind them unobtrusively with JavaScript; you can give your elements a specific `class` attribute and find them that way. This can be done in an event when the DOM is ready (such as `window.onload`), and you can access the `categoryId` by setting a `data-*` attribute in your VB. — Ian, Aug 15 '13 at 15:07
Yes, using tab.OnClientClick = "display_alert()" does not work. — user2233255, Aug 15 '13 at 19:45
Well, if Tab #1 is clicked, then I need to know in my Javascript function that Tab #1 was clicked, not Tab #2 or anything. Can I know that if I use Javascript to bind the method call? — user2233255, Aug 15 '13 at 19:53

score 0 · Answer 1 · answered Aug 16 '13 at 12:19

0

I thought that the customer's spec for this app required AJAX tabs, after speaking with them, they were open to other options. Now, I'm dynamically creating HTML buttons and am able to call my Javascript that way without issue. Problem resolved.

answered Aug 16 '13 at 12:19

user2233255

53
1
6

score 0 · Answer 2 · edited Oct 15 '13 at 15:20

The event handler attached to OnClientClick can't have a parameter. To make this work properly you need to wrap your code in a function, e.g. in Javascript would be

tab.OnClientClick = function () {alert('my message here');}

This works in the markup too, something like

<asp:TabPanel ID="myTab" runat="server" OnClientClick="function (){alert('this works');}">

I think it's to do with the signature for event handlers. When assigning to OnClientClick your event handler will be tagged on to the already existing event handler "under the bonnet" - if they don't have the same signature you'll get run time errors.

onClientClick calling Javascript Function, can't pass parameter

2 Answers2