Editor timing issue

TomB2015

Hi there,

There seems to be an issue (possibly timing related) with the DataTables Editor when operating in server-side mode.

To reproduce the issue:

1. Click on a cell to begin inline editing of that cell.
2. Click the Delete (editor_remove) button added via TableTools whilst the cell is still in inline editing mode.
3. The Delete modal confirmation is displayed but after a split-second the message text disappears!

The rest of the modal confirmation (i.e. Delete header caption and OK button) looks correct - only the message text disappears.

The same issue can be seen when using a Delete control added to each row in the table (i.e. https://editor.datatables.net/examples/simple/inTableControls.html).

I am using the latest version of Editor (1.4.1). See DataTables Debug ivejoz for more config details.

Please get back to me asap on this or if you have any questions. I can also email a screenshot as I don't think I can post it on here.

Regards,
Tom

allan

Hi Tom,

Thanks for letting me know about this. It does indeed look like a timing issue - I suspect that the close event is being triggered from the inline edit shortly after the remove box has been shows. That shouldn't happen of course!

I will investigate further a get back to you.

Regards,
Allan

allan

Hi,

I've just been looking into this and the issue is actually deceptively simple. In the inline table controls example, for the delete I have:

        editor
            .message( 'Are you sure you wish to remove this record?' )
            .buttons( 'Delete' )
            .remove( $(this).closest('tr') );

Note the order - remove() is called last. This is a problem in the sequence because it will also clear the current inline editing, this in turns clears the form's dynamic information (error messages and the like).

Since the message was setup while the form was still in inline mode, it also erases that!

The fix is simply to call the remove() method before message() or buttons():

        editor
            .remove( $(this).closest('tr') )
            .message( 'Are you sure you wish to remove this record?' )
            .buttons( 'Delete' );

That will cancel the inline edit immediately and allow the message and buttons to be shown as expected.

I will be updating the demo with that change.

Let me know how you get on with that!

Regards,
Allan

TomB2015

Hi Allan,

Thanks for getting back to me.

Unfortunately that hasn't fixed it - I've tried the following based on your response:

editor.remove($(this).closest('tr')).title("Delete").message('Are you sure you want to delete this record?').buttons('Delete');

Regards,
Tom

allan

Odd - that fixes it for me in my example. Could you possibly link me to your example so i can try it out? Are you using submitOnBlur perhaps, or some other configuration that is not shown in the example on my site?

Allan

TomB2015

Hi Allan,

Yes, I am using submitOnBlur - apologies for not pointing this out from the outset.

Regards,
Tom

allan

Hi Tom,

Super - thanks for the confirmation. I'm not sure if you are interested, but what is causing the problem with submitOnBlur enabled is that when remove() is called it will submit the form - but that is asynchronous, so the message set by message() is being removed after the submit!

The way to address this is to use the second form of the main editing methods (remove() in this case) whereby you can pass in the title, etc, in an form-options object.

The inline table controls example would therefore become:

    // New record
    $('a.editor_create').on('click', function (e) {
        e.preventDefault();

        editor.create( {
            title: 'Create new record',
            buttons: 'Add'
        } );
    } );

    // Edit record
    $('#example').on('click', 'a.editor_edit', function (e) {
        e.preventDefault();

        editor.edit( $(this).closest('tr'), {
            title: 'Edit record',
            buttons: 'Update'
        } );
    } );

    // Delete a record
    $('#example').on('click', 'a.editor_remove', function (e) {
        e.preventDefault();

        editor.remove( $(this).closest('tr'), {
            title: 'Delete record',
            message: 'Are you sure you wish to remove this record?',
            buttons: 'Delete'
        } );
    } );

I will update the example with this code and publish it on the site tomorrow with Editor 1.4.2.

Regards,
Allan

TomB2015

Hi Allan,

I get the following script error now:

Line: 16
Error: Unable to get property 'ID' of undefined or null reference

This is the code snippet I am using:

editor.remove($(this).closest('tr'), { title: "Delete", message: "TESTING", buttons: 'Delete'});

Is this dependent on using Editor 1.4.2?

I only get the error when I click the Delete inline table control when a cell is currently being inline edited. It works fine otherwise.

Regards,
Tom

allan

Is this dependent on using Editor 1.4.2?

No that should work just fine with 1.4.1. However, I've just remembered that you are using server-side processing. Try:

editor.remove( table.row( $(this).closest('tr') ).index(), {
  title: "Delete",
  message: "TESTING",
  buttons: 'Delete'
});

The reason for this is that the redraw that server-side processing will enforce when the form is submitted will mean that the tr element passed in no longer exists after the draw. Passing in an index resolves that since the index is still valid.

Regards,
Allan

TomB2015

Hi Allan,

Thanks for this - the Delete inline table control now seems to be working.

The issue still remains for the 'main' Delete button (editor_remove) added by TableTools - can you advise on this please.

Regards,
Tom

allan

Hi Tom,

Good to hear that resolved it! The issue is basically the same in the TableTools buttons as they also use chained API calls to set up the instance.

In the Editor source if you look for:

            editor
                .message( question.replace( /%d/g, rows.length ) )
                .title( i18nRemove.title )
                .buttons( buttons )
                .remove( rows );

and replace with:

            editor.remove( rows, {
                message: question.replace( /%d/g, rows.length ),
                title: i18nRemove.title,
                buttons: buttons
            } );

That should resolve the issue. rows is already indexes, so the server-side processing part from above shouldn't be a problem.

This will be in 1.4.2 as well (and for the other button types).

Regards,
Allan

TomB2015

Hi Allan,

I've just tried this (making the change you detailed in my copy of the 1.4.1 source file) and again it seems to work!

I would prefer to not make any changes myself but wait for the 1.4.2 source if this is being released tomorrow?

Regards,
Tom

allan

Yes - release tomorrow that will address this and an issue with row deletion.

Regards,
Allan

TomB2015

Thanks Allan - I will keep an eye out for the new release.

Regards,
Tom

TomB2015

Hi Allan,

I've downloaded the 1.4.2 editor and can confirm that the issues have been resolved.

Thanks for your help.

Regards,
Tom

allan

Hi Tom,

Excellent to hear. Thanks for the feedback.

Regards,
Allan