<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;
}
	

		
<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;
}
	

		
<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;
}
	

		
<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;
}