Widgets for choosing several subsets

JavaScript
1

I am developing an UI piece for our server, using jQuery.

There is a set of N shows. To every show there corresponds a set of seances.

The user should select a subset of the set of shows and for every chosen show a subset of its set of seances.

The first of my widgets is select2 <select multiple> which chooses a subset of the set of shows.

The second of my widgets is just a <select> which allows to select any show in the above subset.

The most tricky part is the third widget: It should be a select2 <select multiple> which chooses a subset of the set of seances for currently selected show in the second widget.

Then I need to submit to the server the information about all chosen subsets.

I consider several variants about the third widget:

  • when the selected show in the second widget changes, load the set of seances for this show through AJAX. In this case I need to keep information about all N subsets of seances in a JavaScript variable, because there is not only visible set in <select multiple> but also several invisible sets.

  • keep all information about names (to display in <select multiple>) and chosen status of all sets of seances in JavaScript variables; use these variables to create <select multiple> with the list of seances for the chosen show without querying the server.

  • create N select2 <select multiple> widgets, but make displayed only one of them at a time. This way I do not need to keep data in JavaScript variables.

Please help to choose the variant.

Maybe you have another ideas how to select a subset of the set of shows and for every chosen show a subset of its set of seances?

2

Normally it’s discouraged to use select multiple, because it’s almost always a better solution to use checkboxes instead, both for usability and user interface design reasons.

Aside from that though, using ajax to retrieve the seances seems to be the better of the solutions that you have there.

Might I recommend a slight variation on it though. When the shows are chosen from the first widget, that’s a good time to do the ajax request about the seances. That way there’s more time available for the request to be made before the person selects one of the shows, and gets shown the seances.

3

How can I do AJAX request after selection in the first widget? The list of seances is known only after a show in the second widget is chosen.

Also I use select2 not regular <select multiple>. It seems better than many checkboxes (they may be a hundred checkboxes).

And finally: Why do you think the AJAX solution is the best? You have not explained the reason.

4

[quote=“porton, post:3, topic:294027, full:true”]
How can I do AJAX request after selection in the first widget? The list of seances is known only after a show in the second widget is chosen.[/quote]

My reasoning was that when you select a single show and then do an ajax request to request the seances, the user experiences more of a delay before seeing them, than if more information about shows and seances before the show is chosen.

It means that any updates can then be made in relative safety at the database level.

5

It doesn’t matter, as the updates are made only when Save button is pressed, it does not depend on whether AJAX is used.

6

It seems that the simplest way is to represent every set of seances for a show as its own <select multiple> (with select2 plugin), showing max one of them at a given time, but give all of them the same name=.

This way I do not need to use AJAX what simplifies server-side programming, also multiple <select multiple> (sic!) are submitted as a union (https://stackoverflow.com/q/49765873/856090) of values (IDs of seances), what also simplifies processing at servers side (as the serves does not need to check which show a given seance belongs to before storing in the DB).

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.