Problem with field not being editable after join

marcusa007

I followed the examples but can't figure out why the field Name is not editable or does not work when I click on new/edit button.
Can someone please point me in the right direction. I am more a backend dev and fairly new to javascript.

JS

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

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        "ajax": "Ajax/Billing",
        "table": "#example",
        "fields": [ {
                "label": "ID:",
                "name": "vendor_billing.billing_id",
                "type": "hidden"
            }, {
                "label": "Field Foreman:",
                "name": "vendor_billing.field_foreman"
            }, {
                "label": "Location:",
                "name": "vendor_billing.location",
                "type": "autoComplete",
                "opts": {
                    source: "./autofill/location",
                    minLength: 3
                }
            }, {
                "label": "Vendor ID:",
                "name": "vendor_billing.vendor_id"
            }, {
                "label": "Status:",
                "name": "vendor_billing.status"
            }, {
                "label": "Invoice Number:",
                "name": "vendor_billing.invoice_number"
            }, {
                "label": "Function:",
                "name": "vendor_billing.function",
                "type": "autoComplete",
                "opts": {
                    source: "./autofill/functions",
                    minLength: 2
                }
            }, {
                "label": "Invoice:",
                "name": "vendor_billing.invoice"
            }, {
                "label": "Payroll:",
                "name": "vendor_billing.payroll"
            }, {
                "label": "Billing Date:",
                "name": "vendor_billing.billing_date",
                "type": "datetime"
            }, {
                "label": "Name:",
                "name": "name"
            }, {
                "label": "Last Name:",
                "name": "last_name"
            }
        ]
    } );

    // Activate an inline edit on click of a table cell
    $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );

    $('#example').DataTable( {
        dom: "Blfrtip",
        ajax: {
            url: "Ajax/Billing",
            type: "POST"
        },
        serverSide: true,
        columns: [
            { data: "vendor_billing.billing_id" },
            { data: "vendor_billing.field_foreman" },
            { data: "vendor_billing.location" },
            { data: "vendor_billing.vendor_id" },
            { data: "vendor_billing.status" },
            { data: "vendor_billing.invoice_number" },
            { data: "vendor_billing.function" },
            { data: "vendor_billing.invoice" },
            { data: "vendor_billing.payroll", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) },
            { data: "vendor_billing.billing_date" },
            { data: null, render: function ( data, type, row ) {
                // Combine the first and last names into a single table field
                return data.user_profile.name+' '+data.user_profile.last_name;
            } }//,
            //{ data: "user_profile.name"},
            //{ data: "user_profile.last_name"}
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
} );

PHP

use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Join,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate,
    Datatables\Editor\MJoin;

class Field_model extends CI_Model
{
    private $editorDb = null;

    public function init($editorDb)
    {
        $this->editorDb = $editorDb;
    }

    public function getStaff($post)
    {
        // Build our Editor instance and process the data coming from _POST
        // Use the Editor database class
        Editor::inst( $this->editorDb, 'vendor_billing', 'billing_id' )
            ->fields(
                Field::inst( 'vendor_billing.billing_id' )->set(false)
                    ->options('user_profile', 'user_id', array('name', 'last_name'))
                    ->validator('Validate::dbValues'),
                Field::inst( 'vendor_billing.field_foreman' )->validator( 'Validate::notEmpty' ),
                Field::inst( 'vendor_billing.location' ),
                Field::inst( 'vendor_billing.vendor_id' ),
                Field::inst( 'vendor_billing.status' ),
                Field::inst( 'vendor_billing.invoice_number' ),
                Field::inst( 'vendor_billing.function' ),
                Field::inst( 'vendor_billing.invoice' )
                    ->validator( 'Validate::numeric' )
                    ->setFormatter( 'Format::ifEmpty', null ),
                Field::inst( 'vendor_billing.payroll' )
                    ->validator( 'Validate::numeric' )
                    ->setFormatter( 'Format::ifEmpty', null ),
                Field::inst( 'vendor_billing.billing_date' )
                    ->validator( 'Validate::dateFormat', array(
                        "format"  => Format::DATE_ISO_8601,
                        "message" => "Please enter a date in the format yyyy-mm-dd"
                    ) )
                    ->getFormatter( 'Format::date_sql_to_format', Format::DATE_ISO_8601 )
                    ->setFormatter( 'Format::date_format_to_sql', Format::DATE_ISO_8601 ),
                Field::inst('user_profile.name'),
                Field::inst('user_profile.last_name')
            )
            ->leftJoin('user_profile', 'user_profile.user_id', '=', 'vendor_billing.vendor_id')
            ->process( $post )
            ->json();
    }
}

allan

Your data set doesn't contain a field called simply name. There is a user_profile.name which could be edited - is that the one you want?

Allan

marcusa007

Allan, thanks for your reply. I see what you mean. Makes sense. I changed it to:

            {
                "label": "Name:",
                "name": "user_profile.name"
            }, {
                "label": "Last Name:",
                "name": "user_profile.last_name"
            }

Now I am getting 'Uncaught Unable to automatically determine field from source. Please specify the field name. For more information, please refer to https://datatables.net/tn/11'

marcusa007

Now that I have both fields joined and I added

editField: ['user_profile.name', 'user_profile.last_name']

I am still having issues editing this field. It is giving me Uncaught Cannot edit more than one field inline at a time. How can I make this field capable of being inline editable? The final thing after that I want to put on that field is autofill. Is that even possible. Can you point me to an example. Thanks

allan

How can I make this field capable of being inline editable?

I'm afraid you can't. As the error states, you can't inline edit multiple fields at a time - that's not what inline editing was designed for. Instead, the bubble editing mode was designed for that. I'd suggest you bubble edit that column.

The final thing after that I want to put on that field is autofill. Is that even possible.

Not without creating a custom plug-in for AutoFill. It isn't something I've tried before, but with a custom plug-in and using Editor's multi-row editing API, it should be possible.

Allan

marcusa007

Thanks Allan. That points me in the right direction. I changed the name column in the table to hold both first and last name together. That solves all my problems without having to do to much extra scripting.