How can update an <input/> field in tapestry by AJAX request

问题

I have a project developed with tapestry 5. I need to update a input field (which is inside a form) using an AJAX request.

Page.tml is something like this:

<form>
    <t:zone t:id="myZone">
        <input type="text" t:type="TextField" t:value="product.code"/>
    </t:zone>
    <t:actionlink t:id="generateCode" zone="myZone">Generate</t:actionlink>
</form>

And Page.java

Object onActionFromGenerateCode() {
    return myZone.body();
}

When click in "Generate" link, tapestry throws an exception. Don't let me update a zone inside a form:

java.lang.RuntimeException
The component must be enclosed by a Form component.

How can I update this input field?

thanks

回答1:

Changing pieces of a form via ajax gets tricky as a FormSupport instance must be available on the Environment in the serverside event.

It might be easier to either:

1. Put the entire form in a zone and refresh the whole form
2. Execute some javascript from the serverside event

Here's how option 2 could work:

TML

<form>
    <input id="productCode" type="text" t:type="TextField" t:value="product.code" />
    <!-- note that async is a recent addition to eventlink in tapestry 5.4 -->
    <!-- Use a dummy zone for previous versions -->
    <t:eventlink event="generateCode" async="true">Generate</t:eventlink>
</form>

Java

@Inject JavaScriptSupport jss

void onGenerateCode() {
    String productCode = generateProductCode();
    jss.addScript("$('#productCode').val('%s');", productCode); // assuming jquery
}

Note, it is possible to dynamically change a form via ajax, it's just tricky as I said. Examples include AjaxFormLoop and the FormInjector

来源：https://stackoverflow.com/questions/27952294/how-can-update-an-input-field-in-tapestry-by-ajax-request