blurable error

jbblake

I am getting the Object doesn't support 'getRootNode error in dataTables.select.js. I wrote a test application using the example Excel like keyboard navigation. I am using IE 11. Latest datatables from nugget jquery.datatables version 1.10.15.
Code is below
My code is a copy of the example, except for the ajax and columns used.
Thank You

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function () {
    editor = new $.fn.dataTable.Editor( {
        ajax: "api/users",
        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"
        }
        ]
    });

    editor.on('postEdit', function (e, json, data) {
        updateApiData("api/Users", data);
    });

    var table = $('#example').DataTable({
        dom: "Bfrtip",
        ajax: {
            url: 'api/Users',
            dataSrc: ''
        },
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            { data: "title" },
            { data: "first_name" },
            { data: "last_name" },
            { data: "phone" },
            { data: "city" }
        ],
        keys: {
            columns: ':not(:first-child)',
            editor: editor
        },
        select: {
            style: 'os',
            selector: 'td:first-child',
            blurable: true
        },
        buttons: [
            { extend: "edit", editor: editor }
        ]
    });
});
function updateApiData(apiurl, data) {
    console.log("In Update");
    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) {
        innermessage = x.responseJSON.Message;
    }
    console.log(x);
    console.log(h);
    console.log(r);
    $("<div class=error>An error occured while " + type + " data<br>" + innermessage + "</div>").dialog({ modal: true, title: "Error" });
}

jbblake

error is in line 402
// Ignore elements which have been removed from the DOM (i.e. paging
// buttons)
if ( e.target.getRootNode() !== document ) {
return;
}

jbblake

per the example posted on github. If I change line 402 to
```
if ($(e.target).parents('html').length === 0) {
return;
}
'''
it works. Do I have the incorrect version?

allan

It looks like that issue was fixed in Select 1.2.3. 1.2.5 is the current release version, so if you update your Select library, it should work okay.

Allan