Win a copy of Re-engineering Legacy Software this week in the Refactoring forum
or Docker in Action in the Cloud/Virtualization forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Web UI: how to select and add items from 1 list to another list

 
H Paul
Ranch Hand
Posts: 471
4
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
<thanks>This is web ui related but I do not where to put it. Move if needed.</thanks>

What/where/how can I do the following or is there any existing UI features for the following:

1. There is a list of predefined items on the right. LIST R (whatever UI that is appropriate)

2. There is a list of selected items on the left. LIST L (whatever UI that is appropriate)

3. There is an ADD button to add the item(s) that the user selected from LIST R to LIST L.

4. There is a REMOVE button to remove selected item(s) LIST L.

5. On submit, the server will get a list of items from LIST L in the order it was selected.
This is the main requirement because the back-end expect a list of items in the order it was selected.

For those who are familiar with Eclispe: Add or Remove Projects to the server. This is a kind of similar web UI I'm looking for.

1M Thanks
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64629
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
By "web UI" do you mean HTML?
 
H Paul
Ranch Hand
Posts: 471
4
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Yes.

There are so many web frameworks out there. I am not sure.

What I'am looking for is something simple just enough to do the job.
 
Komal Renu
Ranch Hand
Posts: 51
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Paul,

From your requirements following is the solution I could provide.
I have implemented the same thing in one of my projects using jsp and javascript.
Here's what you need to do:

1. On your jsp, define a multibox (<select> with multiple true), one for List L, and other one for List R.
2. Assign form properties to these two select boxes.
3. Between the two list boxes you can give an arrow image to point from left to right (or any such image/button etc to on click of which the selected values should transfer to List R).
4. Now once the user has selected multiple values from the List L and then clicks on the image/button, use javascript to iterate over elements of list L and pick up the selected ones and keep adding them to an Array.
5. Lastly get the elemet for List R, by document.getElementById() and assign that array to the List R

Hope this helps.

Thanks and Regards,
-------------------------------------------------------------------------------------
Komal Renu | krenu@infocepts.com | www.infocepts.com
-------------------------------------------------------------------------------------
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic