Pass name of function to execute in parameter using jQuery

Question

I have a function that is being called when a tab is clicked in HTML. I want to pass a function name unique to each tab in the onClick() action of that tab, and the specific function populates the HTML content of the tab space. My code thus far:

When I try to execute it, I get :

selectedFunction is not a function

And thats right! selectedFunction is not a function, its a variable containing the name of the function. How do I call the function who's name is contained in that variable? I'm testing with warehouse_availability.

See here:

<html>
<head>
<script>
function form_selectTab(selectedTab, selectedFunction, item_id){
    $('.form_tab').css('background-color', 'rgb(222,222,222)');
    $(selectedTab).css('background-color', 'white');
    $('#form_tabSpace').html(selectedFunction(item_id));
}
function warehouse_availability(item_id){
    return('This is warehouse availability for ' + item_id);
}
</script>
</head>
<body>
<div>
    <table style="width: 100%; border-collapse: collapse;" cellspacing="0" cellpadding="0">
        <tr>
            <td class=form_tab onclick="form_selectTab(this, 'warehouse_availability', 'Items Name');">
                Warehouse availability
            </td>
            <td class=form_tab onclick="form_selectTab(this, 'manufacturer_data', 'Items Name');">
                Manufacturer data
            </td>
            <td class=form_tab onclick="form_selectTab(this, 'replacement_skus', 'Items Name');">
                Replacement SKUs
            </td>
            <td class=form_tab onclick="form_selectTab(this, 'similar_items_in_stock', 'Items Name');">
                Similar items in stock
            </td>
            <td class=form_tab onclick="form_selectTab(this, 'pricing', 'Items Name');">
                Pricing
            </td>
            <td class=form_tab onclick="form_selectTab(this, 'special_quotes', 'Items Name');">
                Special Quotes
            </td>
        </tr>
        <tr>
            <td colspan=6 id="form_tabSpace">
            </td>
    </table>
</div>
</body>
</html>

If it is a global function, it is a property of the `window` object, so you can do `window[selectedFunction](item_id);`. — John S, Jul 01 '16 at 22:20
I learned that this is the right way to do it essentially. See Barmar's answer. I also update the contents of the appropriate object inside the function, rather than returning the functions result into the object's .html property. — user1955162, Jul 02 '16 at 01:08

score 2 · Accepted Answer · answered Jul 01 '16 at 22:29

2

Function names are variables, not strings, they shouldn't be put in quotes.

        <td class=form_tab onclick="form_selectTab(this, warehouse_availability, 'Items Name');">

answered Jul 01 '16 at 22:29

Barmar

741,623
53
500
612

I just realized I went about this all wrong and you are right! The function should set the content of the TD, not the other way around. Thanks! – user1955162 Jul 01 '16 at 22:36

score 0 · Answer 2 · edited May 23 '17 at 10:28

0

The variable selectedFunction is a string so you should call it as :

window["function_name"](arguments);

So in you case it will be :

window[selectedFunction](item_id);

Take a look to This post.

Hope this helps.

edited May 23 '17 at 10:28

Community

1
1

answered Jul 01 '16 at 22:20

Zakaria Acharki

66,747
15
75
101

Pass name of function to execute in parameter using jQuery

2 Answers2