Zone Component change the ID of other components in Tapestry 5

Question

I have a from and other components inside the Zone. whenever Zone get refreshed it change the ID of form component and other components too. I am using the id of components in JavaScript so facing problem because Zone changes the IDs.

is there any way to stop this behavior of Zone in Tapestry 5.

Thanks in Advance guys.

Regards,

Answer 1

In short, no. When content is returned from an AJAX request, by design, the IDs can be anything.

The longer answer is that you should possibly structure your code differently and create a component from the contents of the Zone:

<div t:type="Zone" id="zone" t:id="zone">
    <div t:type="MyZoneContent" t:id="myZoneContent" ... />
</div>

Then, make sure you initialize your JS with the actual client ID in that new component:

public MyZoneContent implements ClientElement {

    @Environmental
    private JavaScriptSupport renderSupport;

    /**
     * An id for the component. If not specified, a default is generated.
     */
    @Parameter(required = false, defaultPrefix = BindingConstants.LITERAL )
    private String idParameter;

    private String clientId;

    @BeginRender
    void setupClientId() {
        this.clientId = resources.isBound("id") ? idParameter :
               renderSupport.allocateClientId(resources);
    }

    @AfterRender
    void addScript() {
       this.renderSupport.addScript("new MyJavascriptClass('%s');",
               this.getClientId());
    }

    @Override
    public String getClientId() {
        return this.clientId;
    }

}

And the template for the new component:

<div id="${clientId}" xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd">
   <form t:type="Form" ...>
      ...
   </form>
</div>

That way, you're passing the actual client ID of your component to your Javascript initializer, thus re-initializing the JS every time the content of your Zone is reloaded.