jQuery Zone Triggered by an action link
Click on me to increment the count and refresh a zone
Counting via AJAX : 0
<h3>jQuery Zone Triggered by an action link</h3>
<p>
<t:actionlink t:id="myActionLink" t:zone="myZone">
Click on me to increment the count and refresh a zone
</t:actionlink>
</p>
<t:zone t:id="myZone" id="myZone">
<t:delegate t:to="theBlockActionLink" />
</t:zone>
<t:block t:id="myBlockActionLink">
Counting via AJAX : ${count}
</t:block>
@Property
@Persist
private int count;
@Inject
private Block myBlockActionLink;
public Block getTheBlockActionLink()
{
return myBlockActionLink;
}
@OnEvent(value = EventConstants.ACTION, component = "myActionLink")
Object updateCount()
{
if (!request.isXHR()) {return this;}
count++;
return myBlockActionLink;
}
jQuery Zone triggered by external form submit
<h3>jQuery Zone triggered by external form submit</h3>
<t:zone t:id="myZone2" id="myZone2">
<t:delegate t:to="theBlockForm" />
</t:zone>
<t:form t:zone="myZone2" t:id="myForm">
Enter a value
<t:textfield t:value="dummy"/><t:submit t:id="submit"/>
</t:form>
<t:block t:id="myBlockForm">
<p>
Entered value is : ${dummy}
</p>
<t:ifNotNull t:test="dummy">
<t:DummyScriptAndCSSAdder/>
</t:ifNotNull>
</t:block>
@Property
@Persist
private String dummy;
@Inject
private Block myBlockForm;
public Block getTheBlockForm()
{
return myBlockForm;
}
@OnEvent(value = EventConstants.SUCCESS, component = "myForm")
Object updateZoneContentFromForm()
{
if (!request.isXHR()) {return this;}
return myBlockForm;
}
jQuery Zone and multi zone update
<h3>jQuery Zone and multi zone update</h3>
<br/>
<t:form t:zone="multiZone1" t:id="myMultiZoneUpdateForm" >
<t:submit t:id="multiSubmit" />Click me for MultiZoneUpdate
</t:form>
<t:zone t:id="multiZone1" id="multiZone1">
<t:delegate to="multiUpdateBlock1" />
</t:zone>
<t:zone t:id="multiZone2" id="multiZone2">
<t:delegate to="multiUpdateBlock2" />
</t:zone>
<t:block t:id="defaultBlock">
<p>default zone content</p>
</t:block>
<t:block t:id="multiUpdateBlock">
<p>rendering block-${blockId} after multi zone update</p>
</t:block>
@Persist
private boolean afterFormSubmit;
@Property
private int blockId;
@InjectComponent
private Zone multiZone1, multiZone2;
@Inject
private Block defaultBlock, multiUpdateBlock;
@Inject
private AjaxResponseRenderer renderer;
@OnEvent(value = EventConstants.SUCCESS, component = "myMultiZoneUpdateForm")
void performMultiZoneUpdate()
{
afterFormSubmit = true;
renderer.addRender("multiZone1",multiZone1.getBody()).addRender("multiZone2", multiZone2.getBody());
}
public Block getMultiUpdateBlock1() {
blockId = 1;
return afterFormSubmit ? multiUpdateBlock : defaultBlock;
}
public Block getMultiUpdateBlock2() {
blockId = 2;
return afterFormSubmit ? multiUpdateBlock : defaultBlock;
}
How can we change the parameters of the Effect method ?
You can already specify the name of the effect methods you want to use thanks to the show and update Zone parameter.
But the jQuery effect method can take additional parameters : options, speed and callback.
http://jqueryui.com/demos/effect/
You can specify them by using the customZone mixin, wich takes a JSON parameter. Here is an example of this mixin.
The default jQuery selector will be the client id of the component using the mixin. But if you want to use the mixin with an exiting component
(for example our Tabs component), using a Zone, you can use the mixin with this component. you just have to specify a specific jQuery selector,
thanks to the selector parameter.
Click on me to increment the count and refresh a zone
Counting via AJAX : 0
<p>
<t:actionlink t:id="myActionLinkCustom" t:zone="myZoneCustom">
Click on me to increment the count and refresh a zone
</t:actionlink>
</p>
<t:zone t:id="myZoneCustom" id="myZoneCustom" t:update="shake"
t:mixins="jquery/customZone" t:params="zoneParams">
Counting via AJAX : ${count}
</t:zone>
@InjectComponent
private Zone myZoneCustom;
public JSONObject getZoneParams(){
JSONObject ap = new JSONObject();
ap.put("options",new JSONObject("direction","up"));
ap.put("speed", 500);
ap.put("callback", new JSONLiteral(String.format("callbackFunction()")));
return ap;
}
@OnEvent(value = EventConstants.ACTION, component = "myActionLinkCustom")
Object cutomMixin()
{
if (!request.isXHR()) {return this;}
count++;
return myZoneCustom.getBody();
}
function callbackFunction(){
var columnChooser = function(){
alert("This is the JavaScript callback function");
}
return columnChooser;
}
Tapestry5-jquery project allows you to choose whether to include or not Prototype (and original tapestry components).
In your AppModule inside contributeApplicationDefaults method,
you just have to set the JQuerySymbolConstants.SUPPRESS_PROTOTYPE to "false" in order to force the use of
default prototype implementation of the Tapestry Core components.
jQuery will be added to the javascript stack in every case.