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
– John S, Commented Jul 1, 2016 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
– user1955162, Commented Jul 2, 2016 at 1:08

Barmar · Accepted Answer · 2016-07-01 22:29:05Z

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 1, 2016 at 22:29

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

1 Comment

user1955162 Over a year ago

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!

Community · Accepted Answer · 2017-05-23 10:28:57Z

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, 2017 at 10:28

CommunityBot

11 silver badge

answered Jul 1, 2016 at 22:20

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Collectives™ on Stack Overflow

Pass name of function to execute in parameter using jQuery

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related