Why? - Uncaught Unable to automatically determine field from source. Please specify the field name

kris1

Why this message is throws when I select a row from the table: "Uncaught Unable to automatically determine field from source. Please specify the field name"?

allan

Hi,

I don't have a record of a license for your Editor install. Could you confirm which user name account you purchased Editor under, or are using the trial from?

I presume you are using the inline() or bubble() methods here? The issue is that Editor can't determine the name based on the cell that activated the action. There are a number of reasons this can occur. Can you post your initialisation code so I can take a look?

Thanks,
Allan

Mahdi_Farhani

i have same issue.also i use MVC.Jquery.Datatables.net in MVC .net.
my editor config is :
var editor = new $.fn.dataTable.Editor({
ajax: "../php/staff.php",
table: '#ActivityItem',
fields: [
{ label: 'First name', name: 'FromTime' }
// etc
],

        });

and i use
$('#ActivityItem').on('click', 'tbody td:not(:first-child)', function () {
editor.inline(this);
});

allan

@Mahdi_Farhani - Are you able to link me to the page, or post your full Javascritp code so I can take a look?

Thanks,
Allan

Mahdi_Farhani

Thank's for your attention. unfortunately it's not online page but this is all scripts i used.
at first the css :

"~/Content/DataTables/CSS/jquery.dataTables.css",
"~/Content/DataTables/CSS/dataTables.tableTools.css",
"~/Content/DataTables/CSS/dataTables.bootstrap.css"

(i add this stylesheet by bundling)

after that i tyr to add datatable into my page :

    @{
            var vm = Html.DataTableVm("ActivityItem", (ActivityController h) => h.GetDailyReportItems(null));
    vm.ColumnFilter = false;
    vm.ShowSearch = false;
    vm.StateSave = true;
    vm.Language = "{'sUrl' : '/Scripts/Datatables/fa_IR.txt'}";
    vm.JsOptions.Add("sDom", "<\"top\"li>rt<\"bottom\"fpi><\"clear\">");    
    }
    Html.Partial("DataTable", vm)

so with this code my datatable generated as well.
and finially js scripts:

"~/Scripts/jquery-2.1.1.js",
"~/Scripts/Datatables/jquery.dataTables.js",
"~/Scripts/Datatables/dataTables.tableTools.js",
"~/Scripts/Datatables/dataTables.bootstrap.js"

    <script src="~/Scripts/Datatables/dataTables.editor.js"></script>

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

        $(document).ready(function () {
            var editor = new $.fn.dataTable.Editor({
                ajax: "/Activity/editorPage",
                table: '#ActivityItem',
                fields: [
                    { label: 'First name', name: 'FromTime' }
                    // etc
                ],

            });

            $('#ActivityItem').on('click', 'tbody td:not(:first-child)', function () {
                editor.inline(this);
            });
        });


    </script>

allan

Can you show me how you initialise your DataTable as well please?

Allan

Mahdi_Farhani

<script type="text/javascript">
    (function setDataTable() {
        if(!window.jQuery || !$.fn.DataTable) {
            setTimeout(setDataTable, 100);
            return;
        }
        var $table = $('#ActivityItem');
        var dt = $table.dataTable({
            "aaSorting": [],
            "bProcessing": true,            
            "bJQueryUI ":false,
            "bStateSave": false,
            "bServerSide": true,            
            "bFilter": false,
            "sDom": '<"top"li>rt<"bottom"fpi><"clear">',
            "aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "همه"]],
            "bAutoWidth": false,
            "sAjaxSource": "/Activity/GetDailyReportItems", "oTableTools" : { "sSwfPath": "/Scripts/Datatables/swf/copy_csv_xls_pdf.swf" },
            "fnServerData": function(sSource, aoData, fnCallback) {
                $.ajax({
                    "dataType": 'json',
                    "type": "POST",
                    "url": sSource,
                    "data": aoData,
                    "success": fnCallback
                });
            },
            "aoColumnDefs" : [{"bVisible":false,"aTargets":[0,1,2,7,11]},{"mRender":BoolToConfirmStatus,"aTargets":[9]}]
                , "sDom":"<\"top\"li>rt<\"bottom\"fpi><\"clear\">"
                
                    ,"oLanguage": {'sUrl' : '/Scripts/Datatables/fa_IR.txt'}
                    
                 
                                });
        $.extend( $.fn.dataTableExt.oStdClasses, {
            "sWrapper": "dataTables_wrapper form-inline"
        } );
    })();
