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

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

burncharburnchar Posts: 118Questions: 12Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,195Questions: 1Answers: 10,413 Site admin
    Answer ✓

    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

This discussion has been closed.