Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82271

How does one set "selected" option using Editor.Select2 with AJAX options?

$
0
0

Hi,

I have been having some fun with Select2 and Editor, and am slowly making progress. My final hurdle is to set the "selected" option in the Select2 dropdowns (I have two).

I need to replace 'Caption' and 'ID' in the snippet below with the actual values of the text and the value of the option respectively when a record is edited.

"templateSelection": function (data) {
    console.log(data);  // Simply displays the placeholder so is not worth much
    return 'Caption' || 'ID';
 },

The text is displayed in the table, so I am hoping I can get it from there somehow, and the value is the actual item being edited in the Select2 control.

The complete code is as follows:

(function ($) {
    $(document).ready(function () {

        var filter;
        var job_titles;

        var editor = new $.fn.dataTable.Editor({
            ajax: {
                url: 'jobdescription',
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
            },
            table: '#indexTable',
            idSrc: 'id',
            fields: [
                {
                    "label": "Occupation Group:",
                    "name": "occgroup_id",
                    "type": "select2",
                    "data": "occgroup_id",
                    "opts": {
                        "templateSelection": function (data) {
                            console.log(data);
                            return 'Caption' || 'ID';
                        },
                        "minimumInputLength": 3,
                        "placeholder": 'Search for a Occupation Group',
                        "allowClear": true,
                        "ajax": {
                            "url": 'http://mibco.jobdesc.wnn/jobdesc/occgroup',
                            "dataType": 'json',
                            "delay": 250,
                            "cache": false,
                            "headers": {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                            "data": function (params) {
                                var query = {
                                    "q": params.term,
                                    "action": "select2",
                                    "field": "occupation_group",
                                    "filter": filter
                                };
                                return query;
                            },
                            "processResults": function (data, params) {
                                job_titles = data.results;
                                return {results: data.results};
                            }
                        }
                    },
                    "fieldInfo": ""
                }

                , {
                    "label": "Occupation Title:",
                    "name": "occtitle_id",
                    "type": "select2",
                    "data": "occtitle_id",
                    "opts": {
                        "templateSelection": function (data) {
                            console.log(data);
                            return 'Caption' || 'ID';
                        },
                        "minimumInputLength": 3,
                        "placeholder": 'Search for a Occupation Title',
                        "allowClear": true,
                        "ajax": {
                            "url": 'http://mibco.jobdesc.wnn/jobdesc/occtitle',
                            "dataType": 'json',
                            "delay": 250,
                            "cache": false,
                            "headers": {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                            "data": function (params) {
                                var query = {
                                    "q": params.term,
                                    "action": "select2",
                                    "field": "occupation_title",
                                    "filter": filter
                                };
                                return query;
                            },
                            "processResults": function (data, params) {
                                job_titles = data.results;
                                return {results: data.results};
                            }
                        }
                    },
                    "fieldInfo": ""
                }

                , {
                    "label": "Job Title:",
                    "name": "job_title",
                    "type": "text",
                    "fieldInfo": ""
                }

                , {
                    "label": "Description:",
                    "name": "description",
                    "type": "textarea",
                    "fieldInfo": ""
                }

                ,
                ,
            ]
        });

        // Set the value of the filter
        editor.dependent('occgroup_id', function (val) {
            filter = val;
        });

        // Set the value of the dependant fields
        editor.dependent('occtitle_id', function (val) {
            $.each(job_titles, function (key, result) {
                if (result.id == val) {
                    editor.val('job_title', result.text);
                    editor.val('description', result.desc);
                }
            });
        });

        // New record
        $('a.editor_create').on('click', function (e) {
            e.preventDefault();
            editor.create({
                title: 'Create new record',
                buttons: 'Add'
            });
        });

        // Edit record
        $('#indexTable').on('click', 'a.editor_edit', function (e) {
            e.preventDefault();
            editor.edit($(this).closest('tr'), {
                title: 'Edit record',
                buttons: 'Update'
            });
        });

        // Delete a record
        $('#indexTable').on('click', 'a.editor_remove', function (e) {
            e.preventDefault();
            editor.remove($(this).closest('tr'), {
                title: 'Delete record',
                message: 'Are you sure you wish to remove this record?',
                buttons: 'Delete'
            });
        });


        $('#indexTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: 'jobdescription/?action=dte',
            responsive: true,
            columns: [
                {
                    "data": "job_title"
                },
                {
                    "data": "description"
                },
                {
                    "data": "occupation_group.occupation_group"
                },
                {
                    "data": "occupation_title.occupation_title"
                },
                {data: 'id',
                    className: "center nowrap",
                    bSortable: false,
                    render: function (data, type, row) {
                        return '<a href="" class="editor_edit"><button class="btn btn-primary">Edit</button></a> \n\
                                   <a href="" class="editor_remove"><button class="btn btn-danger">Delete</button></a>';
                    }
                }
            ],
            select: false,
            lengthChange: false
        });
    });
}(jQuery));

Viewing all articles
Browse latest Browse all 82271

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>