I had the very same problem, here is the solution I have (with great
help from the list - search for it)
--- java part --- selection model as found in T5 HowTos in the wicki
and with event definition from Chenillekit---
@IncludeJavaScriptLibrary( { "context:js/Chenillekit.js", "context:js/
RESelection.js" })
public class Index {
@InjectSelectionModel(labelField = "name", idField = "oid")
@Persist
private List<REType> reTypes;
@InjectSelectionModel(labelField = "name", idField = "oid")
@Persist
private List<RESubType> reSubTypes;
@Component(parameters = {"event=change",
"onCompleteCallback=literal:onCompleteChangeReSubType"})
@Mixins({"ck/OnEvent"})
private Select reType;
@Log
@OnEvent(component="reType", value="change")
public JSONArray onChangeRETypeEvent(String value) {
JSONArray jsonArray = new JSONArray();
// Tapestry cant handle the empty first field for us in this
situation
reSubTypes =
dataService
.getRESubTypesWithFirstEmpty
(dataService.loadREType(Long.parseLong(value)));
query.setReSubType(reSubTypes.get(0));
for (RESubType subType : reSubTypes) {
JSONObject jo = new JSONObject();
jo.put("value", subType.getOid());
jo.put("label", subType.getName());
jsonArray.put(jo);
}
return jsonArray;
}
--- tml part ---
<t:label for="retype"/>
<select t:type="select" t:id="retype" value="query.retype"
model="reTypesSelectionModel" encoder="reTypesValueEncoder"
validate="required"/>
<t:label for="resubtype"/>
<select t:type="select" t:id="resubtype" value="query.resubtype"
model="reSubTypesSelectionModel" encoder="reSubTypesValueEncoder"/>
---- javascript part ---
function onCompleteChangeReSubType(response) {
selectElement = $('resubtype');
while (selectElement.options.length > 0) {
selectElement.options[0] = null;
}
for (index = 0; index < response.length; index++) {
if (index == 0) {
selectElement.options[index] =
new Option(response[index].label, response[index].value,
true, true);
}
else {
selectElement.options[index] =
new Option(response[index].label,
response[index].value);
}
}
// Tapestry.ElementEffect.highlight($("resubtype"));
}
hope this helps, Max
Am 26.07.2009 um 20:16 schrieb sparqle:
All,
I know Java and have been using pure Java frameworks like ZK and
Echo2 to
develop web applications. I don't know anything about JavaScript,
and have
been trying to learn T5 in the hope of creating a real application.
However,
it appears that with T5 I am not completely shielded from JavaScript
(may be
I can do this in pure Java?) if I want to do AJAX. The specific
example that
I want to implement is the classic 2 dropdown - the second one
dependent on
the first one. So let's say you select a country, and the in the
second
dropdown, the list of states/provinces is updated to match what is
available
for the country selected in the first dropdown.
From the forums, I have gathered that I must use the Chenille Kit
"onEvent"
mixin to make this happen. I also saw some sample codes in the
forums that
appear to solve this exact issue. The problem is that I don't know
where to
put this code (in Java file or tml file or some other js file) and
then how
to tie these things together. In the T5 help documentation, there is
some
info about using RenderSupport for this. Again, the code given is only
snippets with no complete example that I can download/copy. I could
not
understand this documentation at all.
So my question is simple: where should this code be located and how
are all
these things connected? Is there anything else that needs to be
added - such
as RenderSupport (and where)?
------------------------------------------------------------------------
<select t:id="operator" t:type="select" t:mixins="commons/onEvent"
t:event="change" t:onCompleteCallback="onCompleteOperatorChange" .../>
-----------------------------------------------------------------------
@OnEvent(component = "operator", value = "change")
public JSONArray onChangeOperatorEvent(String value) {
JSONArray jsonArray = new JSONArray();
for (Plaza plaza : getDestinationSelectValues(value)) {
JSONObject jsonObject = new JSONObject();
jsonObject.put("value", plaza.getId());
jsonObject.put("label", plaza.getDescription());
jsonArray.put(jsonObject);
}
return jsonArray;
}
------------------------------------------------------------------
function onCompleteOperatorChange(response) {
selectElement = $("entryPlaza");
responseJSON = response.evalJSON();
while (selectElement .options.length > 0) {
selectElement .options[0] = null;
}
for (index = 0; index < responseJSON .length; index++) {
selectElement.options[index] = new Option(responseJSON
[index].label, responseJSON [index].value);
}
Tapestry.ElementEffect.highlight($("entryPlaza"));
}
-----------------------------------------------------------
--
View this message in context:
http://www.nabble.com/How-to-use-JavaScript-for-dependent-selects--tp24669071p24669071.html
Sent from the Tapestry - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org
For additional commands, e-mail: users-h...@tapestry.apache.org
