Select produces error

jtoler5

Why do I get 'unable to automatically determine field from source'? I have tried various different ways following the examples and can not get it working.

Code is at: http://pastie.org/10357565

allan

Hi,

Thanks for the code. Is it a specific column that gives that that error or all of them?

Allan

jtoler5

Just that one. I have in line bubble editing enabled, which works. Also the New button works. Delete and Edit will not. I have it set to not pass the TD to online edit upon click. If I console log (this) in the inline edit function it never outputs "<TD> for the first column but does the rest. Which makes sense. But I still get that error.

jtoler5

Here is the inline edit code

 $(tableID).on('click', 'tbody td:not(:first-child, .details-control, .delete, .child-document, .row-action, .paid-checkbox, .exempt-checkbox)', function (e) {
        var tr = this.parentNode;
        editor.bubble(this);

        // Work around to submit whole row. Editor 1.5 by default only submits the changed value now.
        editor.one( 'preSubmit', function ( e, data ) {
            data.rowData = table.row( tr ).data();
        });

        // Submit on change of date
        if ($(this).find('.DTE_Field_Type_date').length) {
            $(this).on('change', function () {
                editor.submit();
            });
        }
    });

I actually ended up doing this to get it to work, but this doesn't make the delete work unless I do the same thing, which is adding more code. But I know I shouldn't have to, so any help would be appreciated. Thanks.

new $.fn.dataTable.Buttons( table, [
        { extend: "create", editor: editor },
        { extend: "selectedSingle",
            text: "Edit",
            action: function (e, dt, node, config) {
                editor.edit(table.row({selected: true}).index());
            }
        },
        { extend: "remove", editor: editor }
    ] );

    table.buttons().container()
        .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );

allan

You'll need to forgive me, but which one? You say "just that one" but there are lots of fields defined in the code link you gave above. Which one is the one that is causing the issue?

Regarding the delete - what error occurs and from what code? If you would be able to link to the page so I can debug it live, that would be useful.

Allan

jtoler5

The first column gives that error. It is a select checkbox created to select the row.

columns: [
            {
                orderable: false,
                data: null,
                className: "select-checkbox",
                defaultContent: '',
            }

The delete gives the same error of unable to automatically determine field.... The only way I was able to get Edit to work was by
changing (per the examples) from:

new $.fn.dataTable.Buttons( table, [
        { extend: "create", editor: editor },
        { extend: "edit", editor: editor},
        { extend: "remove", editor: editor }
    ] );

to:

new $.fn.dataTable.Buttons( table, [
        { extend: "create", editor: editor },
        { extend: "selectedSingle",
            text: "Edit",
            action: function (e, dt, node, config) {
                editor.edit(table.row({selected: true}).index());
            }
        },
        { extend: "remove", editor: editor }
    ] );

So to make delete work I would have to do the same thing. But per the examples, I
should not have to do this to make edit/delete work.

Here is the select code used (should also be in link at top), to define that the selector is the first td.

select: {
                style:    'multi',
                selector: 'td:first-child',
                info: false
        }

allan

I see - thanks for the clarification. It sounds like the click event listener that is being used to trigger the inline editing is active even on the columns where it doesn't have any relevance.

The click handler for the bubble trigger has a fairly complex selector in the above statement - perhaps an easier option for it, and the inline editing, would be to use the columns.className option to specify a class name for the columns you want to be editable with a particular form, then you can simply do something like:

$('#myTable').on( 'click', 'td.editable-inline', function () {
  editor.inline( this );
} );

Allan

jtoler5

Yes. I took that recommendation, but still get that error.

jtoler5

So I actually discovered the error. It had something to do with the way I was including all the JS files. I used to download builder tool and and minified them all into one and it made it work.

allan

Great - good to hear you got it working :-)

Allan

jtoler5

So I'm actually having the error again! Even if I strip everything I can think of down and only include the JS and CSS I download from your builder, it still is not working!

Can you please take a look?

https://jwtoler.com/public-test/financeCharges.php?f=10135116&cat=Operating&ac=925000&dept=ADFR&table=charges
*Ignore the errors loading external files as I transferred just enough to showcase this.

allan

Which column do I need to click on to trigger the error?

jtoler5

You answered my question in another thread w/ using 1.10.9 dev.