CODEWITHSUNDEEP
javaajaxformstapestry
Matthieu
Matthieu

Reputation: 89

Chaining multiple select components in Tapestry 5.3 (Ajax update)

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);
    }

Upvotes: 3

Views: 1295

Answers (1)

lance-java
lance-java

Reputation: 27994

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:

  1. Have a zone that wraps the entire form and update the whole form via ajax
  2. Instead of refreshing a zone, use some javascript (via JavaScriptSupport) to update the options in an existing select menu
  3. 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.
  4. 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.

Upvotes: 1

Related Questions