See if this running example helps.
http://jumpstart.doublenegative.com.au/jumpstart/examples/ajax/periodicupdate
Cheers,
Geoff
On 04/06/2012, at 3:30 PM, sommeralex wrote:
> Hi Arno,
>
> Thx for your help again!
>
> The javascript function is drawGroups is called and my alert('ok') appears,
> but
>
> If i am returning zone.getBody(), then i am still getting this response:
>
> Ajax failure: Status 500 for /group/listlocalgroups:getgroupsonlocation:
> org.apache.tapestry5.ioc.internal.OperationException
> Communication with the server failed:
> org.apache.tapestry5.ioc.internal.OperationException
>
> CODE:
>
> package com.airwriting.frontend.pages.group;
>
> import java.util.List;
>
>
> import org.apache.tapestry5.ComponentResources;
> import org.apache.tapestry5.Link;
> import org.apache.tapestry5.annotations.Import;
> import org.apache.tapestry5.annotations.InjectComponent;
> import org.apache.tapestry5.annotations.Property;
> import org.apache.tapestry5.corelib.components.Zone;
> import org.apache.tapestry5.ioc.annotations.Inject;
> import org.apache.tapestry5.json.JSONArray;
> import org.apache.tapestry5.json.JSONObject;
> import org.apache.tapestry5.services.Request;
> import org.apache.tapestry5.services.javascript.JavaScriptSupport;
>
> import com.airwriting.domain.GeoPoint;
> import com.airwriting.domain.Group;
> import com.airwriting.service.GeometryService;
> import com.airwriting.service.data.GroupService;
> import com.vividsolutions.jts.geom.Geometry;
>
> @Import(library = {
> "context:js/browselocalgroups.js"
> })
> public class ListLocalGroups {
>
> @Inject
> private GroupService groupService;
> @Inject
> private JavaScriptSupport jsSupport;
> @Inject
> private Request request;
> @Inject
> private ComponentResources componentResources;
> @Property
> private Geometry location;
>
> @Property
> private List<Group> groups;
>
> @InjectComponent
> private Zone zone;
>
> @SuppressWarnings("unused")
> @Property
> private Group curGroup;
>
> public void setupRender() {
> Link linkGetGroupsOnLocation =
> componentResources.createEventLink("getGroupsOnLocation");
>
>
> jsSupport.addScript(
> "init('%s');",
> linkGetGroupsOnLocation.toURI());
> }
>
> public Object onGetGroupsOnLocation(){
> Double lat = Double.parseDouble( request.getParameter("lat") );
> Double lng = Double.parseDouble( request.getParameter("lng") );
> Double radiusInMeters = Double.parseDouble(
> request.getParameter("radius") ) / 2;
>
> Geometry location = GeometryService.getPolygon(new GeoPoint(lat,
> lng), radiusInMeters.intValue());
> groups = groupService.getGroupsOnLocation(location);
> return zone.getBody();
> }
>
> }
>
>
> TML
>
> <t:layout xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd";>
>
> <div class ="map" id="map"></div>
> <t:googleMaps />
>
>
> <t:zone t:id="zone" id="zone">
> <div id="zoneDiv">
>
> <t:loop source="groups" value="curGroup">
>
> <div style="float:left">
> ${curGroup.name}
> </div>
> </t:loop>
>
> </div>
> </t:zone>
> </t:layout>
>
> JAVASCRIPT
>
> var urlGetGroupsOnLocation;
> var geocoder;
>
>
> function init(url){
> urlGetGroupsOnLocation = url;
>
> geocoder = new GClientGeocoder();
>
> if (navigator.geolocation) {
> navigator.geolocation.getCurrentPosition(
> function(position){
> updateLocation(position.coords.latitude,
> position.coords.longitude);
> },
> function(msg){
> // error case: nothing todo because we have already
> initialized the map
> }
> );
> }else {
> alert("no location");
> }
>
> }
>
> function updateLocation(lat, lng){
> onGetLatLng(new GLatLng(lat,lng));
> }
>
> function onGetLatLng(gLatLng){
>
> if(gLatLng == null) {
> alert("Sorry, we couldn't find this address.");
> return false;
> }
> alert ("ajax");
> new Ajax.Request(urlGetGroupsOnLocation, { onSuccess: drawGroups,
> parameters: 'lat='+gLatLng.lat() + '&lng=' + gLatLng.lng() +
> '&radius=' + 50000});
> }
>
> function drawGroups(response){
> alert ("draw");
> var groupArray = response.responseJSON;
> var list = "<ol>";
> for (var i = 0; i < groupArray .length; i++) {
> var group = groupArray [i];
>
> // var link = "<t:pagelink page=\"group/show\" context=\"" +
> group['id'] + "\">link</t:pagelink>"
>
> var link = "<a t:type=\"pagelink\" href=\"show/" + + group['id']
> + "\" t:page=\"group/show\" t:context=" + group['id'] + ">"+
> group['name'] +"</a>";
>
>
>
> list +="<li>"+link +"</li>";
>
>
> // If property names are known beforehand, you can also just do e.g.
> // alert(object.id + ',' + object.Title);
> }
>
>
>
> //list +="</ol>";
> //document.getElementById("list").innerHTML=list;
> alert ("zone");
> var zoneObject=Tapestry.findZoneManagerForZone('zone');
> zoneObject.updateFromURL(urlGetGroupsOnLocation, {});
> alert ("ok");
> }
>
>
>
>
>
> 2012/6/3 Arno Haase [via Tapestry] <
> [email protected]>
>
>> -----BEGIN PGP SIGNED MESSAGE-----
>> Hash: SHA1
>>
>>> 1. What is the difference between a zone and a block?! The docs are
>>> (in my opinion not clear)
>>
>> A Zone is basically an HTML <div> with support for replacing its
>> children via AJAX. It is a Tapestry component, and it is actually
>> rendered in the browser.
>>
>> A Block on the other hand is something like a named repository for
>> stuff that can be partially rendered. It is not a Tapestry component,
>> and it does not generate HTML when its parent in the .tml file is
>> rendered. Its purpose is to provide a handle to a chunk of code - one
>> prominent example being an AJAX update of a Zone.
>>
>>> 2. What do I need to update a specific element as shown in my
>>> example? My Javascript is updating the java-method, and within the
>>> java method I want to force a partial update of my TML.
>>
>> The way that Tapestry supports this best is to wrap the to-be-updated
>> element in a <t:Zone>, call an event handler (e.g. via the JS I sent
>> you) and have the event handler return a block.
>>
>> You can return an arbitrary block, which causes Tapestry to replace
>> the children of the <div> element corresponding to the Zone with
>> arbitrary code. For the simple case that you just want to re-render
>> the same markup, you can @InjectComponent the zone and return
>> zone.getBody():
>>
>>
>> <t:Zone t:id="myZone">
>> ...
>> </t:Zone>
>>
>>
>> @InjectComponent Zone myZone;
>>
>>
>> ...
>>
>> public Object onMyEvent() {
>> ...
>> return myZone.getBody();
>> }
>>
>>
>> Hope this helps
>>
>> - - Arno
>>
>>
>>>
>>> thx...
>>>
>>> 2012/6/3 Arno Haase [via Tapestry] <
>>> [hidden email] <http://user/SendEmail.jtp?type=node&node=5713595&i=0>>
>>>
>>> Been offline the last couple of days.
>>>
>>> Your event handler returns a JSONArray which is probably not what
>>> you want.
>>>
>>> You wrote initially that you would like Tapestry to re-render your
>>> zone. The straight-forward way to do that is to put your rendering
>>> code in a <t:block> in your .tml, @Inject that block into your
>>> page class and return that block from your event handler. That
>>> causes Tapestry to render that block, send the resulting DOM part
>>> to the browser and replace the content of the Zone with it.
>>>
>>> So basically your event handler does not deal with JS / JSON
>>> directly any more but rather delegate the rendering to Tapestry.
>>>
>>> Hope that helps, otherwise keep asking ;-)
>>>
>>> - Arno
>>>
>>>
>>>
>>>
>>>
>>> Am 31.05.2012 00:44, schrieb sommeralex:
>>>
>>>>>> Hi Arno,
>>>>>>
>>>>>> Thx for your your answer. If i am trying what you say, i get
>>>>>> this error message:
>>>>>>
>>>>>> Ajax failure: Status 500 for
>>>>>> /group/listlocalgroups:getgroupsonlocation:
>>>>>> org.apache.tapestry5.ioc.internal.OperationException
>>>>>> Communication with the server failed:
>>>>>> org.apache.tapestry5.ioc.internal.OperationException
>>>>>>
>>>>>> FULL CODE:
>>>>>>
>>>>>> package com.airwriting.frontend.pages.group;
>>>>>>
>>>>>> import java.util.List;
>>>>>>
>>>>>>
>>>>>> import org.apache.tapestry5.ComponentResources; import
>>>>>> org.apache.tapestry5.Link; import
>>>>>> org.apache.tapestry5.annotations.Import; import
>>>>>> org.apache.tapestry5.annotations.InjectComponent; import
>>>>>> org.apache.tapestry5.annotations.Property; import
>>>>>> org.apache.tapestry5.corelib.components.Zone; import
>>>>>> org.apache.tapestry5.ioc.annotations.Inject; import
>>>>>> org.apache.tapestry5.json.JSONArray; import
>>>>>> org.apache.tapestry5.json.JSONObject; import
>>>>>> org.apache.tapestry5.services.Request; import
>>>>>> org.apache.tapestry5.services.javascript.JavaScriptSupport;
>>>>>>
>>>>>> import com.myProj.domain.GeoPoint; import
>>>>>> com.myProj.domain.Group; import
>>>>>> com.myProj.service.GeometryService; import
>>>>>> com.myProj.service.data.GroupService; import
>>>>>> com.vividsolutions.jts.geom.Geometry;
>>>>>>
>>>>>> @Import(library = { "context:js/browselocalgroups.js" })
>>>>>> public class ListLocalGroups { @Inject private GroupService
>>>>>> groupService; @Inject private JavaScriptSupport jsSupport;
>>>>>> @Inject private Request request; @Inject private
>>>>>> ComponentResources componentResources; @Property private
>>>>>> Geometry location; @Property private List<Group> groups;
>>>>>> @InjectComponent private Zone zone;
>>>>>> @SuppressWarnings("unused") @Property private Group curGroup;
>>>>>> public void setupRender() { Link linkGetGroupsOnLocation =
>>>>>> componentResources.createEventLink("getGroupsOnLocation");
>>>>>>
>>>>>> jsSupport.addScript( "init('%s');",
>>>>>> linkGetGroupsOnLocation.toURI()); } public JSONArray
>>>>>> onGetGroupsOnLocation(){ Double lat = Double.parseDouble(
>>>>>> request.getParameter("lat") ); Double lng =
>>>>>> Double.parseDouble( request.getParameter("lng") ); Double
>>>>>> radiusInMeters = Double.parseDouble(
>>>>>> request.getParameter("radius") ) / 2; Geometry location =
>>>>>> GeometryService.getPolygon(new GeoPoint(lat, lng),
>>>>>> radiusInMeters.intValue()); groups =
>>>>>> groupService.getGroupsOnLocation(location); JSONArray
>>>>>> jsGroups = new JSONArray(); for(Group group : groups){
>>>>>> JSONObject jsGroup = group.toJSON(); jsGroup.put("lat",
>>>>>> group.getScope().getCentroid().getY()); jsGroup.put("lng",
>>>>>> group.getScope().getCentroid().getX());
>>>>>> jsGroups.put(jsGroup); } return jsGroups; } }
>>>>>>
>>>>>>
>>>>>> TML
>>>>>>
>>>>>> <t:layout
>>>>>> xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd";>
>>>>>>
>>>>>>
>>>>>>
>> <div class ="map" id="map"></div> <t:googleMaps />
>>
>>>>>>
>>>>>>
>>>>>> <t:zone t:id="zone" id="zone"> <div id="zoneDiv"> <t:loop
>>>>>> source="groups" value="curGroup">
>>>>>>
>>>>>> <div style="float:left"> test </div> </t:loop> </div>
>>>>>> </t:zone> </t:layout>
>>>>>>
>>>>>> JAVASCRIPT
>>>>>>
>>>>>> var urlGetGroupsOnLocation; var geocoder;
>>>>>>
>>>>>>
>>>>>> function init(url){ urlGetGroupsOnLocation = url;
>>>>>>
>>>>>> geocoder = new GClientGeocoder();
>>>>>>
>>>>>> if (navigator.geolocation) {
>>>>>> navigator.geolocation.getCurrentPosition(
>>>>>> function(position){ updateLocation(position.coords.latitude,
>>>>>> position.coords.longitude); }, function(msg){ // error case:
>>>>>> nothing todo because we have already initialized the map } );
>>>>>> }else { alert("no location"); }
>>>>>>
>>>>>> }
>>>>>>
>>>>>> function updateLocation(lat, lng){ onGetLatLng(new
>>>>>> GLatLng(lat,lng)); }
>>>>>>
>>>>>> function onGetLatLng(gLatLng){
>>>>>>
>>>>>> if(gLatLng == null) { alert("Sorry, we couldn't find this
>>>>>> address."); return false; } alert ("ajax"); new
>>>>>> Ajax.Request(urlGetGroupsOnLocation, { onSuccess:
>>>>>> drawGroups, parameters: 'lat='+gLatLng.lat() + '&lng=' +
>>>>>> gLatLng.lng() + '&radius=' + 50000}); }
>>>>>>
>>>>>> function drawGroups(response){ alert ("draw"); var groupArray
>>>>>> = response.responseJSON; var list = "<ol>"; for (var i = 0; i
>>>>>> < groupArray .length; i++) { var group = groupArray [i];
>>>>>>
>>>>>> // var link = "<t:pagelink page=\"group/show\"
>>>>>> context=\"" + group['id'] +
>>>>>> "\">link</t:pagelink>" var link = "<a
>>>>>> t:type=\"pagelink\" href=\"show/" + +
>>>>>> group['id'] + "\"
>>>>>> t:page=\"group/show\" t:context=" +
>>>>>> group['id'] + ">"+ group['name'] +" ";
>>>>>>
>>>>>> list +="<li>"+link +"</li>";
>>>>>>
>>>>>>
>>>>>> // If property names are known beforehand, you can also just
>>>>>> do e.g. // alert(object.id + ',' + object.Title); }
>>>>>>
>>>>>> //list +="</ol>";
>>>>>> //document.getElementById("list").innerHTML=list; alert
>>>>>> ("zone"); var
>>>>>> zoneObject=Tapestry.findZoneManagerForZone('zone');
>>>>>> zoneObject.updateFromURL(urlGetGroupsOnLocation, {}); alert
>>>>>> ("ok"); }
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> -- View this message in context:
>>>>>>
>>>
>> http://tapestry.1045711.n5.nabble.com/javascript-and-tapestry-reloading-a-list-tp5713535p5713545.html
>>>>>>
>>>>>>
>>>
>>>
>> Sent from the Tapestry - User mailing list archive at Nabble.com.
>>>>>>
>>>>>> ---------------------------------------------------------------------
>>>>>>
>>>>>>
>>>
>>>>>>
>> To unsubscribe, e-mail: [hidden
>> email]<http://user/SendEmail.jtp?type=node&node=5713590&i=0>
>>>>>> For additional commands, e-mail: [hidden
>>>>>> email]<http://user/SendEmail.jtp?type=node&node=5713590&i=1>
>>>>>>
>>>>>>
>>>>
>>>> ---------------------------------------------------------------------
>>>>
>>>>
>> To unsubscribe, e-mail: [hidden
>> email]<http://user/SendEmail.jtp?type=node&node=5713590&i=2>
>>
>>>> For additional commands, e-mail: [hidden
>>>> email]<http://user/SendEmail.jtp?type=node&node=5713590&i=3>
>>>>
>>>>
>>>>
>>>> ------------------------------ If you reply to this email, your
>>>> message will be added to the discussion below:
>>>>
>>>>
>> http://tapestry.1045711.n5.nabble.com/javascript-and-tapestry-reloading-a-list-tp5713535p5713590.html
>>>>
>>>>
>> To unsubscribe from javascript and tapestry - reloading a list, click
>>>> here<
>>
>>>>
>>>>
>> .
>>>> NAML<
>> http://tapestry.1045711.n5.nabble.com/template/NamlServlet.jtp?macro=macro_viewer&id=instant_html%21nabble%3Aemail.naml&base=nabble.naml.namespaces.BasicNamespace-nabble.view.web.template.NabbleNamespace-nabble.view.web.template.NodeNamespace&breadcrumbs=notify_subscribers%21nabble%3Aemail.naml-instant_emails%21nabble%3Aemail.naml-send_instant_email%21nabble%3Aemail.naml>
>>
>>>>
>>>
>>>>
>>>
>>> -- View this message in context:
>>>
>> http://tapestry.1045711.n5.nabble.com/javascript-and-tapestry-reloading-a-list-tp5713535p5713594.html
>>
>>>
>>>
>> Sent from the Tapestry - User mailing list archive at Nabble.com.
>> -----BEGIN PGP SIGNATURE-----
>> Version: GnuPG v1.4.11 (GNU/Linux)
>> Comment: Using GnuPG with Mozilla - http://enigmail.mozdev.org/
>>
>> iEYEARECAAYFAk/Ln9cACgkQbmZsMyUPuXTZTwCgtJ62sqJCrCo/byq5Expm6NGA
>> soUAoIVJJQcTg01unygTONTAM2YXEF+v
>> =Q3O2
>> -----END PGP SIGNATURE-----
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: [hidden
>> email]<http://user/SendEmail.jtp?type=node&node=5713595&i=1>
>> For additional commands, e-mail: [hidden
>> email]<http://user/SendEmail.jtp?type=node&node=5713595&i=2>
>>
>>
>>
>> ------------------------------
>> If you reply to this email, your message will be added to the discussion
>> below:
>>
>> http://tapestry.1045711.n5.nabble.com/javascript-and-tapestry-reloading-a-list-tp5713535p5713595.html
>> To unsubscribe from javascript and tapestry - reloading a list, click
>> here<http://tapestry.1045711.n5.nabble.com/template/NamlServlet.jtp?macro=unsubscribe_by_code&node=5713535&code=YWxleGFuZGVyLnNvbW1lckBnbWFpbC5jb218NTcxMzUzNXwxMDUzMzQxMzM4>
>> .
>> NAML<http://tapestry.1045711.n5.nabble.com/template/NamlServlet.jtp?macro=macro_viewer&id=instant_html%21nabble%3Aemail.naml&base=nabble.naml.namespaces.BasicNamespace-nabble.view.web.template.NabbleNamespace-nabble.view.web.template.NodeNamespace&breadcrumbs=notify_subscribers%21nabble%3Aemail.naml-instant_emails%21nabble%3Aemail.naml-send_instant_email%21nabble%3Aemail.naml>
>>
>
>
> --
> View this message in context:
> http://tapestry.1045711.n5.nabble.com/javascript-and-tapestry-reloading-a-list-tp5713535p5713600.html
> Sent from the Tapestry - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
