Editor 3 doesn't activate, but Editor 2 works flawlessly with the exact same code

henrik k · August 7

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
None
Description of problem:

We're in the process of updating to DT3 including Editor 3. The current status is that we are able to use DT3 with our code as expected. But the when function editor.inline( this ) is called when a user selects a row for editing doesn't lead to anything, not even an error message.

The Editor is initiated with this code:

editor = new DataTable.Editor( {
            table: '#' + domId,
            fields: dtData.fields ? dtData.fields : dtData.columns.map( col => ( { label: col.title, name: col.data, variable: col.type } ) ),
            formOptions: { inline: { submit: 'changed' } },
            idSrc: dtData.idSrc ?? dtData.rowId,
        } );

And the inline function is called like this:

targetTable.on( 'dblclick', 'tbody td', function ( event ) {
            event.preventDefault();
            if ( event.currentTarget.className.includes( 'editable' ) )
                editor.inline( this, { submit: dtData.logicSource === 'events' ? 'all' : 'changed' } );
        } );

The callback does get called, including the editor.inline function, but then nothing more happens.

When reverting back to DT2.3.8/Editor 2 everything works again.

I've currently not tried to create a test case for this, will try to do that later if needed.

allan · August 7

Interesting, thanks for posting this. I would have expected that to work, given how similar it is to this example.

Is this the td cell in the event handler?

If you are able to create a test case, that would be really useful.

Thanks,
Allan

henrik k · August 7

Ok, will try to setup a test suite, perhaps as late as Monday/Tuesday next week.

allan · August 7

I've just tried creating one: https://live.datatables.net/suzusuge/1/edit .

It seems to work okay. The only change I made to the inline editing event handler code was to strip out the dtData.logicSource check and just use changed.

Allan

henrik k · August 8

I'm not that used to live fiddling for creating test cases, sorry for that, I've now currently come so far on creating a test case. It doesn't work at all yet, but perhaps someone can lead me to getting the case working:

https://live.datatables.net/suzusuge/2/edit

henrik k · August 8

Sorry for spamming the thread a little, in the previous link my code got mixed with the original example. Look at this link instead:

https://live.datatables.net/suzusuge/3/

allan · August 8

The Fiddle thing can take a little bit of getting used to, and it is only useful for the most basic of cases! Stackblitz is a good alternative sometimes.

Updated example:

https://live.datatables.net/suzusuge/4/edit

I made two changes:

1) Addressed the error:

Uncaught Unable to find row identifier For more information, please refer to https://datatables.net/tn/14

Which was showing on the console by adding idSrc: 'identifier' to the Editor initialisation.

2) Removed the individual loading of Editor, since it is already in the CDN URL (doubt this made any difference, but just something I spotted).

Allan

henrik k · August 9

Hi again, truly appreciates that you took your time to help me get more comfortable with the live fiddle. The code I pasted there is just a small subset of our DataTables integration. After more fiddling, I was able to get my code working in the live fiddle. That lead to that I continued the fault checking on my side.

Previously in our code we were returning both the dataTable, in our case 'targetTable', as well as also the editor instance connected to the dataTable as an object to the caller function, e.g. return { dataTable: targetTable, editor: editor }. But after I simplified the code to only return targetTable and then call for the editor with targetTable.editor() from the caller function, everything started to work even on DT3.

Still don't understand why my previous code did work on DT2, but not on DT3. But the simplification on our code to only return the DataTable instance and not also a separate editor instance, that did solve my problem. In the end all good and thanks again.

allan · August 9

Curious! Glad to hear it is working now though .

Allan

henrik k · August 12

Related to this topic, it seems like this code:

targetTable.editor().field( 'action' ).input().on( 'change', function( event ) {

fires when the user activates a select for selection BEFORE the actual change actually occurred.

Is it possible to get an event AFTER the user has made a change on the select field?

allan · August 12

The reason that change will trigger when the form is displayed is that it needs to set the value of the field inputs - so there is a change that happens and it might be necessary to make changes in the form based on the default (for create) or existing (for edit) value.

What should be happening is that for automatic changes such as this, a second parameter will be passed to the event handler - so you can do:

editor.field('priority').input().on('change', function (e, data) {
  if (data && data.editor) {
    console.log('it was an automatic set');
  }
  else {
    console.log('user set value');
  }
});

Unfortunately, that doesn't appear to be working in Editor 3.0.0 due to a bug - apologies. I've committed the fix and it will be in the nightly build now, but if you have a local copy, find the following:

        input.trigger('change', { editor: true, editorSet: true }); // editorSet legacy

and replace with:

        input.trigger('change', true, [{ editor: true, editorSet: true }]); // editorSet legacy

That will allow the data parameter to be sent to the event handler.

This is the only change to Editor since 3.0.0, so I'll wait a day or two before releasing the change, just in case anything else crops up.

Thanks for letting me know about this.

Regards,
Allan

henrik k · August 12

Ah, thanks. I was tearing my (little) hair out to understand why the functionality we had did work in DT2 but not as exepected in DT3 all the way to the commit. Some of the faults were on my side, but in the end it didn't commit the data as expected when using DT3.

I'll download the nightly and reimplement the second data parameter from the event to be able to get if the event occurred before or after the user had selected a new value.

Editor 3 doesn't activate, but Editor 2 works flawlessly with the exact same code

Editor 3 doesn't activate, but Editor 2 works flawlessly with the exact same code

Answers