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

tronachertronacher 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

  • tronachertronacher Posts: 10Questions: 1Answers: 0

    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?)

  • tronachertronacher Posts: 10Questions: 1Answers: 0
    <script type="text/javascript" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>@* Buttons *@
    <script type="text/javascript" src="//cdn.datatables.net/colreorder/1.3.1/js/dataTables.colReorder.min.js"></script>@* ColReorder *@
    <script type="text/javascript" src="//cdn.datatables.net/keytable/2.2.1/js/dataTables.keyTable.min.js"></script>@* KeyTable *@
    <script type="text/javascript" src="//cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>@* Select *@
    <script type="text/javascript" src='~/Scripts/dataTables.editor.js'></script> @* Editor *@
    

    editor being freshly bought is version: 1.6.2

  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin

    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

  • tronachertronacher Posts: 10Questions: 1Answers: 0

    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.

  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin

    Can you add console.log( JSON.stringify( output ) ); just before the return from the ajax override function.

    Allan

  • tronachertronacher Posts: 10Questions: 1Answers: 0
    edited May 2017

    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"}]}

  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin

    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

  • tronachertronacher Posts: 10Questions: 1Answers: 0

    You have the table & the editor declaration. I have code that updates an image when the row changes.

    //on fucus load image
            innerTable.on('key-focus', function (e, dt, cell)
            {
                var rowData = dt.data()[cell.index().row];
                var nativeId = rowData.nativeId;
    
                if (reassignViewModel.image.nativeId != nativeId)
                {
                    reassignViewModel.oldValue = rowData.amount;
    
                    reassignViewModel.image.nativeId = nativeId;
                    reassign.getImageData(nativeId, reassignViewModel.transaction.ScanJobID());
                }
    
            });
    

    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 ->

            row.child(createDynamicDataTable(row.data())).show();
    
                 var tranId = $(this).parent().attr("id")
                 reassign.selectTransaction(tranId)
                 reassignViewModel.table($("#transactionTable_" + tranId).DataTable());
    
                 $(".at-dataTable-inner").DataTable().on("draw.dt", function ()
                 {
                     $(".at-dataTable-inner").DataTable().column(0, { search: "applied", order: "applied" }).nodes().each(function (cell, i)
                     {
                         cell.innerHTML = i + 1;
                     });
                 }).draw();
    
             }
         });
    

    and below here being the 'create dynamic table' function. or at least the only part of it not already posted here

        <div class="row-fluid">
            <div class="span11 offset1">
                <div class="container-fluid" id="tableHolder">
                    <table id="transactionTable_<%=tableId%>" class="table display table-hover dt-responsive at-dataTable at-dataTable-inner">
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    
  • tronachertronacher Posts: 10Questions: 1Answers: 0

    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.

  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin

    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

  • tronachertronacher Posts: 10Questions: 1Answers: 0

    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);
    }

                    //console.log(JSON.stringify(output));
    
                    return successCallback(output);
    
                },
                table: "#transactionTable_<%=tableId%>",
                fields:
                    [
                     {
                         name: "amount"
                     },
                     {
                         name: "id"
                     }
                    ],
                idSrc: 'id',
                formOptions: {
                    inline: {
                        submit: 'allIfChanged'
                    }
                },
    
            });
    
    
            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: "amountColumn text-right",
                    title: "Amount",
                    data: "amount",
                    width: "15%",
                    render: $.fn.dataTable.render.number(',', '.', 2, '$')
                },
                ],
                keys:
                    {
                        columns: ':not(:first-child, :nth-child(7), :nth-child(8))',
                        editor: datatable.editor,
                        //editorKeys: 'tab-only'
                    },
                select:
                    {
                        style: 'os',//'single',
                        selector: 'td:first-child',
                        blurable: true
                    },
    
            });
    
  • tronachertronacher Posts: 10Questions: 1Answers: 0

    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.

  • tronachertronacher Posts: 10Questions: 1Answers: 0

    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.

This discussion has been closed.