monitorEvents not catching DataTable's events

monitorEvents not catching DataTable's events

ayzayz Posts: 58Questions: 20Answers: 1

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?

Answers

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • ayzayz Posts: 58Questions: 20Answers: 1

    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.

  • ayzayz Posts: 58Questions: 20Answers: 1

    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.

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • ayzayz Posts: 58Questions: 20Answers: 1
    edited May 17

    @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?

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • ayzayz Posts: 58Questions: 20Answers: 1

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

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

Sign In or Register to comment.