Is there any way to delay editing for the cell to which I click until the table reloading have not b

Hostmaster

I am using server-side processing for dataTables with inline editing. Editor option onBlur is set to "submit". When I finish editing my cell, and then click to another editable cell. I will see two input controls. One,for the cell that have just been edited. Another, for the cell to which I have clicked.
Then both input controls are disappearing. First input is closed because of finishing onBlur event. Second input is disappeared because of table reloading. Sometimes I get the error "TypeError: node is undefined" in line 2754 of dataTables.editor.js. Is there any way to delay editing for the cell to which I click until the table reloading have not been done?

allan

Hi,

The Javascript error might come about from passing the node to the inline() method - for example:

    $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );

That doesn't really work when using server-side processing because the table will redraw and destroy the old node. So you would want to pass in the cell index (cell().index()) - for example:

    $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( table.cell( this ).index() );
    } );

where table is the DataTable API instance for the table.

I think this should address both issues you are seeing. If not, are you able to give me a link to a test case showing the problem?

Thanks,
Allan

Hostmaster

Thank you very much for your advise. I have changed

$('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
    editor.inline( this );
} );

With

$('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
    editor.inline( table.cell( this ).index() );
} );

The error "TypeError: node is undefined" disappeared. It seems me everything fine with textboxes. But it is not help in case when I have "textbox" and "select" editors. I load options into "select" when the user clicks on cell and then I activate inline editing. The question is still opened. Could you check my sample here

Steps to reproduce:

1. Click on cell in the Description column, change the value
2. Click on cell in the Email column

You will see that both edit controls (textbox and select) are disappeared. The user should click on the cell twice to edit value in the second cell

Should be only one click to edit cell. Could you help me to solve it?

allan

Hi,

Thanks for the details and the link - that was really instrumental in finding the issue. The issue is a bug in Editor I'm sorry to say, which is triggered when onBlur:'submit' and submit:'changed' is used with inline editing and DataTables is in server-side processing mode.

Basically the issue is that Editor is waiting for the DataTable to redraw, but that doesn't happen since nothing has been submitted if there are no changes!

I've committed the fix and it will be available in the next release, however, if you want to apply it immediately, its a fairly simple fix. Search the Editor Javascript file for:

