Editor selectize creat doesn't works

zess

I use following css and js

jquery and jqueryui load before

<link rel="stylesheet" type="text/css" href="datatables/media/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="datatables/extensions/Responsive/css/responsive.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="datatables/editor/css/editor.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="datatables/extensions/Buttons/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="datatables/extensions/Select/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="datatables/extensions/Selectize/css/selectize.min.css">
<link rel="stylesheet" type="text/css" href="datatables/extensions/FieldType-Selectize/editor.selectize.min.css">

<style>
   div.selectize-dropdown {
      z-index: 12;
   }
   a.buttons-collection {
      margin-left: 1em;
   }
  </style>

<script type="text/javascript" src="js/datepicker-de.js"></script>

<script type="text/javascript" src="datatables/media/js/jquery.dataTables.min.js" ></script>
<script type="text/javascript" src="datatables/extensions/Responsive/js/dataTables.responsive.min.js" ></script>
<script type="text/javascript" src="datatables/editor/js/dataTables.editor.min.js"></script>
<script type="text/javascript" src="datatables/extensions/Buttons/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="datatables/extensions/Select/js/dataTables.select.min.js"></script>

<script type="text/javascript" src="datatables/extensions/JSZip-2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="datatables/extensions/pdfmake-0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" src="datatables/extensions/pdfmake-0.1.18/build/vfs_fonts.js"></script>
<script type="text/javascript" src="datatables/extensions/Buttons/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="datatables/extensions/Buttons/js/buttons.print.min.js"></script>
<script type="text/javascript" src="datatables/extensions/Selectize/js/standalone/selectize.min.js"></script>
<script type="text/javascript" src="datatables/extensions/FieldType-Selectize/editor.selectize.min.js"></script>

(function( factory ){
    if ( typeof define === 'function' && define.amd ) {
        // AMD
        define( ['jquery', 'datatables', 'datatables-editor'], factory );
    }
    else if ( typeof exports === 'object' ) {
        // Node / CommonJS
        module.exports = function ($, dt) {
            if ( ! $ ) { $ = require('jquery'); }
            factory( $, dt || $.fn.dataTable || require('datatables') );
        };
    }
    else if ( jQuery ) {
        // Browser standard
        factory( jQuery, jQuery.fn.dataTable );
    }
}(function( $, DataTable ) {
   'use strict';
    
    
   if ( ! DataTable.ext.editorFields ) {
       DataTable.ext.editorFields = {};
   }
    
   var Editor = DataTable.Editor;
   var _fieldTypes = Editor ?
       Editor.fieldTypes :
       DataTable.ext.editorFields;
    
    
   _fieldTypes.selectize = {
       _addOptions: function ( conf, options ) {
           var selectize = conf._selectize;
    
           selectize.clearOptions();
           selectize.addOption( options );
           selectize.refreshOptions();
       },
     
       create: function ( conf ) {
           var container = $('<div/>');
           conf._input = $('<select/>')
                   .attr( $.extend( {
                       id: conf.id
                   }, conf.attr || {} ) )
               .appendTo( container );
     
           conf._input.selectize( $.extend( {
               valueField: 'value',
               labelField: 'label',
               dropdownParent: 'body'
           }, conf.opts ) );
    
           conf._selectize = conf._input[0].selectize;
    
           if ( conf.options || conf.ipOpts ) {
               _fieldTypes.selectize._addOptions( conf, conf.options || conf.ipOpts );
           }
     
           return container[0];
       },
     
       get: function ( conf ) {
           return conf._selectize.getValue();
       },
     
       set: function ( conf, val ) {
           return conf._selectize.setValue( val );
       },
     
       enable: function ( conf ) {
           conf._selectize.enable();
           $(conf._input).removeClass( 'disabled' );
       },
     
       disable: function ( conf ) {
           conf._selectize.disable();
           $(conf._input).addClass( 'disabled' );
       },
     
       // Non-standard Editor methods - custom to this plug-in
       inst: function ( conf ) {
           return conf._selectize;
       },
    
       update: function ( conf, options ) {
           _fieldTypes.selectize._addOptions( conf, options );
       }
   };
  
}));


var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {   

   editor = new $.fn.dataTable.Editor( {
      ajax:  'datatables/editor/ajax_geraete.php?format=custom',
      table: '#myTable',
      fields: [
         {
            label: "Standort:",
            name:  "geraet.standort",
            type:  "selectize",
            opts: {
               
               allowEmptyOption: true,
               create: function(input) {
                  return {
                     lable: input
                  };
               },
               
               labelField: 'label',
               valueField: 'value',
               sortField: 'label',
               searchField: 'label',
               dropdownParent: 'body',
               options: [

   <?php
            try{
               $sqlStandort = ("
               SELECT 
                  DISTINCT geraet.standort
               FROM geraet
               ORDER BY geraet.standort");
               $kommando = $db->prepare($sqlStandort);
               $kommando->execute();
               $kommando->bind_result($standort);
               while ($kommando->fetch()){
                  echo "               { label: '".htmlspecialchars($standort)."', value: '".htmlspecialchars($standort)."' }, \n";
               };
               $kommando->close();
            } catch (Exception $e) {
               echo 'Fehler: ' . htmlspecialchars($e->getMessage());
            }       
   ?>

               ]               
            },

now my problem

I can select any Item but the add / creat function doesn't work

it only work when I delete the php part which I use to fill options with data

allan

I'm afraid I don't quite understand - do you mean the Editor "Add" button doesn't work? In what way does it not work? Do you get an error? Can you link to the page showing the issue so it can be debugged please.

Allan

zess

I have many data in the table.
When I want to edit this field then I can choose one entry of "options" part but I can't insert a new input in the selectize field.

at https://brianreavis.github.io/selectize.js/

there are some examples.
The "Single Item Select" has the functionality that I want to use.

It only works if I delete the php part which I use to fill "options" part with data.
When I have selectable data then I can't write into the field.

tomorrow I can send you a link

allan

Hi,

Thanks for the link. It looks like the issue might be how the create property is being used for Selectize. Its documentation states:

Allows the user to create a new items that aren't in the list of options. This option can be any of the following: "true", "false" (disabled), or a function that accepts two arguments: "input" and "callback". The callback should be invoked with the final data for the option.

But your code makes no use of a callback:

               create: function(input) {
                  return {
                     lable: input,
                     value: input
                  };
               },

I haven't dug into the Selectize code since that is external to DataTables, but it might be worth trying what their documentation suggests and use a callback.

I also just saw that lable should be label (if the return option works at all? The documentation doesn't seem to mention that).

Allan

zess

thank you Allan, now it works

I must use only

create: true,

and if there any content I must delete them first
then I can write a new one into the field

this was my mistake, I would to overwrite the exist entry
so I thought there is something wrong