Not able to call the JS function on the actionlink, used to update the Zone in Tapestry5

Question

I am facing one problem in Tapestry.

Problem - I am using a grid to display the data. with each row i am displaying a Plus(+) button. when we click on the Plus(+) button then i'll display the inner rows for that Row. I achieved this statically. Statically means, when Grid load the data at the same time i fetch the data for inner rows and store it into the Hidden fields. when i click on the Plus(+) button then i'll call a JS function which use the Hidden Data field and draw the inner rows.

Now there is a twist. I have to do the same thing dynamically. It means on the click of Plus(+) button i have to fetch the data for hidden rows and then call the JS function to draw the inner rows. To achieve this i have used Zone & ActionLink to get the inner rows data dynamically. Zone contain the Hidden fields which contain the data for the Inner rows. when i click on the ActionLink, Zone get refreshed and fetch the data but after that i am not able to call the JS function.

Hope you guys understood the Problem. Need your help on urgent basis.

Regards,
Mahendra

Answer 1

Problem is that you are not able to call the JS function on Zone refresh. so there is one solution.

A Zone may be initially visible or invisible. When a Zone is updated, it is made visible if not currently so. This is accomplished via a function on the Tapestry.ElementEffect client-side object. By default, the show() function is used for this purpose. If you want Tapestry to call a different Tapestry.ElementEffect function when updates occur, specify its name with the zone's show parameter.

If a Zone is already visible, then a different effect function is used to highlight the change. By default, the highlight() function is called, which performs a yellow fade to highlight that the content of the Zone has changed. Alternatively, you can specify a different effect function with the Zone's update parameter: To have Tapestry update a zone without the usual yellow highlight effect, just specify "show" for the update parameter:

<t:zone t:id="myZone" t:update="show">

You may also define and use your own JavaScript effect function (with lower-case names), like this:

    Tapestry.ElementEffect.myeffectname = function(element){
 YourJavascriptCodeGoesHere; };

So in your case you can use like below code

<t:zone t:id="zoneId" t:update="yourfunction" >
// contain the your code                           
</t:zone>

so when Zone get refresh it will call yourfunction.

for more info Zone Effect Functions

Enjoy.

Regards,
Mahendra