在挂毯5.3（阿贾克斯更新）链接多个选择组件 [英] Chaining multiple select components in Tapestry 5.3 (Ajax update)
问题描述
我用挂毯5.3.7，我想使用Ajax的链接选择表单元素：如果我选择在选择元素一个选项，另一种选择似乎选择基于你的第一选择另一种元素。我试着在挂毯文档样本，并适用于我的项目。尽管我自定义code是非常接近的样品，我总是有以下错误：
在SETU prender [SelectZoneDemo：版本]：渲染队列错误组件SelectZoneDemo：版本必须由表单组件被封闭
从文档工作样本（中选择组件汽车制造商链接）的http://tapestry.apache.org/5.3/apidocs/org/apache/tapestry5/corelib/components/Select.html)
下面是我的code： 模板文件（.tml）的
＆LT; T：形式GT;
＆其中p为H.;
＆LT; T：错误/＆GT;
＆所述; / P＆GT;
＆其中p为H.;
＆LT; T：选择T：ID =selectApplicatifsT：模型=selectApplicatifs
T：值=selectedApplicatif验证=需要区=VersionZone
T：带=versionZoneT：恩codeR =ApplicatifDtoEn codeR/＆GT;
＆所述; / P＆GT;
＆LT; T：带t：ID =versionZoneID =versionZone＆GT;
＆LT; T：如果测试=selectedApplicatif＆GT;
＆其中p为H.;
＆LT; T：选择T：ID =版本模式=selectVersionsT：恩codeR =VersionDtoEn codeR/＆GT;
＆所述; / P＆GT;
＆LT; / T：如果＆GT;
＆其中p为H.;
＆LT; T：提交值=直译：提交/＆GT;
＆所述; / P＆GT;
＆LT; /吨：区内＆GT;
＆LT; /吨：形式GT;
的Java文件的
@注入
私人AjaxResponseRenderer ajaxResponseRenderer;
@注入
私人IServiceApplicatif serviceApplicatif;
@注入
私人SelectModelFactory selectModelFactory;
@属性
@坚持
私人SelectModel selectApplicatifs;
@属性
@坚持
私人字符串版本;
@属性
@坚持
私人SelectModel selectVersions;
@注入
@属性
私人ApplicatifDtoEn codeR applicatifDtoEn codeR;
@注入
@属性
私人VersionDtoEn codeR versionDtoEn codeR;
@属性
@坚持
私人ApplicatifDto selectedApplicatif;
@InjectComponent
私人区versionZone;
公共无效onActivate（）{
名单＆LT; ApplicatifDto＆GT; listApplicatifs = serviceApplicatif.findAllApplicatifDto（）;
名单＆LT; VersionDto＆GT; listVersionApplicatifs =新的ArrayList＆LT; VersionDto＆GT;（）;
selectApplicatifs = selectModelFactory.create（listApplicatifsNOM）;
如果（selectVersions == NULL）{
selectVersions = selectModelFactory.create（listVersionApplicatifs，版本）;
}
}
公共无效onValueChangedFromSelectApplicatifs（ApplicatifDto applicatifDto）{
名单＆LT; VersionDto＆GT; versionList = applicatifDto.getVersionList（）;
selectVersions = selectModelFactory.create（versionList，版本）;
ajaxResponseRenderer.addRender（versionZone）;
}
通过AJAX表单中渲染的区域可以得到棘手，因为你已经发现。场需要 FormSupport 的实例是对环境堆栈。这通常添加到环境作为父形式呈现，但你已经发现，在表单中绘制一个区域时的FormSupport不可用。
下面是几个选项：
- 有一个包装的整个窗体区域，并通过AJAX 更新整个表格
- 相反刷新区域，可以使用一些javascript（通过<一个href="http://tapestry.apache.org/5.3/apidocs/org/apache/tapestry5/services/javascript/JavaScriptSupport.html"相对=nofollow> JavaScriptSupport ）在现有选择菜单
- 使用观察混入，以更新的形式区。而不是使用核心织锦选择组件，你可以使你自己的选择。这可能需要您使用@RequestParameter得到的值时，服务器端的形式最终提交。
- 使用<一个href="http://tapestry.apache.org/5.3/apidocs/org/apache/tapestry5/corelib/components/FormInjector.html"相对=nofollow> FormInjector 。我从来没有使用过自己，但我认为它在某种程度上欺骗的环境。我不知道你如何通过用户的选择在事件。我认为这部分可能也被废弃了挂毯5.4。
I’m using tapestry 5.3.7, and I want to use Ajax chaining select form elements : If I choose one option in a select element, another select appear to choose another element based on your first choice. I try a sample in the tapestry doc, and adapted for my project. Despite the fact that my custom code is very close to the sample, I always have the following error :
Render queue error in SetupRender[SelectZoneDemo:version]: Component SelectZoneDemo:version must be enclosed by a Form component.
Working sample from the doc (Chaining of select components CarMaker) http://tapestry.apache.org/5.3/apidocs/org/apache/tapestry5/corelib/components/Select.html)
Here is my code : Template file (.tml)
<t:form>
<p>
<t:errors />
</p>
<p>
<t:select t:id="selectApplicatifs" t:model="selectApplicatifs"
t:value="selectedApplicatif" validate="required" zone= "VersionZone"
t:zone="versionZone" t:encoder="ApplicatifDtoEncoder" />
</p>
<t:zone t:id="versionZone" id="versionZone">
<t:if test="selectedApplicatif">
<p>
<t:select t:id="version" model="selectVersions" t:encoder="VersionDtoEncoder" />
</p>
</t:if>
<p>
<t:submit value="literal:Submit" />
</p>
</t:zone>
</t:form>
Java file
@Inject
private AjaxResponseRenderer ajaxResponseRenderer;
@Inject
private IServiceApplicatif serviceApplicatif;
@Inject
private SelectModelFactory selectModelFactory;
@Property
@Persist
private SelectModel selectApplicatifs;
@Property
@Persist
private String version;
@Property
@Persist
private SelectModel selectVersions;
@Inject
@Property
private ApplicatifDtoEncoder applicatifDtoEncoder;
@Inject
@Property
private VersionDtoEncoder versionDtoEncoder;
@Property
@Persist
private ApplicatifDto selectedApplicatif;
@InjectComponent
private Zone versionZone;
public void onActivate() {
List<ApplicatifDto> listApplicatifs = serviceApplicatif.findAllApplicatifDto();
List<VersionDto> listVersionApplicatifs = new ArrayList<VersionDto>();
selectApplicatifs = selectModelFactory.create(listApplicatifs, "nom");
if (selectVersions == null) {
selectVersions = selectModelFactory.create(listVersionApplicatifs,"version");
}
}
public void onValueChangedFromSelectApplicatifs(ApplicatifDto applicatifDto) {
List<VersionDto> versionList = applicatifDto.getVersionList();
selectVersions = selectModelFactory.create(versionList,"version");
ajaxResponseRenderer.addRender(versionZone);
}
Rendering zones within a form via ajax can get tricky as you have discovered. Fields require a FormSupport instance to be on the Environment stack. This is normally added to the environment as the parent form renders but as you have discovered, when rendering a zone within a form the FormSupport is not available.
Here's a few options:
- Have a zone that wraps the entire form and update the whole form via ajax
- Instead of refreshing a zone, use some javascript (via JavaScriptSupport) to update the options in an existing select menu
- Use the Observe mixin to update zones in the form. Instead of using the core tapestry select component, you could render your own select. This might require you to use @RequestParameter to get the values serverside when the form is finally submitted.
- Use the FormInjector. I've never used it myself but I think it somehow spoofs the environmental. I'm not sure how you'd pass the user's selection in the event. I think this component may have also been scrapped in tapestry 5.4.
这篇关于在挂毯5.3（阿贾克斯更新）链接多个选择组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
