Select2 (Other?) on Editor Modal

joseoliveiraborlas

I've been trying to get Select2 (is there a better alternative to DTE?) working with the editor, but it's been tricky.
Basically I wanted to use Select2 for when editing or adding a row in the table, in the editor's form/modal, in each input it suggests what the specific column of that input already has?

For example: in 'brands' column I already have some values like BMW, Mercarrari, Audi, Mercedes... When creating or editing a line, when I write "mer" it will already show the dropdon auto complete for "Mercedes" or "Mercarari".

The furthest I've come is not having console errors but the input disappears. Does anyone have a practical example of this scenario perhaps? It's easier to learn to try to understand the code. I couldn't find examples on the forum.

I have a test page if anyone needs to test. (I already sent it by private message to some users too, it's the same)

rf1234

I have this for "selectize", not for Select2. I like "selectize" because it does what you want and it even allows you to create new options on the fly.

Take a look at this if you are interested:
https://datatables.net/forums/discussion/comment/217963
Search for: "Use selectize and create options on the fly"

joseoliveiraborlas

Can you check if the code is right?

Is required use ajax to obtain data? I don't know what i doo whit .php:
<?php
$options = array(
array('value' => '1', 'text' => 'Option 1'),
array('value' => '2', 'text' => 'Option 2'),
array('value' => '3', 'text' => 'Option 3'),
array('value' => '4', 'text' => 'Option 4'),
array('value' => '5', 'text' => 'Option 5')
);

header('Content-Type: application/json');
echo json_encode($options);

I send you a page to test it, can you check on pm please?

rf1234

No, it is not required to use ajax. You can also define the options statically. You seem to be updating the options all the time whenever a field entry in "marca" is being made. I've never done it that way - and it doesn't seem to work.

So either your load the options on Editor initialization or you just define the options statically as usual. Since you don't want to add options on the fly that is probably ok for you, too.

I found out why this isn't working with "selectize" and probably not working with Select2 either. You use this code:

editor.dependent( 'marca', function ( val, data, callback ) {
                marca = val;
                $.ajax( {
                    url: "assets/sel.php",
                    dataType: 'json',
                    type: 'POST',
                    data: {
                        marca: marca
                    },
                    success: function ( json ) {
                        editor.field('marca').update(json);
                    }
                } );

                return {}
            }, {event: 'keyup change'});

As far as I know "field().update() only works with the built-in field type "select".

But you don't need this anyway!
You can load the options on data table initialization as per my example in the link above or you use them statically.

https://editor.datatables.net/reference/api/field().update()

rf1234

To add static options just add "options" like in here:

{"label": "Marca:","name": "marca", type: "selectize",
                    options: [
                            { label: "Option 1", value: "0" },
                            { label: "Option 2", value: "1" },
                            { label: "Option 3", value: "3" }
                        ],
                        opts: {
                            create: false,
                            maxItems: 1,
                            maxOptions: 20,
                            allowEmptyOption: false,
                            closeAfterSelect: true,
                            placeholder: "Select",
                            openOnFocus: false
                        },
            },

joseoliveiraborlas

Maybe I didn't explain myself well what I wanted. I needed the filling suggestions to be those already existing in that column, or the option to add another one. So yes, I need that option.

in other words, imagine that the table already has some lines in which the "brand" column already contains a line with BMW, another Mercedes, another Audi....... when editing or adding something, I want the suggestions of that input are the same (those already existing in the table/DB). if I don't have the one I want, I'll have to write a new one. What will make the next addition/edit already included.

Did you understand what I meant? sorry for my English .

joseoliveiraborlas

Maybe it's even a good idea to use ajax in a .php. That way I can scale the thing, and create something more dynamic.

For example, in the first field I can choose the object, say "Cars, Toys, Cell Phones". And in the "Brand" field, when I had chosen "Cars" on last field for example, the .php just goes to the database to fetch already available values ​​from the "Brand" column WHERE object=cars.

rf1234

I am not sure whether I understand what you require. If you use "selectize" you can't dynamically update the options because "field().update()" doesn't work.

You can dynamically remove and add the field though (as a work around). That's what I am doing here:

editor
    .on('open', function ( e, mode, action ) {
        this.clear( "vat_result.vat_subcategory_id" ); 
        this.add( {
            label: lang === 'de' ? 'Subkategorieauswahl:' : 'Sub Category Selection:',
            name: "vat_result.vat_subcategory_id", //render vat_top_category.vat_name, vat_categorie.vat_name, vat_subcategory.vat_name
            type: "selectize",
            options: subcategoryOptions,
            opts: {
                create: false,
                maxItems: 1,
                openOnFocus: false,
                allowEmptyOption: false,
                placeholder: lang === 'de' ? 
                    "Subkategorie auswählen bzw. Suchbegriff eingeben (Oberkategorie / Kategorie / Subkategorie)" : 
                    "Select Subcategory or use search (Top Category, Category, Subcategory)"
            }
        }, null );
    })

joseoliveiraborlas

That code I already see in forum, somewhere... Then selectize inst a option. I go avance whit the Select2, whit ajax option to update the options via.php. Do you have some example to use that? The only requirement is the filed I want it send via ajax and the other fields too if selected option is done already, and then the php will return the values options to the that field.

joseoliveiraborlas

Finally I got it with select2!

I only found a problem. When I store the information, when the page is refreshed and I want to edit the values again, the Editor not auto populate inputs select2. Like:

joseoliveiraborlas

If anyone cant see the example code: bit.ly/3LgNISn

joseoliveiraborlas

Any ideias?

rf1234

The example you posted only allows single select! Hence your screenshots cannot be reproduced.

joseoliveiraborlas

Hey,
The error its in both, multiple or not. But now i have the two types available for try.

rf1234

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor({
        ajax: 'includes/table.sells.php',
        table: '#tbbl',
        fields: [


            {
                label: 'Marca:',
                name: 'marca',
                type: 'select2',
                opts: {
                    "theme": "bootstrap",
                    tags: true,
                    minimumInputLength: 0,
                    placeholder: 'Marca',
                    allowClear: true,
                    ajax: {
                        url: 'select2.php',
                        dataType: 'json',
                        delay: 250,
                        data: function(params) {
                            return {
                                q: params.term,
                                nomecampo: "marca",
                            };
                        },
                        processResults: function(data) {
                            return {
                                results: data
                            };
                        },
                        cache: false,
                    }
                }
            },

Not sure what you are trying to do here. You seem to be overwriting the field with something so that the field content (i.e. existing selections) cannot be displayed. I guess you only want to update the options, right? And you want to reload those options every time you edit or create a row. If so this can never work: Editor and DT initialization are only executed once and not again in case you edit a row.

If you just want to update the options remove the ajax call here to read the field contents from the server as usual.

On datatable "select" or on Editor "open" you could read the options from the server via an ajax call and then update the field if the select2 plugin allows this. As I said above the selectize plugin does not support this: Hence I needed to "clear" and "add" the respective field with the updated options.

https://datatables.net/reference/event/select

https://editor.datatables.net/reference/event/open

joseoliveiraborlas

I didn't understand. I'm using select2 to serve as autocompletion. I want you to indicate options that are already in the database. for example: if I am typing “Sams” I want the options to be “Samsung” or Samsoel” or “Samsig “ and like that. like auto complete works. If it doesn't exist, I put a different one and for the next line I will create, will it appears. only that. the problem is that after sending to the server, on loading the editor does not collect and does not fill the inputs using select2. The saving works well. When I try edit (after refreshed da page) the editor don't auto fill the inputs of select2 previsious saved. Do you have tested on the page @rf1234 ?

rf1234

Yes, I tested on the page. Again: your ajax call will not work as you intend it should. "Selectize" has built-in auto-complete as well. And I still don't need those ajax calls that you have in your code above.

Since I am not using Select2 I cannot write your code ...

If someone else wants to take over?! This was my last post in this thread. I don't seem to be able to get the right message across. Probably my fault

joseoliveiraborlas

Message received successfully.

joseoliveiraborlas

Maybe @kthorngren or @allan, can help me?

joseoliveiraborlas

I finally got it. The problem was in something so basic: it had to return the value when editing, from the string sent "initialValue: true". That part apparently already tried, the problem is that it was sending the original value with double quotes.
Thanks to those who tried.

allan

Hi,

Thanks for posting back. Sorry I couldn't reply over the weekend, but great to hear you've got it working now.

Allan