0

I'm making a GUI for some browser application in HTML and javascript.

At the moment, I'm facing the challenge of implementing a page where a three-level deep "cascading choice" needs to be made. I was just wondering if there's a design pattern I could stick to, to make my code more manageable, since this is not a very uncommon problem.

The structure I need to achieve is the following:

{ A => { B => [C, C, ...] }

I would roughly use the following GUI layout (made with Balsamiq):

Mockup of the GUI from Balsamiq

The problem is, as you can see, that parts of the view get hidden/removed all the time, and on top of that I need to store the changes during the lifetime of the page. It's not as simple as the mockup, as I don't use just multiselects to take care of everything...

How do you usually tackle this kind of problem?

MarioDS
  • 12,895
  • 15
  • 65
  • 121

2 Answers2

1

Just put every list into a json container
then put a click listener on that lists and add the specific json items to the next list

//// PSEUDOCODE ////
var json{
  "a": {
    "a1": {
       "b1": "item",
       "b2": "item",
       "b4": "item"
    },
    "a2": {
     //stuff
    }
   },
   "b":{
     "b1": "items"
      //etc
   }
  }


select(){
 var item = clickedItem.id;
 case: a
   putintoB(json.item)
 case: b
   putintoC(json.item)
}
Pika
  • 154
  • 11
  • That would obviously be the very basics, but this doesn't particularly help me much... – MarioDS May 23 '13 at 12:54
  • Try to mixup these two "tutorials"... hope it works http://stackoverflow.com/questions/1650090/javascript-multi-level-array-of-json-objects-how-to-access-key-value-pair-in-s http://stackoverflow.com/questions/5940513/store-json-string-in-input-field-value – Pika May 23 '13 at 16:27
  • I appreciate your efforts but my question is much higher level than that, I already know how JSON works and I'm pretty comfortable with javascript. – MarioDS May 23 '13 at 16:47
  • I'm not stuck, I'm just asking for advice on how to get going on this, more specifically if there exists a good design pattern. With javascript you often have to be careful not to cause a memory leak. – MarioDS May 24 '13 at 14:23
1

This will not automate many things, but seems to be a problem for Observer pattern.

Basically, you'll have an observer watching the actions on the first select, than another watching the second and so on...

When one observer is notified, it will take actions, such as display the other select.

It's just a raw idea, is hard to give you a more detailed suggestion without having further details about what you're trying to do.

Henrique Barcelos
  • 7,670
  • 1
  • 41
  • 66
  • It's what I already kinda decided on but I was hoping on something more high-level. Thanks anyway! – MarioDS May 24 '13 at 22:28