Odd issue where I can't inline edit the same column in ineternet explorer
Odd issue where I can't inline edit the same column in ineternet explorer
tronacher
Posts: 10Questions: 1Answers: 0
I am following the example here to an extent.
https://editor.datatables.net/examples/extensions/keyTable.html
The goal is to have the user be able to move around via keyboard or mouse. press enter to start editing or type a key to overwrite what's there, submit via ajax on blur (or pressing enter again) and that's the gist of it. Now, I am using a dynamic table, inside of a table..and it's the inner table that needs to do all of this, and it works in every browser exactly how I would expect/want it to except internet explorer (which the customer will be using exclusively on the website). In Internet explorer if i edit column 4, and then submit it, and edit column 4 again. it breaks. If I edit column 4, then 3, it will work. Any time I make 2 cosecutive edits to the same column it breaks. I can edit column 4, then 3, then 4 again no problem. But if I edit 4, 3, 3. then it will break there. I've pasted all the code I think may be relevant below.
ie bug info:
line it throws error: trigger is 'open'
$(this).triggerHandler( e, args );
Replication: edit cell in one column...then edit same or different cell in the same column using internet explorer (i'm using ie11 but I've replicated it in other versions)
//editor defintion
var table = $("#transactionTable_<%=tableId%>");
datatable.editor = new $.fn.dataTable.Editor({
ajax: function (method, url, d, successCallback, errorCallback)
{
var output = { data: [] };
if ( d.action === 'edit' )
{
//take care of callback
var key = Object.keys(d.data)[0];
var docInfo = d.data[key];
docInfo.id = key;
output.data.push(docInfo);
//take care of updating
var document = new documentModel();
document.id(docInfo.id);
document.accountNumber(docInfo.accountNumber);
document.routingNumber(docInfo.routingNumber);
document.checkNumber(docInfo.checkNumber);
document.amount(docInfo.amount);
document.bankCode(docInfo.bankCode);
document.bookKeeping(docInfo.bookKeeping);
reassign.update(document, reassignViewModel.transaction);
}
return successCallback(output);
},
table: "#transactionTable_<%=tableId%>",
fields:
[
{
name: "accountNumber"
},
{
name: "routingNumber"
},
{
name: "checkNumber"
},
{
name: "amount"
},
{
name: "bankCode"
},
{
name: "bookKeeping"
},
{
name: "nativeId"
},
{
name: "id"
}
],
idSrc: 'id',
formOptions: {
inline: {
submit: 'allIfChanged'
}
},
});
//table definition
var innerTable = table.DataTable({
ajax: {
type: "POST",
url: "GetDocuments",
cache: false,
async: true,
data: { id: tableId }
},
columns: [
{
title: "Id",
className: "idColumn text-left",
data: "id",
orderable: true,
visible: true,
width: "5%"
},
{
className: "routingColumn text-left",
title: "Routing",
data: "routingNumber",
defaultContent: "N/A",
visible: true,
width: "15%"
},
{
className: "accountColumn text-left",
title: "Account",
data: "accountNumber",
defaultContent: "N/A",
visible: true,
width: "15%"
},
{
className: "checkNumberColumn text-left",
title: "Check",
data: "checkNumber",
defaultContent: "N/A",
visible: true,
width: "15%"
},
{
className: "amountColumn text-right",
title: "Amount",
data: "amount",
width: "15%",
render: $.fn.dataTable.render.number(',', '.', 2, '$')
},
{
className: "bankCodeColumn text-left",
title: "Tran Code",
data: "bankCode",
width: "15%"
},
{
className: "bookKeepingColumn text-left",
title: "Type",
data: "bookKeeping",
width: "15%"
},
{
orderable: false,
width: "0.25%",
targets: -1,
data: null,
defaultContent: "<button type='button' class='deleteButton btn btn-md btn-block btn-primary action-button' data-bind='click: removeClick'> Remove </button>",
//"render": function (data)
//{
// var deleteButton = "<button type='button' class='deleteButton btn btn-md btn-block btn-primary action-button' data-bind='click: removeClick'> Remove </button>";
// return deleteButton;
//}
},
{
data: "nativeId",
visible: false,
},
],
keys:
{
columns: ':not(:first-child, :nth-child(7), :nth-child(8))',
editor: datatable.editor,
editorKeys: 'tab-only'
},
select:
{
style: 'single',
selector: 'td:first-child',
blurable: true
},
rowSelect: "single",
drawType: 'none',
scrollY: 400,
scrollCollapse: true,
colReorder: { fixedHeader: true },
paging: false,
ordering: true,
searching: false,
info: false,
processing: true,
serverSide: false,
initComplete: function (settings, json)
{
$('.at-dataTable').on('draw.dt', function ()
{
$('[data-toggle="tooltip"]').tooltip({ html: true });
});
},
order: [[1, "asc"]], // Id
});
Now to 'fix' this problem I can add this line to the sucess of the ajax call that updates the database:
datatable.editor.edit();
and in theory this fixes the issue of not being able to edit the same column 2x in a row in internet explorer however it then causes the issue of no longer being able to press enter to enter the field and edit it.
to 'fix' that issue I have tried something along the lines of this:
innerTable.on('key', function (e, dt, key, cell, originalEvent)
{
if (key === 13)
{
debugger;
var response = datatable.editor
.one('close', function ()
{
innerTable.keys.enable();
}).inline(cell.node(), { submit: 'allIfChanged' });
innerTable.keys.disable();
originalEvent.preventDefault();
}
});
but to no avail. The reasoning/logic behind this attempt was that I was noticing that when I pressed enter (assuming I had that extra line in as an attempt to fix the original problem) it was calling both the open eventand submit, and I was trying to cut it short before it could call the submit event, but this didn't work.
Answers
I don't care whether it works by keeping the datatable.editor.edit(); on the db update function and manualing opening up the inline on the return key press, or by avoidin the need to call datatable.editor.edit(); in the first place, I would just like it to work.
As a side note, I am having odd text appear on the bottom left hand side of my screen, things like 'multiple rows selected' or such, and I have fixed it by adding:
$('.DTE_Form_Content').remove();
to the update db function. This is another 'odd fix'. I assume it has something to do with the info setting when defining the table but I have that set to false (maybe this isn't enough?)
editor being freshly bought is version: 1.6.2
Hi,
Are you able to give me a link to the page showing the issue? I've just tried the example you linked to on this site in IE11 and wasn't able to reproduce the issue there. Are you able to do so?
Thanks,
Allan
No I can't give a link unfortunately. And the example does work for me as well. I'm unsure of the difference between the example and mine that causes it. Perhaps, I'm mishandling the ajax clause of the editor? Using a different version number? Maybe I'm handling the inline part of the problem wrong by setting it in the forms option. I don't know.
The problem only occurs in internet explorer when editing the same column twice in a row. The error is thrown while it's trying to trigger the 'open' event. Is there something in the background that firefox/google chrome/microsoft edge does to handle these event's and their listeners that I have to do manually on internet explorer?
I know that when i was using the trial version of the editor before I upgraded to the paid version, that I had a problem with it working on internet explorer because the trial version called console.log and there is no console in internet explorer unless you have f12 open.I don't know if this would be something similiar to that nature
calling-> datatable.editor.edit(); after the edit in an attempt to clear what it is editing. (Because if I just make it edit another column, then I can edit the first column again) does allow me to edit the same column multiple times, it just then takes away the functionality of being able to press enter and append a cell.
Can you add
console.log( JSON.stringify( output ) );just before the return from the ajax override function.Allan
in google chrome->
{"data:{"accountNumber":"38370074","routingNumber":"031100209","checkNumber":"0002345319","amount":"9595.71","bankCode":"","bookKeeping":"Debit","nativeId":"1719181486","id":"5"}]}
In internet explorer
{"data":[{"accountNumber":"2079950050647","routingNumber":"031100225","checkNumber":"0004122494","amount":"500","bankCode":"","bookKeeping":"Debit","nativeId":"1719183702","id":"7"}]}
The Chrome one isn't actually valid JSON!
The IE one looks like what I would expect.
I'm afraid I'm not sure how much help I'll be able to offer with this one without a test case that I can use to debug the issue.
Is there any other information you can give about it? I'm not sure what would cause this I'm afraid!
Allan
You have the table & the editor declaration. I have code that updates an image when the row changes.
I have code that deletes the item if they click delete, but that shouldn't pertain to the problem at all as far as i can tell.
that update code that the editor calls on an edit just makes an ajax call to a controller to update a database. on sucess of that ajax call it changes focus to a 'problem' cell. But again, I don't think that related because i can comment it out, and still get the problem.
it is a dynamically created table.
below being the code that calls it to be created ->
and below here being the 'create dynamic table' function. or at least the only part of it not already posted here
as a note. I can comment out both the image updating code & the database updating code and maintain the bug. So I don't think either is relevant.
Can you basically strip it back to match the code in my example, then check to see if that works in your local environment? If so, then build it up.
Allan
I can break it down to this, as my closest attempt to make it like the example, and the bug still occurs. (still only internet explorer & when editing the same column 2x in a row)
a note on the environment is that we are using bootstrap 2.0. Unsure if it's related, but it has caused me a couple problems elsewhere in the code in assuming it was 3.0
datatable.editor = new $.fn.dataTable.Editor({
ajax: function (method, url, d, successCallback, errorCallback)
{
var output = { data: [] };
if ( d.action === 'edit' )
{
//take care of callback
var key = Object.keys(d.data)[0];
var docInfo = d.data[key];
docInfo.id = key;
output.data.push(docInfo);
}
Also. even if we can't get the bug to go away in this odd scenario, if we can alleviate the symptom I would be okay with that.
for example: adding datatable.editor.edit(); after the update (to make it not possible to edit the same column 2x in a row, by attempting to refresh the the editor). And while this works,the bug essentially goes away but then it causes a new bug in which I can't press enter to append a field. Granted I can press f2 to append the field (because enter is actually entering it, it's just also submitting it at the same time).
Any understanding why calling datatable.editor.edit() would do this so I can get around this behavior (for example an attempt to catch the enter key and prevent it from calling later events) or a better thing I can do than call datatable.editor.edit() that would accomplish the same goal of making it so we are no longer editing the same column 2x in a row.
I am still having this problem. I would be grateful for any more information that can be given that may lead to me solving it.