Select2 tagging issue

kaustubh.agrawal2000

Hi Allan,

I am trying to use Select2 plugin with Tagging enabled.

Although it works correctly, but I am facing 1 issue in editing

When i try and edit a record, the tags/select options are not pre populated in the select box.. and when I try and update the data manually it shows all the tags as selectable options and not tags..

Kindly please help me with this.

website : http://gadhiya.in
Uname : kaustubh.agrawal2012@gmail.com
Pwd : 12345678

goto: http://gadhiya.in/commoditytransactionfield

try editing the last row .. with Commodity name as "Soyabean"

the JS file path is
http://gadhiya.in/web/js/commodity_transaction_field.js

the API response can be checked here
http://gadhiya.in/api/commoditytransactionfield

The response has "select_options" as
select_options: [
"Spot",
"Delivery"
],

but they are not shown as tags .. but select options.

Regards
Kaustubh

allan

I believe the issue is this:

    editor.on( 'initEdit', function ( e, json, data ) {
        editor.field('select_options').update(data['select_options']);
    });

initEdit is triggered after the field value has been set (so that you can modify it if you need). So what is happening is that Editor is attempting to set the values, finding that there are no options defined, thus causing nothing to appear. Then the options are being set, but too late.

Are they unique per row? It looks to me like the current setup would only how the currently selected options. How would you add new ones? Allow you planning to allow free form text input to create new tags?

Allan

kaustubh.agrawal2000

Hi Allan,

The user should be able to add new tags by just typing new tags (strings) into the text box.
something like : https://select2.org/tagging

Also, the tags are not unique per row..

what do you suggest I do??

allan

I'm with you now. Drop the field().update() call - you don't need that since the information is already in the field's value.

What to do is initialise your field with something like this:

            {
                label: "Site:",
                name: "users.site",
                type: "select2",
                separator: '|',
                opts: {
                    multiple: true,
                    tags: true
                }
            }

That should allow it to operate as you need.

Allan

kaustubh.agrawal2000

Hi Allan..
I tried doing that but it still doesnot work.
IF I remove the field().update() nothing shows up in the select options.

Please check it out and guide me accordingly.

Regards
Kaustubh

allan

Using those options, Select2 expects the data to just be a string. Currently you have it as an array - e.g. select_options: [ "Spot", "Delivery" ]. Are you able to modify your server-side script to make it a comma separated string?

Allan

kaustubh.agrawal2000

Hi Allan,
I tried as you mentioned,
The API now returns a Comma seperated string....
http://gadhiya.in/api/commoditytransactionfield?_=1519149689425

Removed the field().update() part but still it dosent work.

in fact if I remove field().update() .. I dont even see the select options now

Kindly help me with this, else will have to totally discard the select2 plugin as this is a critical requirement from the client..

Thanking you.

Regards
Kaustubh

allan

This is a bit frustrating, but it looks like what you need to do is use:

        {
            label: "Select Options(csv)",
            name: "select_options",
            type: "select2",
            separator: ',',
            attr: {
                "multiple": true,
            },
            opts: {
                "tags": true,
            }
        },

and:

editor.on( 'initEdit', function ( e, json, data ) {
    editor
        .field('select_options')
        .update(data['select_options'])
        .val(data['select_options']);
});

There must be a better way, but that looks like what is needed with Select2 at the moment.

Allan

kaustubh.agrawal2000

Hi Allan,
Thanks a lot for the support .. it works like a charm..

Thanks a lot !!!

Cheers