if ( that.s.table && table.settings()[0].oFeatures.bServerSide ) {

and replace with:

if ( that.s.processing && that.s.table && table.settings()[0].oFeatures.bServerSide ) {

Regards,
Allan

Hostmaster

Hi Allan

I have tried to apply the fix immediately. I replaced

if ( that.s.table && table.settings()[0].oFeatures.bServerSide ) {

with

if ( that.s.processing && that.s.table && table.settings()[0].oFeatures.bServerSide ) {

It seems me it takes no effect. The problem is reproduced. Could you please check my sample one more time?

allan

Did you clear your browser's cache? It appears to work correctly for me now after I reloaded the file.

Regards,
Allan

Hostmaster

Hi Allan

Yes of course, I have cleared my browser's cache

allan

Thanks for the clarification.

It looks like there is a timing error here - a bit of a race condition which is why I didn't see it before, but I can see the issue just now and understand what the problem is.

Could you replace the entirely Editor.prototype._tidy method with the following please:

Editor.prototype._tidy = function ( fn )
{
    var that = this;
    var submitComplete = function () {
        // If server-side processing is being used in DataTables, first check
        // that we are still processing (might not be if nothing was submitted)
        // and then wait for the draw to finished
        var table = new $.fn.dataTable.Api( that.s.table );
        if ( that.s.processing && that.s.table && table.settings()[0].oFeatures.bServerSide ) {
            table.one( 'draw', fn );
        }
        else {
            setTimeout( function () {
                fn();
            }, 10 );
        }
    };

    if ( this.s.processing ) {
        // If currently processing, wait until the action is complete
        this.one( 'submitComplete', submitComplete );

        return true;
    }
    else if ( this.display() === 'inline' || this.display() === 'bubble' ) {
        // If there is an inline edit box, it needs to be tidied
        this
            .one( 'close', function () {
                // On close if processing then we need to wait for the submit to
                // complete before running the callback as onBlur was set to
                // submit
                if ( ! that.s.processing ) {
                    // IE needs a small timeout, otherwise it may not focus on a
                    // field if one already has focus
                    setTimeout( function () {
                        fn();
                    }, 10 );
                }
                else {
                    // Need to wait for the submit to finish
                    that.one( 'submitComplete', submitComplete );
                }
            } )
            .blur();

        return true;
    }

    return false;
};

I believe that will resolve the issue.

Thanks,
Allan

Hostmaster

Hi Allan

"that" is undefined for submitComplete function

allan

Sorry - I've updated the code above with the var that = this; statement moved as required.

Allan

Hostmaster

Hi Allan

Thank you for your update. I have replaced _tidy function and then I have cleared cache in all browsers.

It works better in Microsoft Edge and Chrome.
When I finish editing Description and then click on cell in Email column. I do not see two edit controls like it were before. But sometimes edit control is not shown after clicking on editable cell. Therefore the user should still click twice on cell to change the value in it. It seems me it works unstable.

I am observing the different situation in Firefox 43.0.2. When I finish editing Description and then click on cell in Email column. I always see two edit controls. Then both edit controls will be closed after the data reloading. The user should always click twice to edit value in Email column, if the value in description column have been previously changed.
So the problem left in Firefox 43.0.2

allan

Sorry about this - I'm having trouble recreating the timing issue locally!

Could you try this which I believe will address the issue:

Editor.prototype._tidy = function ( fn )
{
    var that = this;
    var dt = this.s.table ?
        new $.fn.dataTable.Api( this.s.table ) :
        null;

    var ssp = false;
    if ( dt ) {
        ssp = dt.settings()[0].oFeatures.bServerSide;
    }

    if ( this.s.processing ) {
        // If currently processing, wait until the action is complete
        this.one( 'submitComplete', function () {
            // If server-side processing is being used in DataTables, first
            // check that we are still processing (might not be if nothing was
            // submitted) and then wait for the draw to finished
            if ( ssp ) {
                dt.one( 'draw', fn );
            }
            else {
                setTimeout( function () {
                    fn();
                }, 10 );
            }
        } );

        return true;
    }
    else if ( this.display() === 'inline' || this.display() === 'bubble' ) {
        // If there is an inline edit box, it needs to be tidied
        this
            .one( 'close', function () {
                // On close if processing then we need to wait for the submit to
                // complete before running the callback as onBlur was set to
                // submit
                if ( ! that.s.processing ) {
                    // IE needs a small timeout, otherwise it may not focus on a
                    // field if one already has focus
                    setTimeout( function () {
                        fn();
                    }, 10 );
                }
                else {
                    // Need to wait for the submit to finish
                    that.one( 'submitComplete', function () {
                        // If SSP then need to wait for the draw
                        if ( ssp ) {
                            dt.one( 'draw', fn );
                        }
                        else {
                            setTimeout( function () {
                                fn();
                            }, 10 );
                        }
                    } );
                }
            } )
            .blur();

        return true;
    }

    return false;
};

Thanks,
Allan

Hostmaster

Hi Allan

Thank you for your update. I have replaced _tidy function and then I cleared cache in all browsers.

Firefox: I click on cell in Description column and change the value in it. Then I click on cell in same column but in the next row. I am expecting to see text area in the cell to which I have clicked. But It is not. I have to click on the cell one more time to edit the value in it.

Chrome: It works better than in other browsers. It almost perfect. But I have noticed the same problem that were described above for Firefox. The problem is reproduced rarely.

Edge: I found the same problem that were described above for Firefox. The problem is reproduced more often than in Chrome

allan

Thanks for the update. One more change - I've just modified the code block above (the if condition on line 49 is the only thing to change) - could you possibly update your code to match.

Many thanks,
Allan

Hostmaster

Hi Allan.

Now it works fine.
Thank you

allan

We got there in the end! Thanks for your forebarance with this issue. The fix will be in the 1.5.5 release of Editor which I expect to be available at the end of this month.

Allan