</script>

allan

Hi,

Thanks very much for the information. So based on your code above, the Ajax source is presenting the data for the DataTable as arrays - is that correct? However, Editor has been configures to use object (i.e. name: 'FromTime'). So the error you are getting is because Editor can't find a field that is to be edited from the data int he table (i.e. the array index integer).

The "fix" is to be consistent - either use objects everywhere, or configure Editor to use arrays. Technically you can use fields.data and fields.name to mix the two, but I would suggest that you will find it much easier if you use the same data type for both!

My own suggestion would be to use objects for everything - that will involve a change to your Ajax data source to return objects, rather than arrays for each row of data.

Regards,
Allan

Mahdi_Farhani

Hi,
this is my Json structure i've returned data from ajax source

iTotalRecords
    1
    
iTotalDisplayRecords
    1
    
sEcho
    1
     aaData     [["4", "3", "1", 10 more...]]
    
0
    ["4", "3", "1", 10 more...]
    
0
    "4"
    
1
    "3"
    
2
    "1"
    
3
    "بـدون عـنوان"
    
4
    "13:32:02.3751770"
    
5
    "13:32:02.3751770"
    
6
    "تست نرم افزار"
    
7
    "910271"
    
8
    "مهدی فرهانی"
    
9
    false
    
10
    ""
    
11
    "0"
    
12
    "0"

allan

Thanks for the information. As I suggested, I would recommend using objects, rather than arrays. See: http://datatables.net/manual/data#Objects .

Allan

emt

Allan, can you explain how to use objects rather than arrays? I get the same "Uncaught" message as the OP with this configuration:

(function($){

$(document).ready(function(){

    var editor = new $.fn.dataTable.Editor({
        ajax:  "../stack/plugins/datatables/php/table.qpidvulh_to-do_list.php",
        table: "#qpidvulh_to-do_list",
        fields: [
            {
                label: "Item",
                name: "item",
                type: "textarea"
            },
            {
                def: "(none)",
                label: "Office",
                name: "office",
                type: "select",
                ipOpts: [
                    {
                        label: "(none)",
                        value: "(none)"
                    },
                    {
                        label: "Alaina",
                        value: "Alaina"
                    },
                    {
                        label: "Felicita",
                        value: "Felicita"
                    },
                    {
                        label: "Lee",
                        value: "Lee"
                    },
                    {
                        label: "Luciana",
                        value: "Luciana"
                    },
                    {
                        label: "Rachel",
                        value: "Rachel"
                    }
                ]
            },
            {
                def: "Office",
                label: "Expeditor",
                name: "expeditor",
                type: "select",
                ipOpts: [
                    {
                        label: "Office",
                        value: "Office"
                    },
                    {
                        label: "Carlos",
                        value: "Carlos"
                    },
                    {
                        label: "Danny",
                        value: "Danny"
                    },
                    {
                        label: "Steve",
                        value: "Steve"
                    }
                ]
            },
            {
                label: "Deadline",
                name: "deadline",
                type: "date",
                dateFormat: "mm\/dd\/y",
                dateImage: "https://www.dcturano.com/stack/images/calendar.png"
            }
        ]
    });

    $('#qpidvulh_to-do_list').dataTable({
        ajax: "../stack/plugins/datatables/php/table.qpidvulh_to-do_list.php",
        autoWidth: "false",
        dom: "<'H'lfr>t<'F'ip>",
        jQueryUI: "true",
        pagingType: "full_numbers",
        stateSave: "true",
        columns: [
            {
                data: "item",
                width: "54%"
            },
            {
                data: "office",
                width: "10%"
            },
            {
                className: "p_hide",
                data: "expeditor",
                width: "10%"
            },
            {
                className: "p_hide",
                data: "deadline",
                width: "9%"
            },
            {
                className: "p_hide",
                data: "created",
                width: "9%"
            },
            {
                className: "center p_hide",
                data: null,
                defaultContent: "<a href=''class='editor_edit'>Edit</a> | <a href='' class='editor_remove'>Delete</a>",
                orderable: false,
                width: "8%"
            }
        ]
    })

    $('#qpidvulh_to-do_list').on('click', 'tbody td', function (e) {
        editor.bubble( this );
    });

    $('#qpidvulh_to-do_list').on('click', 'a.editor_remove', function (e) {
        editor
            .title( 'Delete row' )
            .message( 'Are you sure you wish to delete this row?' )
            .buttons( { "label": "Delete", "fn": function () { editor.submit() } } )
            .remove( $(this).closest('tr') );
    });

});

}(jQuery));

