The Select component does not yet have an async
parameter, so use the legacy zone
parameter.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- We need a doctype to allow us to use special characters like
We use a "strict" DTD to make IE follow the alignment rules. -->
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
<body class="container">
<h3>AJAX Select (1)</h3>
<noscript class="js-required">
${message:javascript_required}
</noscript>
This page demonstrates AJAX-enabling the Select component.
<div class="eg">
<t:form t:id="searchCriteria">
<div class="form-group form-inline">
<div class="form-group">
<t:label for="carMake"/>
<t:select t:id="carMake" model="carMakes" blankOption="ALWAYS" blankLabel="Choose..." validate="required" secure="never"
zone="carModelZone"/>
</div>
<div class="form-group">
<t:zone t:id="carModelZone" id="carModelZone" style="display: inline;">
<t:label for="carModel"/>
<t:select t:id="carModel" model="carModels" blankOption="ALWAYS" blankLabel="Choose..." validate="required" secure="never"/>
</t:zone>
</div>
<div class="form-group">
<t:label for="keywords"/>
<t:textfield t:id="keywords" class="keywords"/>
</div>
<div class="form-group">
<p class="form-control-static">(optional)</p>
</div>
</div>
<div class="form-group">
<t:submit value="Save"/>
</div>
<t:errors/>
</t:form>
</div>
<p>The Select component does not yet have an <code>async</code> parameter, so use the legacy <code>zone</code> parameter.</p>
References:
<a href="http://tapestry.apache.org/ajax-and-zones.html">Ajax and Zones</a>,
<a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/Zone.html">Zone</a>,
<a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/Select.html">Select</a>,
<a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/TextField.html">TextField</a>,
<a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/services/Request.html">Request</a>,
<a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/services/ajax/AjaxResponseRenderer.html">AjaxResponseRenderer</a>,
<a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/ioc/annotations/Inject.html">@Inject</a>,
<a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/annotations/InjectComponent.html">@InjectComponent</a>,
<a href="http://tapestry.apache.org/5.4/coffeescript/zone.html">t5/core/zone</a>,
<a href="http://tapestry.apache.org/5.4/coffeescript/ajax.html">t5/core/ajax</a>,
<a href="http://tapestry.apache.org/5.4/coffeescript/forms.html">t5/core/forms</a>.<br/><br/>
<t:pagelink page="Index">Home</t:pagelink><br/><br/>
<t:tabgroup>
<t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/ajax/AjaxSelect1.tml"/>
<t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/ajax/AjaxSelect1.java"/>
<t:sourcecodetab src="/web/src/main/resources/META-INF/assets/css/examples/ajaxselect1.css"/>
</t:tabgroup>
</body>
</html>
package jumpstart.web.pages.examples.ajax;
import javax.validation.constraints.NotNull;
import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.annotations.InjectComponent;
import org.apache.tapestry5.annotations.InjectPage;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.corelib.components.Zone;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.apache.tapestry5.services.Request;
import org.apache.tapestry5.services.ajax.AjaxResponseRenderer;
@Import(stylesheet = "css/examples/ajaxselect1.css")
public class AjaxSelect1 {
static final private String MAKE_HONDA = "Honda";
static final private String MAKE_TOYOTA = "Toyota";
static final private String[] ALL_MAKES = new String[] { MAKE_HONDA, MAKE_TOYOTA };
static final private String[] HONDA_MODELS = new String[] { "Accord", "Civic", "Jazz" };
static final private String[] TOYOTA_MODELS = new String[] { "Camry", "Corolla" };
static final private String[] NO_MODELS = new String[] {};
// Screen fields
@Property
private String[] carMakes;
@Property
@NotNull
private String carMake;
@Property
private String[] carModels;
@Property
@NotNull
private String carModel;
@Property
private String keywords;
// Other pages
@InjectPage
private AjaxSelect2 page2;
// Generally useful bits and pieces
@InjectComponent
private Zone carModelZone;
@Inject
private Request request;
@Inject
private AjaxResponseRenderer ajaxResponseRenderer;
// The code
void setupRender() {
if (carMakes == null) {
carMakes = ALL_MAKES;
carModels = NO_MODELS;
}
}
void onValueChangedFromCarMake(String carMake) {
// A new make has been chosen - clear the model.
carModel = null;
carModels = NO_MODELS;
// Show the models of the chosen make.
if (carMake != null) {
if (carMake.equals(MAKE_HONDA)) {
carModels = HONDA_MODELS;
}
else if (carMake.equals(MAKE_TOYOTA)) {
carModels = TOYOTA_MODELS;
}
}
if (request.isXHR()) {
ajaxResponseRenderer.addRender(carModelZone);
}
}
Object onSuccess() {
page2.set(carMake, carModel, keywords);
return page2;
}
}
.eg {
margin: 20px 0;
padding: 14px;
color: #888;
border: 1px solid #ddd;
border-radius: 6px;
-webkit-border-radius: 6px;
-mox-border-radius: 6px;
}
.eg select {
width: auto;
margin-right: 12px;
}
.eg .keywords {
width: auto;
}