select2 control options

weskey

Populate the list of projects so that they’re relative to the customer when adding a contact but only if the customer is changed. Otherwise the values returned with the API are removed.

When creating a new contact in my web application I’m using a select2 control to allow selection of one or more projects to which a contact should be associated.

When creating a new contact, the customer is selected from a select control and I would like the projects select2 control to be populated based on this.

When I try using the following code to do this, the values originally retrieved for the customer are cleared.```

$(editor.field('customer').node()).on('change', function () {
                        var custId = editor.field('customer').val();
                        var optionsProjects = [];
                        $.getJSON('http://localhost:3001/v1/' + custId + '/custProjects', {
                            term: "-1"
                        },
                            function(data) {
                                var option = {};
                                $.each(data, function(i, e) {
                                    option.label = e.projName;
                                    option.value = e.projID;
                                    optionsProjects.push(option);
                                    option = {};
                                });
                            }
                        ).done(function() {
                            editor.field('projects[].projId').update(optionsProjects);
                        })
                    
                    } );

Is there a better way to do this so that the contact project values retrieved initially are retained for editing / viewing and the projects in the select2 control are updated dynamically based on the selected value of customer?

allan

Yes, with Select2 you could use its ability to dynamically add options. Use editor.field(...).inst() on your select2 field to get the Select2 instance so you can do programmatic control.

Allan

weskey

Thanks Allan, how can I get the value of the customer select control so that I can use that to populate the projects select2?

allan

The field().val() method can be used to get a field's current value.

Allan

weskey

Thanks Allan, after reading through the documentation it seemed dependent might be the way to go so I'm using the following to populate the project select control based on the selection of customer...

editor.dependent('custID', function(val, data) {
                        if (val != '') {
                            var optionsVariationProject = [];
                        $.ajax({
                            url: 'http://localhost:3001/v1/' + val + '/custProjects',
                                dataType: 'json',
                                type: 'GET',
                                success: function(json) {
                                    var option = {};
                                    $.each(json, function(i, e) {
                                        option.label = e.projName;
                                        option.value = e.projID;
                                        optionsVariationProject.push(option);
                                        option = {}
                                    })
                                    
                                }
                        }).done(function() {
                                        editor.field('projID').update(optionsVariationProject);
                                    })    
                        }
                    });

It works fine but the loading indicator image on the dependent select control never disappears. Do you know why that is?

colin

Hi @weskey ,

You need to complete the action, this was a change from Editor 1.8.

If you add return {} to the bottom of that dependent() method, I think that'll do the trick. Or add a callback() with the third parameter.

Hope that does the trick!

Colin

weskey

Thanks @colin, adding a return{} did it.