How to update a table cells responsive modal equivalent

ButchNZ

I'm updating a table cell with:

$table.cell($('#UserRow'+id), 3).data(event.detail.data.notifications);

This updates the cell perfectly when viewing the table on a big screen. It doesn't update the (responsive) modal version of the cell.

I've also tried:

$table.cell($('#UserRow'+id), 3).data(event.detail.data.notifications).draw();

$table.cell($('#UserRow'+id), 3).data(event.detail.data.notifications).invalidate().draw();

I read this post from 2020. Still relevant or am I doing it wrong?

The contents of event.detail.data.notifications is HTML if that matters. I've changed it to a string to test with no change.

kthorngren

$table.cell($('#UserRow'+id), 3).data(event.detail.data.notifications).draw();

Looks like this should work. Are you updating the responsive modal while its open?

Assuming you want to update when the modal is open I built this example using your code snippet slightly modified.
https://live.datatables.net/giziveku/1/edit

The City is updated while the modal is open.

I read this post from 2020. Still relevant or am I doing it wrong?

Not sure if its still relevant but it was 3 years ago and Datatables/Responsive have had many updates since and may have fixed this issue. Are you using an old version of either?

If you still need help then please post a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

ButchNZ

Hi Kevin, thanks for responding.

It's when the modal is open and I click the buttons that are in a table cell.

I have two buttons in a table cell. When the table is full size, clicking them:

The changes (toggling between green/grey) are reflected in the table and if I make the screen smaller now an open the modal the changes are reflected there too:

Perfect!

However when the modal is open and I click the buttons nothing is changed.

If I close the modal, and make the screen bigger so the full table displays, the icons have actually changed though:

So the cell seemed to update but not the modal view of it. If I then make the table smaller again, open the modal, I see the buttons have now changed in there too:

The only problem is clicking the buttons from the modal doesn't update the modal view of the buttons.

Not sure if its still relevant but it was 3 years ago and Datatables/Responsive have had many updates since and may have fixed this issue. Are you using an old version of either?

Datatables 1.13.1. Responsive 2.4.0

If you still need help then please post a link to your page or a test case replicating the issue so we can help debug.

It's an authenticated Laravel Livewire thing. I can try to make a easier to reproduce test. Or can email a link and creds?

kthorngren

Sounds like you are saying you have buttons within the table rows and when displayed in the responsive modal the click event handlers don't fire. Is this correct? If so you probably need to use a different selector. Here is a simple example:
https://live.datatables.net/qemodapi/1551/edit

One selector works when the buttons are normally displayed and the other works when the buttons are displayed in the modal.

We will need a test case (you can send Allan a direct PM with login info) to help determine the proper selectors.

Kevin

ButchNZ

I do have buttons in the rows and the click handlers do fire when clicked in the modal. I can see they work in the console and also because clicking the buttons in the modal then making the table big again the buttons have changed.

I wonder if it's possibly in the responsive renderer. The code for the renderer is:

    type: 'column',
    renderer: function (api, rowIdx, columns)
    {
        var data = $.map(columns, function (col, i)
        {
            return col.title !== '' || col.title == 'id' ?
            '<tr>' +
                '<td>' + col.title + ':</td> ' +
                '<td>' + col.data + '</td>' +
            '</tr>'
            : '';
        }).join('');

        return data ? $('<table class="table"/><tbody />').append(data) : false;
    }

Should col.data be updated here when

$relatedUserTable.cell($('#UserRow'+event.detail.data.id), 2).data(event.detail.data.notifications).draw();

is ran?

ButchNZ

This seems to be my issue.

Test case: https://live.datatables.net/fogepoki/1/edit?html,js,output

Unfortunately (for me) this is working as expected... I'll check my code.

ButchNZ

Updating to responsive 2.5.0 fixed this.

allan

Awesome - thanks for letting us know.

Allan