Datatables Editor 1.10 Inline Edit Will Not Re-Open cell when submit on blur is enabled

vman

I'm having trouble messing with tabbing through columns and datatables re-opening the cell for edit.
Below is the code I am working with, along with the submit.

// Inline Editing
    $(mainTable).on('click', 'tbody td.inlineEdit', function (e) {
        if(!$(this).hasClass('dropdownEdit')) 
        {
            editor.inline(this, {
                submitOnBlur: true
            });
        }
        else 
        {
            editor.inline(this);
            $(this).on('change', function() {
                editor.submit();
            });
        }
        cellIdx = $(this).children()['context'];
        curCellVal = $('div.DTE_Field_Input > input').val() == undefined ? $('div.DTE_Field_Input > select').val() : $('div.DTE_Field_Input > input').val();
    });
// Tab through columns
editor.on('open', function() {
     // Listen for a tab key event
    $(document).on('keydown.editor', function(e) {
        if (e.keyCode === 9) {
            e.preventDefault();

            // Find the cell that is currently being edited
            var cell = $('div.DTE').parent();

            if (e.shiftKey && cell.prev().length && cell.prev().index() !== 0) {
                // One cell to the left (skipping the first column)
                // editor.submit();
                cell.prevAll('.inlineEdit:first').click();
            } else if (e.shiftKey) {
                // Up to the previous row
                // editor.submit();
                cell.parent().prev().children().prevAll('.inlineEdit:last').click();
            } else if (cell.next().length && cell.next().index() !== 12) {
                // One cell to the right
                // editor.submit();
                cell.nextAll('.inlineEdit:first').click();
            } else {
                // Down to the next row
                cell.parent().next().children().nextAll('.inlineEdit:first').click();
            }
        }
    });
    }).on('close', function() {
        $(document).off('keydown.editor');
    }).on('preSubmit', function(e, data, action) {
        data.table = eTable;
        if (action === 'remove')
            data.date = dateDelete;
        else if (action === 'create') {
            data.count = dataCount;
            data.date = dateDelete;
        }
        if(action === "edit") {
            var edited = data.data;
            selectedField = String(data.field);
            var column = data.columnId;
            var row = data.id;
            var editFieldName = '#DTE_Field_' + selectedField;
            var inCell = $(editFieldName).val();
            var dataString = 'changedValue=' + edited[selectedField] + '&rowId=' + data.id + '&columnName=' + selectedField + '&rowDate=' + data.data.date + '&columnId=' + column;
            if(curCellVal != inCell) {
                $.ajax({
                    type: "POST",
                    url: "/ajax/inventoryEditor.php",
                    data: dataString
                });
            }
        }
        data.page = 'inventory';
        data.username = sessuname;
        data.guid = sessguid;
    });

I modified the tab through columns to skip certain rows so you can have dynamic mixes of which columns you want to be enabled when tabbing and editing. So nextAll was the fix for that.

allan

Is this the same as your other thread: http://datatables.net/forums/discussion/22353 ?

So I understand the problem correctly, the code from the example works as expect, but when you modified it to skip over some columns it doesn't work. Is that correct?

I suspect you might need to modify the if conditions to also check if there is a cell that can be tabbed to.

Allan

vman

They are similar, but it is a different issue where the cell will not open up again. For some reason it just stays closed regardless of what I do, unless I refresh.

This is an issue where when I tab to the next column, submit the information, and then try to open up the cell is opens for a split second and closes again. But that is the reason for using nextAll() because that handles looking for the next class to jump to, it does it on any cell though regardless. I'll mess with the if and see what happens.

vman

Could it be an issue with what I'm returning? I strictly return the cell that was edited, that is how I managed makeEditable work with the last version of DataTables, is that a better way of going about it? If not, I'll start working on a work around with the information I have. I just can't seem to figure out why it closes automatically, could it be a refresh issue?

vman

I lied, my whole life is a lie actually. Finding out any other editor instances effect things real time, so now I have new issues that I will open another thread for.

Basically I had an on click event that would run after editor is done running 'edit', so it would do an ajax.reload and mess everything up, but I only want that to run on the click so I would have to create a new instance? Or something similar to that nature.

allan

Basically I had an on click event that would run after editor is done running 'edit', so it would do an ajax.reload and mess everything up

I see - so when you do a click, you want to enter edit mode and then refresh the data? Can you do it the other way around: refresh the data and then enter edit mode?

The problem that you are hitting is that a reload will destroy the DOM nodes from before and Editor uses those nodes to keep track of what is going on.

Refreshing the data just before edit sounds like a good idea for a feature that is core to the library though - thanks for bringing this up. I'll take a look at how that might be implemented in future.

Regards,
Allan