Is there a way to force update select elements?

help
1

What I have:

A schema that uses select2 (aldeed)
Multiple select2 drop downs, options of each area dependent on the previous dropdown selection.
Im using data: attribute of select2 in order to populate the dropdown.

Issue:

The first drop down fires fine, on template load
The second and subsequent dropdowns don’t populate the data even though I see them in the console logs
This is because all the dropdowns are getting initialized when the template gets rendered.

Question:

How do I refresh the dropdown or let it know that it has fresh data to be shown?

Implementation

Schema:

X:{
type: String,
            autoform:{
                "type":"select2",
                id:"X",
                }
            },
},
Y:{
type: String,
            autoform:{
                "type":"select2",
                id:"Y",
                }
            },
},

Template:

{{> afQuickField name = "X" select2Options=XOptions }}
 {{> afQuickField name = "Y" select2Options=YOptions }}

Helpers

  XOptions: function() {
        finalResult =    // some query to retrieve options
    return {
    data: finalResult
     }


   YOptions: function() {
        finalResult =    // some query to retrieve options based on XOption's chosen option
    return {
    data: finalResult
     }

The only way I got thisto work is if I out a {{#if}} block in the html template to render the second and subsequent dropdowns after the first one is chosen.

So my question is, how do I let the dropdown know that it’s data has chanded and it must refresh itself?

Thanks

2

It was quite a long time ago, but did you figure it out? Having a similar problem.

3

I believe you can store the options for the dropdown in a ReactiveVar, the template will re-render on change.

1 Like