Editors custom field saving whole json, not just string

1ticket

Hey so I am trying to integrate your Editor with typeahead... I'm running into a problem. It seems like the headliner type is being applied to other fields, even though I didn't specify a custom field for them. The Venue and config objects shouldn't have callbacks to the set function, yet I think they are...

Window.editorVals = {}
if (!jQuery.fn.dataTable.ext.editorFields) {
    jQuery.fn.dataTable.ext.editorFields = {};
}

var Editor = jQuery.fn.dataTable.Editor;
var _fieldTypes = jQuery.fn.dataTable.ext.editorFields;

_fieldTypes.headliner = {
    create: function (conf) {
        var that = this;

        conf._enabled = true;

        // Create the elements to use for the input
        conf._input = $(`<div id="${Editor.safeId(conf.id)}">
                    <input class="typeahead form-control headliner" type="text" placeholder="Headliner / Home Team" style="background-color: unset">
                    </div>`);

        let blood = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            remote: {
                url: 'https://apis.dti1ticketapps.com/eventcatalog/headliners/v1?mapped=0&name_contains=',
                prepare: function (query, settings) {
                    settings.url = settings.url + query
                    settings.headers = {
                        "x-api-key": _config.apis.dti1ticketapps.eventCatalogToken
                    };
                    return settings;
                }
            },
        });

        $('input.typeahead.headliner', conf._input).typeahead(null, {
            name: 'headliner',
            display: Handlebars.compile('{{name}} - {{category_name}}'),
            source: blood,
            templates: {
                empty: [
                    '<div class="empty-message">',
                    'Unable to find headliners that match query.',
                    '</div>'
                ].join('\n'),
                suggestion: Handlebars.compile(
                    '<div><strong>{{name}}</strong> – {{category_name}}</div>'
                )
            },
            limit: 10
        }).on('typeahead:selected typeahead:autocomplete', function (obj, datum) {
            $('input.typeahead.headliner.tt-input', conf._input).data({data:datum})
            that.set(conf, datum);
        });

        return conf._input;
    },

    get: function (conf) {
        let val = $('input.typeahead.headliner.tt-input', conf._input).data('data')
        return val
    },

    set: function (conf, val) {
        $('input.typeahead.headliner.tt-input', conf._input).typeahead('val', val.name);
    }
};

    Window.eventCreator.editor = editor = new $.fn.dataTable.Editor({
        table: "#eventsTable",
        fields: [{
            label: "Event Name",
            name: "event_name"
        }, {
            label: "Venue",
            name: "venue"
        }, {
            label: "Config",
            name: "config"
        }, {
            label: "Headliner",
            name: "headliner",
            type: "headliner"
        }, {
            label: "Secondary",
            name: "secondaryHeadliner",
            type: 'headliner'
        }, {
            label: "Start Date",
            name: "date",
        }, {
            label: "Time",
            name: "start_date"
        }
        ]
    });


    Window.eventCreator.table = table = $('#eventsTable').DataTable({
        "processing": true,
        dom: "Bfrtip",
        scrollY: "30vh",
        "orderClasses": false,
        scrollCollapse: true,
        paging: false,
        select: {
            style: 'os',
            selector: 'tr:not(.success):not(.exists):not(.fail)'
        },
        buttons: [
            {extend: "edit", editor: editor},
        ],
        "columns": [
            {"data": "event_name", "title": "Event Name"},
            {"data": "venue.name", "title": "Venue"},
            {"data": "venue.config_name", "title": "Config"},
            {"data": "headliner.name", "title": "Headliner"},
            {"data": "secondaryHeadliner.name", "title": "Secondary"},
            {"data": "date", "title": "Date"},
            {"data": "time", "title": "Time"},
            {
                "data": "attributes", "title": "Attributes",
                "render": function (data, type, row, meta) {
                    let tagsHtml = ``;
                    Object.keys(data).forEach(function (key, index) {
                        tagsHtml += `<span class="badge badge-pill badge-dark">${$(`#${key}`).parent().find('label').text()}</span>`
                    })
                    return tagsHtml
                }
            },
            {
                "title": 'Delete',
                "orderable": false,
                "data": null,
                "render": function (data, type, row, meta) {
                    return '<button type="button" class="btn btn-link deleteRow">Delete</button>';
                },
                "width": 40
            }
        ]
    });

    table
        .on('select', function (e, dt, type, indexes) {
            var rowData = table.rows(indexes).data().toArray();
        })
        .on('deselect', function (e, dt, type, indexes) {
            var rowData = table.rows(indexes).data().toArray();
        });

    $('#eventsTable').on('click', '.deleteRow', function (e) {
        e.preventDefault();
        table
            .row($(this).parents('tr'))
            .remove()
            .draw();
    });

{
  "headliner": {
    "id": 101380,
    "stubhub_id": null,
    "name": "Washington Redskins",
    "category_id": 1,
    "category_name": "NFL"
  },
  "secondaryHeadliner": {
    "id": 101210,
    "stubhub_id": null,
    "name": "Dallas Cowboys",
    "category_id": 1,
    "category_name": "NFL"
  },
  "venue": {
    "id": 303754,
    "name": "Stadium",
    "stubhub_id": null,
    "stubhub_config_id": null,
    "config_name": "GA",
    "city": "Arlington",
    "state": "VA",
    "country": "US "
  },
  "config": {
    "text": "",
    "id": ""
  },
  "date": "06/15/2018",
  "time": "",
  "attributes": {
    "Is_Date_TBD": true,
    "Is_Time_TBD": true
  },
  "event_name": "",
  "DT_RowId": "ba228515-06ad-b868-ee1a-fb94ac2f00c5"
}

why is this behavior happening?

thanks!

1ticket

1ticket

nvm I figured it out, sorry!