[Question] Select componet data is not refreshed when url is used

[sreesama]

I am getting the select component data from url. The url is executed once when the page is loaded first time and the data is showing up in drop down. But when i reopen the same page after some navigation thru other pages, the url is not triggered when i try to select the data from drop down. The same old data is showing up. If there is any change to the data during this time will not be available in drop down as the url is not triggered. I have relogin in to the page to see the new data items. I tried refreshOn as well, but no help, still the same old data and url is not triggered when i verify Network tab in developer tools..

My component details: { "label" : "Site", "widget" : "choicesjs", "dataSrc" : "url", "data" : { "url" : "http://Some URL" }, "valueProperty" : "", "template" : "{{ item.name }}", "validate" : { "required" : true, "unique" : false, "multiple" : false }, "key" : "site", "type" : "select", "selectValues" : "value", "limit" : 10.0,

[wag110894]

@sreesama, can you provide a jsfiddle of the form so that we can replicate?

[MiguiTE]

Same here. I've created a form with a Select component that triggers the URL only once (once I clicked as it has lazy load). After navigating through other pages in my app and returning to the form, it doesn't call the URL again. Even with the refresh on any change option, it doesn't call the URL again.

@wag110894 Easily reproducible (refresh on case) in formio builder

[
    {
        "label": "Number",
        "mask": false,
        "spellcheck": true,
        "tableView": false,
        "delimiter": false,
        "requireDecimal": false,
        "inputFormat": "plain",
        "key": "number",
        "type": "number",
        "input": true
    },
    {
        "label": "pokemon",
        "widget": "choicesjs",
        "tableView": true,
        "dataSrc": "url",
        "data": {
            "values": [
                {
                    "label": "",
                    "value": ""
                }
            ],
            "url": "https://pokeapi.co/api/v2/pokemon?offset=20&limit=20",
            "headers": [
                {
                    "key": "",
                    "value": ""
                }
            ]
        },
        "template": "<span>{{ item.name }}</span>",
        "refreshOn": "data",
        "selectThreshold": 0.3,
        "persistent": false,
        "key": "pokemon",
        "type": "select",
        "indexeddb": {
            "filter": {}
        },
        "selectValues": "results",
        "input": true,
        "disableLimit": false
    }
]

[wag110894]

Hello @MiguiTE, can you provide a jsfiddle as well as a video of the issue?

[MiguiTE]

Hello @wag110894! I do not know how to use jsfiddle to reproduce the navigation part, but I do can provide one where the refresh on options doesn't work. And also a video about it on formio builder.

• JSFiddle
• Video

In the video, you can see that despite having refresh on any change when I change the value of the component Number, the options of pokemon doesn't refresh. It doesn't even trigger the URL at second time.

[wag110894]

Hello @MiguiTE, are you wanting to clear the pokémon select URL when a change occurs? If so, then you will need to add the Clear Value On Refresh Options checkbox on Data Select Settings.

[MiguiTE]

Hello @wag110894, what I really want is to refresh the pokémon options when any other value changes (or even better, every time the form is loaded).

The URL where the options come from is just triggered once, the first time the form is loaded. Despite having refresh options on any change, the options aren't refreshed (and the url is not triggered). I do even have Persistent option to none, which I suppose it means that options shouldn't be cached anywhere and, therefore, url should be triggered every time the select component is in focus.

To sum up: the ideal scenario for me is that the select URL is triggered everytime someone clicks on the select component. (Also trigger the URL when data change or form is loaded will work). How do I configure the select component for this purpose?

[MiguiTE]

Hello @wag110894 any update on this?

[jmast02]

@wag110894 @MiguiTE

Hey, I was also looking to incorporate something similar. I was wondering if this has been resolved, or feature has been added?

[woahitsjc]

I found a way to handle this is by setting ignoreCache to true. Can potentially slow the performance but if the data coming from the request is constantly changing then it's probably worth doing this.