Tree Picker inside Zone

[akshay]

Hello,

I have a tree picker component placed within a modal. I am trying to
integrate a search field into my tree picker component. Within this search
field, the user can enter the search text for which I would be executing a
db query to find the matching nodes.

For this search field I have used zone updater mixin(
http://jumpstart.doublenegative.com.au/jumpstart/examples/ajax/onevent) to
pickup the user entered value.

Below is the component calling the  the tree picker component

  <!-- Modal popup that show the tree component -->
  <t:SimpleModal t:id="treeModal"
componentClientId="treeModal-${cachedClientId}" t:title="titleToPopuptree"
    t:showAfterRender="false">
    <t:TreePicker t:id="treePicker" id="treePicker-${cachedClientId}"
t:value="prop:value"
      t:treeKind="prop:treeKindParameter"
t:allowedReferenceTypesParameter="allowedReferenceTypesParameter"

t:restrictedReferenceTypesParameter="restrictedReferenceTypesParameter" />
  </t:SimpleModal>
(Please ignore the irrelevant parameters passed).


Below is my .tml code for my tree picker component

<t:container xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd";
xmlns:p="tapestry:parameter">
  <t:zone t:id="treeZone" id="treeZone">
    <t:if test="${checkIfTreeNodeIsConfiguredAndIndexed()}">
      <input t:type="textField" t:id="searchText" id="searchText"
t:mixins="zoneUpdater"
        class="form-control criteria-filter"
placeholder="${message:app.search.label}"
        ZoneUpdater.clientEvent="change" ZoneUpdater.event="search"
ZoneUpdater.zone="treeZone"
        ZoneUpdater.secure="${request.secure}" />
    </t:if>

  <!-- Tree Picker -->
    <t:tree t:id="tree" t:model="treeModel" t:node="treeNode"
t:value="node">
      <p:label>
        <img border="0" src="${getUrlImage(node.key)}" alt=""></img>
        <t:if test="selectable">
          <a t:type="EventLink" t:event="nodeSelected" t:context="node.key"
t:zone="^" class="prop:selectedClass"
            href="#"> ${treeNode.label} </a>
          <p:else>
            <span class="prop:selectedClass">${treeNode.label}</span>
          </p:else>
        </t:if>
      </p:label>
    </t:tree>

  </t:zone>
</t:container>


on the .java side I have the following event handler

public void onSearch(@RequestParameter(value = "param", allowBlank = true)
String searchText) {


//do required processing

//clear the tree expansions

//update the tree model

 if (request.isXHR()) {
      ajaxResponseRenderer.addRender(treeZone);
    }

}

Unfortunately, my tree structure is not being refreshed, whereas in debug
mode I can see that all the realtive methods within the treezone are called.

The same zone gets perfectly updated when, I fire the other event
"nodeSelected".


Any ideas where I could be going wrong?
Thanks in advance


Best Regards
Akshay