•

tapestry5 select subselect

Posted in Software by rodiq May 19, 2010
2 comments
Tags: tapestry

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: