New to Editor - Field question

Gotcha007

Hi, I'm new to Editor and I already have an issue :-)
I have a main table (db_ob_Main) that contain a user information. One of those columns is called Workstation and contain an ID that refers to another table (db_Workstation)
What I'm trying to do is to avoid showing that ID by showing the Workstation column equivalent to that ID.

I think I succeeded doing that but the problem is that when I try to change the value it returns the [db_Workstation].[Workstation] and not the [db_ob_Main].[Wks]. I hope it's clear enough.

simple.html

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "../php/staff.php",
        table: "#example",
        fields: [ {
                label: "ComitId:",
                name: "db_ob_Main.ComitID"
            }, {
                label: "Name:",
                name: "db_ob_Main.UserName"
            }, {
                label: "Seat:",
                name: "db_ob_Main.Seat"
            }, {
                label: "Phone type:",
                name: "db_Phone.Phone"
            }, {
                label: "Extension:",
                name: "db_ob_Main.PhoneExt"
            }, {
                label: "Start date:",
                name: "db_ob_Main.StartDate",
                type: "datetime"
            }, {
                label: "Workstation type:",
                name: "db_Workstation.Workstation",
                type: "select",
                options: [
                    { label: "Desktop", value: 1 },
                    { label: "Blade", value: 2 },
                    { label: "Laptop", value: 3 },
                    { label: "MacBook", value: 4 },
                    { label: "Surface", value: 5 }
                ]
            }, {
                label: "Workstation Name:",
                name: "db_ob_Main.WksName"
            }, {
                label: "Bloomberg:",
                name: "db_ob_Main.Bloomberg"
            }, {
                label: "Bloomberg License:",
                name: "db_ob_Main.BloombergLic"
            }, {
                label: "Status:",
                name: "db_ob_Main.StatusReq"
            },
        ]
    } );

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

    $('#example').DataTable( {
        dom: "Bfrtip",
        scrollY: 300, 
        paging: false,
        ajax: "../php/staff.php",
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            { data: "db_ob_Main.ComitID" },
            { data: "db_ob_Main.UserName" },
            { data: "db_ob_Main.Seat" },
            { data: "db_Phone.Phone" },
            { data: "db_ob_Main.PhoneExt" },
            { data: "db_ob_Main.StartDate"},
            { data: "db_Workstation.Workstation"},
            { data: "db_ob_Main.WksName"},
            { data: "db_ob_Main.Bloomberg"},
            { data: "db_ob_Main.BloombergLic"},
            { data: "db_ob_Main.StatusReq"}
        ],
        order: [ 1, 'asc' ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
} );

Staff.php

Editor::inst( $db, 'db_ob_Main')
    ->fields(
        Field::inst( 'db_ob_Main.ComitID' ),
        Field::inst( 'db_ob_Main.UserName' ),
        Field::inst( 'db_ob_Main.Seat' ),
        Field::inst( 'db_Phone.Phone'),
        Field::inst( 'db_ob_Main.PhoneExt' ),
        Field::inst( 'db_ob_Main.Wks'),
        Field::inst( 'db_Workstation.Workstation' ),
        Field::inst( 'db_ob_Main.WksName' ),
        Field::inst( 'db_ob_Main.Bloomberg' ),
        Field::inst( 'db_ob_Main.BloombergLic' ),
        Field::inst( 'db_ob_Main.StartDate' )
            ->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( 'db_ob_Main.StatusReq' )
    )
    ->leftjoin('db_Phone','db_Phone.Id', '=', 'db_ob_Main.Phone')
    ->leftjoin('db_Workstation','db_Workstation.Id', '=', 'db_ob_Main.Wks')
    ->process( $_POST )
    ->json();

Submitted Data

action=edit
data[row_1][db_ob_Main][StartDate]=
data[row_1][db_Workstation][Workstation]=3

Server Response

{
  "data": [
    {
      "DT_RowId": "row_1",
      "db_ob_Main": {
        "ComitID": "XBBNK8A",
        "UserName": "Home, Jean-Baptiste",
        "Seat": "258 3rd floor East side",
        "PhoneExt": "5879",
        "Wks": "4",
        "WksName": "R101FXAR29C102",
        "Bloomberg": "2",
        "BloombergLic": "",
        "StartDate": null,
        "StatusReq": "2"
      },
      "db_Phone": {
        "Phone": "Turret"
      },
      "db_Workstation": {
        "Workstation": "MacBook"
      }
    }
  ]
}

Gotcha007

I found a workaround using render when displaying my datatables.
Not very pretty but works...

{ 
                "data": "db_ob_Main.Wks",
                "render": function (val, type, row){
                    if (val == 1){
                        return "Desktop";
                    }else{
                        if (val == 2){
                            return "Blade";
                        }else{
                            if(val == 3){
                                return "Laptop";
                            }else{
                                if(val == 4){
                                    return "MacBook";
                                }else{
                                    return "Surface";
                                }
                            }
                        }
                    }
                }
            },

allan

Hi,

You want to change:

name: "db_Workstation.Workstation",

to be:

name: "db_ob_Main.Wks",

since that is the field you want to edit (i.e. not the name of the joined field).

Also, in the DataTable { data: "db_Workstation.Workstation"}, is the correct thing to do.

If that isn't working for you, could you run the debugger on your page and let me know the debug code?

Thanks,
Allan

Gotcha007

http://debug.datatables.net/epadar

It does show me the right information in the table but when I click on it, it does not bring up the Bubble to edit

allan

As in the bubble doesn't show at all?

What is the event listener you are using to trigger the bubble() method? Can you show me that code?

Thanks,
Allan

Gotcha007

Correct, it does not show up at all, only when I set it back to db_Workstation.Workstation

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