Cannot get select2 working in Editor

Cannot get select2 working in Editor

Lucho_1312Lucho_1312 Posts: 30Questions: 9Answers: 0
edited September 2015 in Free community support

Hi!
I'm making some tests with the editor, so I've been trying a lot of time to use Select2 plugin, but I can't make it work. I always get this error:

dataTables.editor.js:109: Uncaught TypeError: Cannot read property 'create' of undefined

I'm setting the field like this:

{
   label: "Brand", 
   data: "brand", 
   name: "brand",
   type: "select2", 
   "opts": {
   "ajax": {
       "type": "GET",
       "url": "/api/v1/cars/brands",
       "dataType": "json",
           "cache": true
    }
   }
}

Also, i'm including both select2 files:

/select2/select2.css

/select2/select2.js

Am I missing any file?

Thanks!
Luciano

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,747Questions: 1Answers: 10,509 Site admin
    Answer ✓

    You need to also include the Select2 field plug-in for Editor as it is not a built in field type.

    Allan

  • Lucho_1312Lucho_1312 Posts: 30Questions: 9Answers: 0

    Oh, so I see now that the problem is that I can't see the plugin download link as I'm in trial now :(

    As that didn't work, I'm tried to make my own plugin, because I need editor for some tests agains a node js app.

    This is what I have until now (not working well yet because it doesn't initializates when I click it in the inline editing, but if I finish it I can use it for my test to see if I'll use editor or not)

    (function($, DataTable) {
    
    if (!DataTable.ext.editorFields) {
        DataTable.ext.editorFields = {};
    }
    
    var Editor = DataTable.Editor;
    var _fieldTypes = DataTable.ext.editorFields;
    
    _fieldTypes.select2 = {
        create: function(field, id) {
            var that = this;
    
            field._enabled = true;
            field._input = $('<select />')[0];
    
            $(field._input).select2(field.opts);
    
            return $(field._input);
        },
    
        get: function(conf) {
            return $(conf._input).select2('val');
        },
    
        set: function(conf, val) {
            return $(conf._input).select2('val', val);
        },
        enable: function ( field ) {
            field._enabled = true;
            $(field._input).prop("disabled", false);
        },
        disable: function ( field ) {
            field._enabled = false;
            $(field._input).prop("disabled", true);
        }
    };
    

    I left it here, maybe it's useful for someone else or someone have an idea to finish it.

    Thanks!
    Luciano

This discussion has been closed.