Editor not focusing on next field after tab (with data update)

dougm

Problem. If you tab from field to field everything works as expected. If you change a value and the data is submitted sometimes the next field behaves correctly and sometimes it is surrounded by the blue box and doesn't have focus.

What data are you supposed to return from the save? the table contents? nothing? The row?
I am refreshing the table on the submit success.

https://test.farmcastersoftware.com/fc/public/init.do

var theEditor;
$(document).ready(function() {
    loadFeedRequirementsTable(theEditor, "#feedRequirementsEntries", "feedRequirementsEntries");
});
function loadFeedRequirementsTable(theEditor, tableName, type){
    var errorField = tableName+"Error";
    theEditor = new $.fn.dataTable.Editor({
        ajax: {
            edit: {
                url: "${pageContext.servletContext.contextPath}/public/save.do"
            }
        },
        table: tableName,
        formOptions: {
            inline: {
                onBlur: 'submit',
                submit: 'allIfChanged'
            }
        },
        fields: [{name:"description"}, {name:"methodName", type:"hidden"}, {name:"paramType", type:"hidden"}, {name:"field1"}, {name:"field2"}]
    });
    theEditor.on('submitSuccess', function (e, json, data) {
        $(tableName).DataTable().ajax.reload();
    });
    $( 'input', theEditor.node() ).on( 'focus', function () {
          this.select();
    });
    table = $(tableName).DataTable( {
        dom: "frtip",
        searching: false,
        paging: false,
        info: false,
        sort: false,
        ajax: "${pageContext.servletContext.contextPath}/public/entries.do",
        columns: [
            { data: "description" , className:'dt-left' },
            { data: "field1", className:'dt-right' },
            { data: "field2", className:'dt-right' }
        ],
        order: [ 0, 'asc' ],
        keys: {
            columns: [1,2],
            keys: [ 9 ],
            editor: theEditor,
            editOnFocus: true
        },
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        "processing": true
    }); 
}

The Data

{
    "data": [
        {
            "DT_RowId": "1",
            "description": "Test 1",
            "methodName": "setSomeData",
            "paramType": "integer",
            "field1": "500",
            "field2": "600"
        },
        {
            "DT_RowId": "1",
            "description": "Test 2",
            "methodName": "setSomeData2",
            "paramType": "integer",
            "field1": "700",
            "field2": "800"
        },
        {
            "DT_RowId": "1",
            "description": "Test 3",
            "methodName": "setSomeData3",
            "paramType": "integer",
            "field1": "100",
            "field2": "900"
        }
    ]
}

Thanks!

tangerine

Your test case doesn't run. It has console errors.

dougm

For me it doesn't. Can you post errors?

dougm

hang on. i tried incognito and got errors

dougm

Try now? It works for me using incognito.

allan

Hi,

Thanks for the test case, yes it is running for me and I can see the error happening in Firefox.

Could you remove this block please:

    theEditor.on('submitSuccess', function (e, json, data) {
        $(tableName).DataTable().ajax.reload();
    });

it shouldn't be required since you are returning the data for the table from save.do (although edits don't actually appear to be getting saved).

I think that should fix it, but if not, could you update to Editor 2.0.4 and let me know? Then I'll debug it further.

Regards,
Allan

dougm

I updated to the Editor 2.0.4. as it still didn't work after removing the submit success call.

The save is not saving on purpose, just calls a method that returns the original hard coded data.

The page imports a local copy of the editor as I didn't see a cdn version.

https://test.farmcastersoftware.com/fc/js/datatables/dataTables.editor.js

var theEditor;
$(document).ready(function() {
    loadFeedRequirementsTable(theEditor, "#feedRequirementsEntries", "feedRequirementsEntries");
});
function loadFeedRequirementsTable(theEditor, tableName, type){
    var errorField = tableName+"Error";
    theEditor = new $.fn.dataTable.Editor({
        ajax: {
            edit: {
                url: "${pageContext.servletContext.contextPath}/public/save.do"
            }
        },
        table: tableName,
        formOptions: {
            inline: {
                onBlur: 'submit',
                submit: 'allIfChanged'
            }
        },
        fields: [{name:"description"}, {name:"methodName", type:"hidden"}, {name:"paramType", type:"hidden"}, {name:"field1"}, {name:"field2"}]
    });
    $( 'input', theEditor.node() ).on( 'focus', function () {
          this.select();
    });
    table = $(tableName).DataTable( {
        dom: "frtip",
        searching: false,
        paging: false,
        info: false,
        sort: false,
        ajax: "${pageContext.servletContext.contextPath}/public/entries.do",
        columns: [
            { data: "description" , className:'dt-left' },
            { data: "field1", className:'dt-right' },
            { data: "field2", className:'dt-right' }
        ],
        order: [ 0, 'asc' ],
        keys: {
            columns: [1,2],
            keys: [ 9 ],
            editor: theEditor,
            editOnFocus: true
        },
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        "processing": true
    }); 
}

Thoughts? What am I missing?

allan

That looks better - have you done a ctrl-f5 refresh to clear you cache?

I am seeing the data disappear on edit now, but we can come back to that if it is working that way for you now and the focus is moving correctly.

Allan

dougm

Yes cache is cleared and focus works. So any idea why the data disappears?

Thanks!

allan

Looking at the data returned from the server on first load, every row has DT_RowId=1 which I think is causing at least part of the problem. In the data where you store the data, do you have a primary key column which can be used to uniquely identify a row?

Allan

dougm

That appears to have fixed it! Thanks!