select2 control options

select2 control options

weskeyweskey Posts: 12Questions: 5Answers: 0

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?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • weskeyweskey Posts: 12Questions: 5Answers: 0

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • weskeyweskey Posts: 12Questions: 5Answers: 0

    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?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    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

  • weskeyweskey Posts: 12Questions: 5Answers: 0

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

This discussion has been closed.