Editor stops working after table ajax update

transporter_ii

OK, I have everything working using the Editor for inline edits, except this one thing. I'm not using any ajax built into the DataTables. I'm working with Alpine.js and it worked out much easier to get the data through it and pass it to a function that built the DataTable. This has all worked just fine, until this.

What I'm doing is after an update, it hits the server and downloads the updated table data and refreshes the table. It's a shopping cart, and this way the totals, taxes, etc, can be calculated on the server and all the DataTable has to do is display it.

What happens is, all the updates work, it downloads the data and refreshes the table -- all the data is correct --, and then the editor stops working, and it won't work again until the page is reloaded.

The error is: TypeError: o[r[0]] is undefined

What I have tried is: setting the table to null before a refresh. Just clearing the table using table.clear. Not clearing the table at all before rebuilding it. I still get the same error.

I'm initiating the editor like this:

 // Activate an inline edit on click of a table cell
            tblCart.on('click', 'tbody td:not(:first-child)', function (e) {
                editor.inline(this);
            });

            const editor = new DataTable.Editor({
                idSrc: 'RowId',
                fields: [
                    {
                        label: 'Quantity',
                        name: 'Quantity'
                    },
                    {
                        label: 'SalePer',
                        name: 'SalePer'
                    },
                    {                        
                        name: 'ProductId'
                    },
                ],
                table: tblCart,
                formOptions: {
                    inline: {
                        onBlur: 'submit',
                        submit: 'all'
                    }
                },
            });

Is there some trick to reinitialize it after the table it's attached to gets its data refreshed?

Thanks,

kthorngren

it downloads the data and refreshes the table

How are you doing this? Maybe post the relevant JS code showing how the data is fetched and updated. Are you destroying and reinitializing the Datatable?

Kevin

transporter_ii

So, it is pretty much either an Alpine.js event or the editor.on('postSubmit', event that are fetching the data, either through Alpine.js or a vanilla javascript function. The data is passed to a function that builds the table:

function dtCartView(data, totals) {
            
                tblCart = $('#tbl-cart').DataTable({
                processing: true,
                serverSide: false,
               ....

Everything associated with the data is correct, and everything associated with the Editor works if I stop refreshing the table after an update (except that totals and taxes are now wrong after editing).

As per above, I have tried setting the table to null before refreshing the table. I've tried using table.clear() before refreshing the data. I've tried doing nothing and just rebuilding it with the updated data.

All three of those things still give me the error: TypeError: o[r[0]] is undefined. After that error, the Editor never works again until I reload the page.

So, when I was attempting to roll my own inline-editor, I had a similar issue. What I had to do was reinitialize the jquery every time I rebuilt the table. I did this in "initComplete" every time the table was rebuilt.

I would kind of think that somehow the Editor needs to be reinitialized after the table is rebuilt, but I haven't seen exactly how to do that anywhere.

In searching, the editor only working once seems like a common issue, but none of the solutions really fit me.

Thanks

kthorngren

sorry its still not clear to me exactly how you are populating the table/Datatable. If you are using clear() and rows.add() then you probably won't need to reinitialize the Datatable. If you are rewriting the HTML table then you probably will want to use destroy() before overwriting the HTML table then init Datatbles again. There are lots of ways to do this depending no what exactly you are doing.

You should just be able to initialize a new Editor instance if you are reinitializing Datatables. I put together this simple example to demonstrate, it uses destroy.
https://live.datatables.net/guwafemu/580/edit

The order you reinit everything might be important. If this doesn't help then please post a link to a test case replicating the issue so we can help debug. Feel free to update my example to show your code flow.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

allan

Is Alpine.js rendering your table? If so, that isn't going to work - you can't have both DataTables and another libraries trying to control the same DOM elements, they will conflict as they both try to update the DOM and don't expect another library to be changing it from under them.

If however, you are Ajax submitting the data and the server is returning the data in the format described here, then it should just work.

It could be that I need to look into writing an Alpine integration, similar to the Vue and React DataTable components.

Allan

transporter_ii

Is Alpine.js rendering your table?

No. It's just getting data and passing it to a function that is building the DataTable in the standard way. It's worked really well until I needed to use the Editor.

For example, I can put the DataTable in a modal and have Alpine.js fetch the data when the modal loads (using Intersect: https://alpinejs.dev/plugins/intersect).

I really like Vue, but the build process doesn't fit the use case in my scenario. Alpine.js works well.

allan

Are you able to give me a link to your page so I can take a look at it and see / debug what is going wrong. At the moment there isn't enough information for me to go on I'm afraid. You can PM me the link if you don't want to post it here in the public forum.

Allan

transporter_ii

So, I got it working. I spent a lot of time trying to destroy the DataTable and refresh the data. It didn't click with me to destroy the Editor. If I set the Editor to null before refreshing the data, the Editor gets reinitialized in the function that builds the DataTable. The error goes away and so far it looks like everything is working.

I'm using the onBlur: 'submit', so updates can be done without having to hit the enter key. If I open the editor and then click another editable field, I can get the error:

Uncaught TypeError: s[t] is undefined

It isn't a fatal error, though. I'll just assume it doesn't really like opening up input elements and then closing them by opening another input element.

If I really start doing a lot of clicking in an out of the editable fields, I can still occasionally get this error:

Uncaught TypeError: o[r[0]] is undefined

It is also not fatal and everything keeps working. Unlike the first error, I can't figure out exactly how to reproduce it. That's the same error where everything stopped working before, but this time everything seems to keep on working.

kthorngren

I updated my test case with onBlur: 'submit':
https://live.datatables.net/guwafemu/582/edit

I tested by clicking a cell, making a change and clicking another cell, etc. I did this a few times. I clicked the Reinit DT button and tried again. I',m not seeing those errors.

You haven't provided much information (meaning code or test case) to show how you are reloading the table data and reinitializing Datatables and Editor. How is apline updating the table? Possibly you are not cleaning up the environment properly causing the above errors.

I can't figure out exactly how to reproduce it.

Sometimes its difficult. Can you simulate what aline is doing in a test case?

Kevin

allan

There really should be no need to destroy the DataTable and the Editor instances just to get the data to update. None of the examples do that, and it does suggest to me that Alpine might be trying to control them DOM. Without more information it is impossible to say though.

Allan