Error when compact cells are addressed for inline editing

javismiles

Hi, I have a table and all works fine, and I use inline editing on all the cells and all good,

then when going responsive and compact, there is this button that appears on the left that allows you to open the extra cells that don't fit and see them below, which is great. Problem is, when trying to inline edit those extra cells appearing below, I get this error:

datatables.min.js:281 Uncaught TypeError: Cannot read property 'contents' of undefined
at f.inline (datatables.min.js:281)
at HTMLTableCellElement.<anonymous> (panel.js:250)
at HTMLTableElement.dispatch (datatables.min.js:14)
at HTMLTableElement.y.handle (datatables.min.js:14)

but such error only happens when going compact and that button appearing on left to open the extra cells below and trying to inline edit them

error does not happen when inline editing in full horizontal view in larger screen

javismiles

I have this line for inline editing:

$('#'+obj.table).on( 'click', 'tbody td', function (e) {
    eArray[index].inline( this, {onBlur: 'submit'})});

so this works all great when all cells are in horizontal, but gives that error when cells go compact and are opened with that extra button on left

javismiles

I tried this variation

$('#'+obj.table).on( 'click', 'tbody td', function (e) {
eArray[index].inline( thetable.cell(this).index(), {onBlur: 'submit'})});

and then again all works perfect in horizontal large screen,
but in compact mobile inline editing gives error:
Uncaught Unable to automatically determine field from source. Please specify the field name. For more information, please refer to https://datatables.net/tn/11

so why does it work all fine in large screen, all cells exposed, and fails in compact size with extra cells under that left button

allan

Can you give me a link to a page showing the issue so I can debug it please? I'm not certain why this would be happening since it works here. The compact CSS styling should make no difference to the behaviour.

Allan

javismiles

I wish I could thank you Allan,would love to provide a test case but this is embedded within a large web app in prototyping stage and its very difficult to provide a link to it at the moment,
but yes this is happening consistently, unfortunately,

ive been tracking different values:

    $('#'+obj.table).on( 'click', 'tbody td', function (e) {
        console.log("A VER");
        console.log(eArray[index]);
        console.log(this);
        console.log(thetable);
        console.log(thetable.cell);
        console.log(thetable.cell(this));
        console.log(thetable.cell(this).index());
        console.log(thetable.cell(this).cell(this));
        console.log(thetable.cell(this).cell(this).index());

          eArray[index].inline( thetable.cell(this).index(), {onBlur: 'submit'});

    });

and definitely things do change depending on the cell being outside or inside the left button that opens the extra cells,
the ones inside just give different values and undefined in some cases in the tracks above

  $.map(obj.fields, function(obj, index) {
       fieldobj[index]  = { 'label':obj.d+":", 'name':obj.i };                     
       colobj[index+1]  = { 'data':obj.i };           
    });

    eArray[index] = new $.fn.dataTable.Editor( {
    "ajax": {"url": "admin.php","type": "POST","data": {"etype": obj.table}},
    table: "#"+obj.table,
    fields: fieldobj});

allan

Perhaps you could use http://live.datatables.net or JSFiddle to create a test case that I can debug.

Allan

javismiles

yes Allan, we can close this as we are addressing it on a separate thread, thank u