I have a UI where I show a list of features in a dropwdown. Based on user selection from the dropdown, I render the feature. On landing I keep that dropdown disabled until I receive some data from ajax call.
So this is the flow -
* User lands on the page, dropdown for selecting features is disabled.
* Once loading completes, I send an ajax call to receive the data.
* Once that data is obtained, I enable the dropdown.
* User then selects a feature from the dropdown.
* That feature is rendered.
* At any time user can select any feature from the dropdown.
* Based on some user interaction, I will need to fire the ajax call again & disable the dropdown until then, so that I recalculate again on the server side which all features to be shown inside the dropdown.
* Cycle continues.
Why am I waiting for data to enable the dropdown?
Because the feature list which is being shown requires some data for getting rendered. That data is received using ajax call which I trigger after landing. The data is a map where key is featureName & value is the object which will have necessary information to render the corresponding feature. Hence, I don't want to enable dropdown until I have all the data for the features to be rendered.
I tried implementing this but it's getting very messy.
Breaking down the components which I am trying to implement in a clean way -
* Store each feature's corresponding data which I am getting through ajax call.
* On receiving the data, enable the dropdown.
* When another ajax call is required, disable the dropdown.
* When user selects 1 feature, do some processing on that feature's corresponding data & render that feature.
I am thinking about flux pattern where my first action would be when data is received from the ajax call & after that the further actions would come from UI depending on which feature user has asked to render. This approach is also not looking good.
LOOK! OVER THERE! (yoink) your tiny ad is now my tiny ad.