Rodiq » Page 'tapestry5 select subselect'

tapestry5 select subselect

A simple way of having two dependent comboboxes, a primary select a secondary select thats gets filled on the fly depending on the main combobox selection (without form submit).

In my case the first select is a list of competitions and the secondary select contains the teams of the selected competition.

in .tml file:

<select t:type="select" t:id="competitionComponent" t:value="competition"
t:model="competitionsSelectionModel" t:encoder="competitionsValueEncoder"
t:mixins="ck/onEvent" t:event="change"
t:onCompleteCallback="competitionSelectedCallback"
/>
<select id="teamSelect" name="teamSelect">
<option value="empty">${message:noTeam}</option>
<t:loop source="teams" value="crtTeam">
<t:if test="selectedTeam">
<option value="${crtTeam.id}" selected="selected">${crtTeam.name}</option>
<p:else>
<option value="${crtTeam.id}">${crtTeam.name}</option>
</p:else>
</t:if>
</t:loop>
</select>

When the competitionComponent select is used, the “change” event triggers the onCompleteCompetitionChange function, defined in the java class:

@OnEvent(value="change", component = "competitionComponent")
JSONObject onCompleteCompetitionChange(String selectedValue) {
JSONArray values = new JSONArray();
List<Team> results = getTeams(selectedValue);
for (Iterator i = results.iterator(); i.hasNext();) {
Team result = (Team) i.next();
JSONObject obj = new JSONObject();
obj.put("label", result.getName());
obj.put("value", result.getId());
values.put(obj);
}
JSONObject finalJsonObject = new JSONObject();
finalJsonObject.put("values", values);
return finalJsonObject;
}

The response of the onCompleteCompetitionChange (a JSONObject object containing a hashmap of  values and labels) is sent to the competitionSelectedCallback javascript function, defined in my case in a TeamResults.js file that I included with adnotations to TeamResults.java:

@IncludeJavaScriptLibrary("TeamResults.js")
public class TeamResults {
...

The content of TeamResults.js below. I wrote two functions, as I moved all the reusable, more general code in the mainSelectedCallback function.

function competitionSelectedCallback(response) {
var dependentSelectName = "teamSelect";
mainSelectedCallback(response,  dependentSelectName);
}
function mainSelectedCallback(response, dependentSelectName) {
jsonObject = response;
dependentSelect = $(dependentSelectName);
var defOption = dependentSelect.options[0];
// clear dependentSelect options
while (dependentSelect.options.length > 0) {
dependentSelect.options[0] = null;
}
dependentSelect.options[0] = defOption;
for (index = 0; index < response.values.length; index++) {
dependentSelect.options[index + 1] = new Option(response.values[index].label, response.values[index].value);
}

The javascript populates the secondary combobox with values and labels received via the json response.

Share and Enjoy:
  • Digg
  • StumbleUpon
  • Facebook
  • Google Bookmarks
  • Reddit
  • RSS

2 comments to “tapestry5 select subselect”

  1. Merci pentru exemplu.
    A fost foarte ajutator

  2. cu placere

Leave a comment


7 × five =