Click here to Skip to main content
15,885,886 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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.

What I have tried:

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.
Can there be any cleaner approach/design pattern which I can follow in Javascript. Any suggestions will be greatly appreciated
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900