Return key makes editor frame disappear

jbblake

I am trying to create a data table that can be editing without using the mouse using Excel like navigation. I am using the return key to create an editor as any other key puts the keys value in the first field. The editor form is shown momentarily and then "disappears" using the return key inside the data table. If I put in an alert, the editor frame is shown after clicking OK. See the comments in the code below.
Thank You

$(document).on( 'keyup', function ( e ) {
    console.log( e.keyCode );
} );
var table;
var localEditor = new $.fn.dataTable.Editor({
    table: "#example",
    idSrc: "id",
    fields: [{
        label: "Title:",
        name: "title"
    }, {
        label: "First Name:",
        name: "first_name"
    },
    {
        label: "Last Name:",
        name: "last_name"
    }, {
        label: "Phone:",
        name: "phone"
    }, {
        label: "City:",
        name: "city"
    }
    ]
});
localEditor
    .on('postEdit', function (e, json, data) {
        updateApiData('/api/Users', data);
    })
    .on('open', function (e, mode, action) {
        e.preventDefault(); // not sure what this does
    });
// use the user table from the examples
table = $('#example').DataTable({
    dom: "Bfrtip",
    ajax: {
        url: '/api/Users',
        dataSrc: ''
    },
    columns: [
        { data: "title" },
        { data: "first_name" },
        { data: "last_name" },
        { data: "phone" },
        { data: "city" },
        { data: "id"}
    ],
    select: {
        style: 'os'
    },
    buttons: [
        {
            // String.fromCharCode(45)
            // this works but only if not focused on the table (per the documentation)
            key: 'e', extend: 'editSingle', editor: localEditor, text: 'This Works',
            formButtons: [
                'Update',
                {
                    text: 'Cancel', action: function () { this.close(); }
                }
            ]
        }
    ]
    ,keys: true // excel like
});

table.on('key tr', function (e, datatable, key, cell, originalEvent) {
    // key other than return works but key pressed is shown in the editor frame
    // is there a non displayable field I can use?
    if (key === 13) { // esc 27 e 69 13 return
// from an example did not change behavior
        localEditor
        //    .one('close', function () {
        //        table.keys.enable();
        //    }
        //)
        // if multiple rows are selected editor frame is displayed with "Multiple Entries"
        // I want to edit a single row
            //.edit(table.rows({ selected: true }).indexes())
            .edit(table.row({ selected: true }).index())
            .title('Edit this')
            .buttons('Update');
        //alert('Return');  
        // If an alert is shown editor table is displayed after clicking OK
        // if I press return on the alert the editor frame "disappears"
    }
});

function updateApiData(apiurl, data) {
    ret = false;
    $.ajax({
        url: apiurl,
        data: data,
        datatype: "json",
        type: "put",
        async: false,
        success: function (data) {
            ret = true;
        }, error: function (x, h, r) {
            ajaxError("updating", x, h, r);
        }
    });
    return ret;
}
function ajaxError(type, x, h, r) {
    //hidemodal();
    innermessage = "";
    if (x.responseJSON) {
        console.log("In Response");
        innermessage = r;// x.responseJSON.Message;
    }
    $("<div class=error>An error occured while " + type + " data<br>" + innermessage + "</div>");//.dialog({ modal: true, title: "Error" });
}

allan

Hi,

Currently what to do is use a setTimeout - e.g.:

table.on( 'key', function ( e, datatable, key, cell, originalEvent) {
  if ( key === 13 ) {
    setTimeout( function () {
      ... editor.edit...
    }, 10 );
  }
} );

The reason for this is that otherwise Editor would also see the return key being pressed in its own event listeners and thus submit the form (unless you wanted to disable that).

Allan

jbblake

I had to increase the timeout. I used 100. It works. Thank You again