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

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

dougmdougm Posts: 23Questions: 3Answers: 0

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!

Replies

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

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

  • dougmdougm Posts: 23Questions: 3Answers: 0

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

  • dougmdougm Posts: 23Questions: 3Answers: 0

    hang on. i tried incognito and got errors

  • dougmdougm Posts: 23Questions: 3Answers: 0

    Try now? It works for me using incognito.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • dougmdougm Posts: 23Questions: 3Answers: 0

    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?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • dougmdougm Posts: 23Questions: 3Answers: 0

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

    Thanks!

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • dougmdougm Posts: 23Questions: 3Answers: 0

    That appears to have fixed it! Thanks!

Sign In or Register to comment.