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
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.
This question has an accepted answers - jump to answer
Answers
Interesting, thanks for posting this. I would have expected that to work, given how similar it is to this example.
Is
thisthetdcell in the event handler?If you are able to create a test case, that would be really useful.
Thanks,
Allan
Ok, will try to setup a test suite, perhaps as late as Monday/Tuesday next week.
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.logicSourcecheck and just usechanged.Allan
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
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/
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:
I made two changes:
1) Addressed the error:
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
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.
Curious! Glad to hear it is working now though
.
Allan