Editor + Select2 / Selectize Plugin - Remote AJAX

qlic

I'm trying to get one or both plugins working with a remote datasource, but it doesn't seem to update the dropdown in the editor. The data has been successfully retrieved with AJAX.

Thanks for any help!

        var editor;


        $(document).ready(function () {
            editor = new $.fn.dataTable.Editor({
                ajax: {
                    create: {
                        type: 'POST',
                        url: "http://test.dev/airfield"
                    },
                    edit: {
                        type: 'PUT',
                        url: 'http://test.dev/airfield/_id_'
                    },
                    remove: {
                        type: 'DELETE',
                        url: "http://test.dev/airfield"
                    }
                },
                "table": "#datatable",
                "fields": [
                    { label: "Coordinates:", name: "coords" },
                    { label: "Civil:", name: "civil" },
                    { label: "Field:", name: "field" },
                    { label: "ICAO:", name: "icao" },
                    { label: "FAA:", name: "faa" },
                    { label: "IATA:", name: "iata" },
                    { label: "ICAO (ex):", name: "icao_ex" },
                    { label: "FAA (ex):", name: "faa_ex" },
                    { label: "IATA (ex):", name: "iata_ex" },
                    { label: "Notes:", name: "notes", type: "textarea" },
                    {
                        "label": "Parent:",
                        "name": "parent_id",
                        "type": "selectize",
                        opts: {
                            valueField: 'title',
                            labelField: 'title',
                            searchField: 'title',
                            options: [],
                            create: false,
                            load: function(query, callback) {
                                if (!query.length) return callback();
                                $.ajax({
                                    url: "http://test.dev/airfields",
                                    type: 'POST',
                                    dataType: 'json',
                                    data: {
                                        q: query
                                    },
                                    error: function() {
                                        callback();
                                    },
                                    success: function(res) {

// I tried both of the following:
//                                        editor.s.fields.parent_id.update(res);
//                                        callback(res);
                                    }
                                });
                            }
                        }
                    }
                ]
            });

AJAX result:

[{"value":106,"label":"FJDG"},{"value":107,"label":"FL34"},{"value":108,"label":"GAGO"},{"value":109,"label":"HDAM"}]

mrd05d

Hey there just an idea but you arent returning title???...

    valueField: 'title',
    labelField: 'title',
    searchField: 'title',

[{"value":106,"label":"FJDG"},{"value":107,"label":"FL34"},{"value":108,"label":"GAGO"},{"value":109,"label":"HDAM"}]

allan

From the selectize documentation callback(res); looks to be correct. Are you able to give us a link to the page so we can debug it please?

Allan

mrd05d

My bet is still on you setting the value, label, and search fields to title yet not passing title back via ajax. Change it to this instead and see if it populates:

....
        sortField: 'label',
        valueField: 'value',
        labelField: 'label',
        searchField:'label',
....