allan

What is your file "../stack/plugins/datatables/php/table.qpidvulh_to-do_list.php" returning?

From your configuration it should be:

{
   "data": [
      {
         "item": "...",
         "office": "...",
         ...
      },
      ...
   ]
}

Allan

emt

This is everything that's in the "../stack/plugins/datatables/php/table.qpidvulh_to-do_list.php" file:

<?php>
/*
 * Editor server script for DB table qpidvulh_to-do_list
 * Automatically generated by http://editor.datatables.net/generator
 */

// DataTables PHP library
include( "lib/DataTables.php" );

// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Join,
    DataTables\Editor\Validate;


// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'qpidvulh_to-do_list' )
    ->fields(
        Field::inst( 'item' )
            ->validator( 'Validate::minLen_required', 5 ),
        Field::inst( 'office' ),
        Field::inst( 'expeditor' ),
        Field::inst( 'deadline' )
            ->validator( 'Validate::dateFormat', 'm/d/y' )
            ->getFormatter( 'Format::date_sql_to_format', 'm/d/y' )
            ->setFormatter( 'Format::date_format_to_sql', 'm/d/y' ),
        Field::inst( 'created' )
            ->set( isset($_POST['action']) && $_POST['action'] === 'create' ? true : false )
            ->getFormatter( 'Format::date_sql_to_format', 'm/d/y' )
    )
    ->process( $_POST )
    ->json();

allan

Interesting - that looks like it should work okay to me. Sorry for not being able to answer it straight out. Could you run the table through the debugger and let me know what the debug code is?

Allan

emt

As a follow-up, I can't run my page through the debugger because it only runs over https.

allan

Apologies - I've just altered the bookmarklet to work on https as well. You'll need to delete the existing bookmarklet in your browser.

Allan

emt

Forgot I still have this issue, and got the debugger to work: https://debug.datatables.net/oluwif

The issue can be seen on this page: https://www.dcturano.com/to-do_list/

Click any of the content under the "Created" field, and it'll trigger this: "Uncaught Unable to automatically determine field from source. Please specify the field name"

allan

I don't see a created field in the Editor configuration, which is why the error is occurring.

Allan

emt

If I make a created field in the Editor config, how can I prevent it from being editable? It's a non-editable column that's made when an item is created.

allan

You could use the hidden field type.

Or in the PHP add ->set( false ) to the Field instance for that field to stop the libraries trying to set a value for it.

Allan

emt

This is currently the PHP for the created field:

    Field::inst( 'created' )
        ->set( isset($_POST['action']) && $_POST['action'] === 'create' ? true : false )
        ->getFormatter( 'Format::date_sql_to_format', 'm/d/y' )
        ->setFormatter( 'Format::date_format_to_sql', 'm/d/y' )

I tried changing set to false and it's still throwing the error.

allan

Is this still about the created column throwing 'Unable to automatically determine field from source'? I hadn't realised that was still an issue with your previous question (i.e. I didn't realise it was linked to the one before). As such my solution wasn't really valid since it doesn't resolve that issue.

You need to add a class to the editable columns (at least this is the way I would recommend doing it) using columns.className - add editable and then in your Javascript that calls inline() modify it to select only cells which have that class.

Allan

emt

Forgot to say that your last comment fixed the issue, thanks Allan.