Excel-like auto-fill feature: liner.offset undefined

burnchar

My attempted use of the Excel-like auto-fill feature fails with:
Uncaught TypeError: Cannot read property 'top' of undefined in Chrome and
TypeError: liner.offset(...) is undefined in FireFox.

I don't know where to go from here and would appreciate any help.

Trace:

• Editor.bubblePosition, tm.js:101443
• (anonymous function), tm.js:101316
• jQuery.event.dispatch, jquery-2.1.4.js:4435
• jQuery.event.add.elemData.handle, jquery-2.1.4.js:4121

The (anonymous function) above reads:

    // Keep the bubble in position on resize
    var namespace = this._formOptions( opts );
    $(window).on( 'resize.'+namespace, function () {
        that.bubblePosition();
    } );

The code where the error takes place is:

    // Correct for overflow from the top of the document by positioning below
    // the field if needed
    if ( liner.offset().top < 0 ) {
        wrapper
            .css( 'top', position.bottom )
            .addClass( 'below' );
    }

liner is defined earlier in the function at this code:

Editor.prototype.bubblePosition = function ()
{
    var
        wrapper = $('div.DTE_Bubble'),
        liner = $('div.DTE_Bubble_Liner'),
        nodes = this.s.bubbleNodes;
...

Ajax load:

{"draw":1,"recordsTotal":3,"recordsFiltered":3,"data":[["WzNd",3,1,"2","ABC"],["WzRd",4,2,"300","ABC"
],["WzVd",5,3,"3001","35"]],"RowNames":["^","Id","DatabaseConnectionId","TableSchema","TableName"]}

Note that after this code executes, both liner and wrapper are objects with length 0.

The error occurs after releasing mouse button on text columns, after clicking a dialog box option (other than cancel) on numeric columns. Note that editing from within the primary editor form works perfectly, including multi-row edits.

The somewhat trimmed DT/Editor init code:

var restUrl = '/MyApp/API/Crud' + '?e=' + '4';
function restAjaxCall(method, url, data, successCallback, errorCallback) {
    $.ajax({
        method: method,
        url: restUrl,
        data: JSON.stringify(data),
        dataType: 'json',
        contentType: "application/json"
    })
    .done(function(json) { successCallback(json); })
    .error(function(xhr, error, thrown) { errorCallback(xhr, error, thrown); });
};

var editor;
$(document).ready(function() {
    var reportTitle = "MyApp Blacklist saved " + moment().format();
    editor = new $.fn.dataTable.Editor({
        idSrc: 0,
        table: "#editor",
        fields: [{"name":"DatabaseConnectionId","data":2,"label":"DatabaseConnectionId"},{"name":"TableSchema","data":3,"label":"TableSchema"},{"name":"TableName","data":4,"label":"TableName"}],
        ajax: {
            create: function(method, url, data, success, error) { restAjaxCall('POST',   url, data, success, error) },
            edit:   function(method, url, data, success, error) { restAjaxCall('PUT',    url, data, success, error) },
            remove: function(method, url, data, success, error) { restAjaxCall('DELETE', url, data, success, error) }
        }
    });

    var $dtOptions = {
        dom: "Bfrtip",
        autoFill: { editor:  editor },
        select: {
            style:'os',
            selector:'td:first-child',
            blurable:true
        },
        serverSide: true,
        deferRender: true,
        processing: true,
        ajax: '/MyApp/API/Crud' + "?e=" + '4',
        columns: [{"data":1,"visible":false,"searchable":false},{"data":2,"searchable":false},{"data":3,"searchable":false},{"data":4,"searchable":false}],
        buttons: [ /* Various button settings */ ]
    };
    var $dataTable = $('#editor').DataTable($.extend(true, $dtOptions, $dtOverrides));
});

allan

Hi,

Thanks for all the details. Unfortunately this is a bug in Editor 1.5.1. The good news is that fix has already been committed and will be included in 1.5.2 which I expect to drop in about two weeks time.

In the mean time, the fix is relatively simple if you would like to apply it in your local copy of Editor. Find this line:

if ( liner.offset().top < 0 ) {

And replace with:

if ( liner.length && liner.offset().top < 0 ) {

Regards,
Allan