Losing select2 field value when loading options via ajax

kevan.watkins

I have a select2 field (problem_field) whose options depend on the value of another field (dependant_field).
I update the options with:

editor.dependent("dependant_field", function (val) {
  $.ajax({
            type: "POST",
            ...,
            success: function (options) {
                editor.field("problem_field").update(options);
    });

If I remove the ajax call and load the options directly then it works.
If I leave the ajax call in place and change the field type to "select" then it works.

So it seems that select field allows you to set value not in options, but select2 does not.
Is there a work around to this?
Something I can do in initEdit to save the field values, and set them after field().update() ?

Kind regards,
Kevan

allan

Just to check my understanding, if problem_field is select then it works, but if it is a select2 it doesn't? That sounds like a bug in the select2 integration.

Are you able to give me a link to the page showing the issue please? I'm not aware of a problem in the select2 integration here.

Allan

kevan.watkins

Correct.

I will set up a test on http://live.datatables.net and post tonight.

kevan.watkins

Hmm, is there a URL for editor.select2.js so I can include it in the live.datatables.net example?

kevan.watkins

Ah, nevermind..
https://editor.datatables.net/plug-ins/download?q=field-type/editor.select2.js

kevan.watkins

Here is a simple demonstration:
http://live.datatables.net/zubiqeke/5/edit?html,js,output

If you comment out as follows:

//editor.on('initEdit', function () { 
    editor.field("field1").update(options);
    editor.field("field2").update(options);
//});

Then it will work.
But if the select2 field options are set after the field value assignment is done, e.g. in initEdit, it's values are lost if they do not exist in the options.

allan

Thanks for the example - much appreciated! I certainly do see the issue. Let me dig into it and get back to you. I think I know what needs to happen... (i.e. what is causing the issue)

Allan

ManuLan

Did you find a solution? I have the same problem.

allan

This should have been resolved in Editor already. Could you give me a link to your page please @ManuLan.

Allan

karmendra

I am not sure it is solved. Editor v 1.9.2 is what I upgraded to, copied the latest editor.select2.js plugin, but it doesn't seem to work for me in following case.

...
{label: "Country", name: "country", type: 'select2', options: @json($countries)},
{label: "State", name: "state", type: 'select', className: 'required'},
...

with select in second field when I select a row with county India and state Karnataka and hit Edit. Country is automatically selected as India in the first dropdown and triggers the ajax to fetch list of states and then Karnataka is automatically selected in the second dropdown.

editor.dependent('country', function (val, data, callback) {
    $.ajax({
        url: '/getstates,
        data: {
            country: val
        },
        dataType: 'json',
        success: function (json) {
            editor.field('state').update(json);
            callback(json);
        }
    });
});

Now the moment I change the type for state field to select2

{label: "State", name: "state", type: 'select2', className: 'required'},

First filed is automatically selected to India like before but after the ajax call the state filed is not Karnataka, it is either empty or the first value in the newly loaded options.

allan

If you could give me a link to your page so I can debug it, that would be really useful.

Thanks,
Allan