monitorEvents not catching DataTable's events

ayz

I'm troubleshooting DT's events from Chrome Dev Tools.

After the table is displayed (with Select extension), I type this in console

monitorEvents(document.querySelector('#example_wrapper'), 'select.dt')

Nothing happens. Same thing with 'select' event; but with:

monitorEvents(document.querySelector('#example_wrapper'), 'click')

each click event is displayed in the console. This is happening with both v 1.10 and 2.

What am I doing wrong?

allan

Nothing - they just aren't native events, so monitorEvents won't see the events in question.

Perhaps you can post a test case showing the issue you are seeing so I can offer some help?

Allan

ayz

I'm trying to create a React component around DT (modelling after your Vue component) but need the events to bubble out. For some reason, adding event listeners to the ref within the component has no effect. So that informed me troubleshooting at dev tools level first.

ayz

The strange thing is in dev tools, I see the "select-dt" in the Event Listeners tab. So React is setting it up correctly. Why its not responsive is the mystery.

allan

In the Vue library they had to be re-exported which was a bit of a pain. Not sure if React will need something similar.

A React library is getting near the top of my list for new dev work (currently in second position)! So I'd be most interested in how you get along with it.

Allan

ayz

@allan: I presumed to re-export, I first needed to detect which is where I got stuck.

Just experimented and stumbled on something. It appears even though I initialized using non-jquery method, it's still returning a jquery event object. Hope I stated that right.

Here's what I had in the wrap-around component earlier:

// preceding code

new DataTable(dtRef.current, {
            columns: [
                { title: 'Name' },
                { title: 'Position' },
                { title: 'Office' },
                { title: 'Extn.' },
                { title: 'Start date' },
                { title: 'Salary' }
            ],
            data: dataSet,
            select: {
                style: 'single'
            }
        });

dtRef.current.addEventListener('select.dt', handleEvent) //handleEvent just console.logs "hello"

// when above event listener didn't work, I replaced with the following hack:

const rf = document.querySelector('#example_wrapper')
rf.addEventListener('select.dt', handleEvent);

 // rest of code

Neither worked. So I assigned the initialized DT to a variable thus const rf = new DataTable(dtRef.current, {...

Then rf.on('select', handleEvent)

This worked perfectly leading to my conclusion.

rf.addEventListener('select.dt', handleEvent) gives the error rf.addEventListener is not a function

However I prefer to not use jquery directly in React as recommended, if possible. What am I overlooking here in terms of getting a jquery event back?

allan

It is a custom event, so addEventListener won't see them (a frustrating I've banged my head against as well). I don't think there is an alternative to using jQuery here. DataTables has it as a dependency, so it won't increase your package size at all.

Allan

ayz

strange: I never came across the fact that it doesn't catch custom events in all my searches.

allan

I'm not really seeing much on the topic either, but there is this thread. I think I did something similar to figure it out - debugging in jQuery to see what was happening. It was a little while ago now though, so I might be making up memories

Allan