Win a copy of Node.js Design Patterns: Design and implement production-grade Node.js applications using proven patterns and techniques this week in the Server-Side JavaScript and NodeJS forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
  • Campbell Ritchie
  • Ron McLeod
  • Rob Spoor
  • Tim Cooke
  • Junilu Lacar
  • Henry Wong
  • Liutauras Vilda
  • Jeanne Boyarsky
Saloon Keepers:
  • Jesse Silverman
  • Tim Holloway
  • Stephan van Hulst
  • Tim Moores
  • Carey Brown
  • Al Hobbs
  • Mikalai Zaikin
  • Piet Souris

Looking for design pattern/clean high level approach to implement this

Posts: 8
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
Can there be any cleaner approach/design pattern which I can follow in Javascript. Any suggestions will be greatly appreciated.
    Bookmark Topic Watch Topic
  • New Topic