Passing object and its methods to onchange function in Javascript

Question

I am using TableExport.js script to export an html table, and I need to export the data after I've filtered it by hiding the rows I don't want. TableExport's method .update() comes in really useful here, but I am having some problems to call it every time the data is filtered, which is associated to an onchange event. Here are the relevant pieces of my code:

$(function () {
    var exportedTable = $("#taskListTable").tableExport();
    exportedTable.update({
        // some options
    });

    $('body').on('change', '.filter', function (exportedTable) {
        // some code for filtering
        tableUpdate(exportedTable);
    });
})

function tableUpdate(table) {
    table.update({
        ignoreCSS: ["tr.tableexport-ignore", "tr.tableexport-ignore>td",
                    "tr.tableexport-ignore>th", "tr.hidden", "tr.hidden>td"]
    });
}

I keep getting an error of the type Uncaught TypeError: Cannot read property 'update' of undefined. I've been reading lots of threads (like this: Javascript passing object to function) and other info to understand the difference between passing by value and reference, but the more I read and try the more chaotic my mind is getting. So can anyone see what it is failing in my approach? - It's partly legacy code though, but I'm open to re-structure most of it if necessary.

I guess this is more a problem of JS misuse, so I hope this question will be useful both for people working with TableExport and people with similar JS issues. So I summon thee, JavaScript Jedis!

Change to $('body').on('change', '.filter', function () { will do! The object is already trapped in a closure so just use it! — ibrahim mahrir
– ibrahim mahrir, Commented Apr 7, 2017 at 20:34
Thank you! It worked! Do you know about any well-explained sources where I can dig further into closures? :) — jabadejat
– jabadejat, Commented Apr 7, 2017 at 20:44

guest · Accepted Answer · 2017-04-07 20:33:08Z

3

Event handler functions are called with an event object as the parameter. You probably just wanted to access exportedTable from the scope, rather than accepting it as an argument.

answered Apr 7, 2017 at 20:33

guest

6,75833 silver badges48 bronze badges

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

1 Comment

jabadejat Over a year ago

Nicely explained, and worked as a charm. Such an stupid error though hehe

Vasili · Accepted Answer · 2017-04-07 20:36:07Z

0

As @guest said, you simply have to remove exportedTable from parameters:

$('body').on('change', '.filter', function () {
    # some code for filtering
    tableUpdate(exportedTable);
});

answered Apr 7, 2017 at 20:36

Vasili

9057 silver badges12 bronze badges

1 Comment

jabadejat Over a year ago

Cheers! That was my mistake :)

Collectives™ on Stack Overflow

Passing object and its methods to onchange function in Javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related