You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by sommeralex <al...@gmail.com> on 2012/05/30 21:29:05 UTC
javascript and tapestry - reloading a list
Hello!
I am using a javascript plug in which is giving me the coordinates of a
user. After the coordinates are retrieved, i want tapestry to reload a
specific element - my list (which now should show localized entries) What i
have done so far - and what is working - is that my js script is calling my
java function onGetGroupsOnLocation(), taking the JSONArray and writing out
that JSONArray via javascript
document.getElementById("list").innerHTML=list;
BUT this is not what i want. I would prefer that I can reload the area
<t:grid source="list" /> of my tml. So what i am looking for is a way to
update a specific area of my tml, if a tapestry function of my page is
invoked.
I am happy for any help..
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;
}
--
View this message in context: http://tapestry.1045711.n5.nabble.com/javascript-and-tapestry-reloading-a-list-tp5713535.html
Sent from the Tapestry - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: javascript and tapestry - reloading a list
Posted by sommeralex <al...@gmail.com>.
thank you very much, i will try that example and give feedback asap.
thank you all!
2012/6/4 Geoff Callender-2 [via Tapestry] <
ml-node+s1045711n5713603h35@n5.nabble.com>
> 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] <
> > [hidden email] <http://user/SendEmail.jtp?type=node&node=5713603&i=0>>
> >
> >> -----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<
> >> .
> >> 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: [hidden email]<http://user/SendEmail.jtp?type=node&node=5713603&i=1>
> For additional commands, e-mail: [hidden email]<http://user/SendEmail.jtp?type=node&node=5713603&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-tp5713535p5713603.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-tp5713535p5713604.html
Sent from the Tapestry - User mailing list archive at Nabble.com.
Re: javascript and tapestry - reloading a list
Posted by sommeralex <al...@gmail.com>.
Hi Geoff, Hi Arno!
Thank you again for your help. The problem was that my list (which was
loaded through Javascript into Java) was not persisted (@persist List list)
this caused a ajax error, because the list was null. Now, i am only
initiating the list if the list is null (if list == null) then list = new
List().
thank you very much!
alex
2012/6/4 Alexander Sommer <al...@gmail.com>
> thank you very much, i will try that example and give feedback asap.
>
> thank you all!
>
> 2012/6/4 Geoff Callender-2 [via Tapestry] <
> ml-node+s1045711n5713603h35@n5.nabble.com>
>
> 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] <
>> > [hidden email] <http://user/SendEmail.jtp?type=node&node=5713603&i=0>>
>> >
>> >> -----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<
>> >> .
>> >> 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: [hidden email]<http://user/SendEmail.jtp?type=node&node=5713603&i=1>
>> For additional commands, e-mail: [hidden email]<http://user/SendEmail.jtp?type=node&node=5713603&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-tp5713535p5713603.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-tp5713535p5713612.html
Sent from the Tapestry - User mailing list archive at Nabble.com.
Re: javascript and tapestry - reloading a list
Posted by Geoff Callender <ge...@gmail.com>.
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] <
> ml-node+s1045711n5713595h87@n5.nabble.com>
>
>> -----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: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: javascript and tapestry - reloading a list
Posted by sommeralex <al...@gmail.com>.
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] <
ml-node+s1045711n5713595h87@n5.nabble.com>
> -----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.
Re: javascript and tapestry - reloading a list
Posted by Arno Haase <ar...@haase-consulting.com>.
-----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] <
> ml-node+s1045711n5713590h32@n5.nabble.com>
>
> 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<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-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: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: javascript and tapestry - reloading a list
Posted by sommeralex <al...@gmail.com>.
Hi Arno!
Thank you for your help. The main questions I have is:
1.
What is the difference between a zone and a block?! The docs are (in my
opinion not clear)
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.
thx...
2012/6/3 Arno Haase [via Tapestry] <
ml-node+s1045711n5713590h32@n5.nabble.com>
> -----BEGIN PGP SIGNED MESSAGE-----
> Hash: SHA1
>
> 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>
> >
> >
> -----BEGIN PGP SIGNATURE-----
> Version: GnuPG v1.4.11 (GNU/Linux)
> Comment: Using GnuPG with Mozilla - http://enigmail.mozdev.org/
>
> iEYEARECAAYFAk/LYNcACgkQbmZsMyUPuXRX8QCgkwAp0jH6BbRVKJSTuR9JpsdU
> tQMAni72QK29UOToFplkFU0hGMbHo0Rn
> =1nJo
> -----END PGP SIGNATURE-----
>
> ---------------------------------------------------------------------
> 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<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-tp5713535p5713594.html
Sent from the Tapestry - User mailing list archive at Nabble.com.
Re: javascript and tapestry - reloading a list
Posted by Arno Haase <ar...@haase-consulting.com>.
-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1
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: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.11 (GNU/Linux)
Comment: Using GnuPG with Mozilla - http://enigmail.mozdev.org/
iEYEARECAAYFAk/LYNcACgkQbmZsMyUPuXRX8QCgkwAp0jH6BbRVKJSTuR9JpsdU
tQMAni72QK29UOToFplkFU0hGMbHo0Rn
=1nJo
-----END PGP SIGNATURE-----
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: javascript and tapestry - reloading a list
Posted by sommeralex <al...@gmail.com>.
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: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: javascript and tapestry - reloading a list
Posted by Arno Haase <ar...@haase-consulting.com>.
-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1
If you use a zone, you can call
var zoneObject=Tapestry.findZoneManagerForZone('<DOM id of zone>');
zoneObject.updateFromURL('<url>', {});
in JS.
When generating the JS code in your TML, you can generate the correct
URL by having something like the following in your page / component class:
@Inject ComponentResources resources;
...
final String url =
resources.createEventLink("getGroupsOnLocation").toString();
and then put that url into your JS code via the TML. If you have an
event context, you can of course add that to the event link.
At least it worked for me that way.
Hope that helps
- - Arno
Am 30.05.2012 21:29, schrieb sommeralex:
> Hello!
>
> I am using a javascript plug in which is giving me the coordinates
> of a user. After the coordinates are retrieved, i want tapestry to
> reload a specific element - my list (which now should show
> localized entries) What i have done so far - and what is working -
> is that my js script is calling my java function
> onGetGroupsOnLocation(), taking the JSONArray and writing out that
> JSONArray via javascript
> document.getElementById("list").innerHTML=list;
>
> BUT this is not what i want. I would prefer that I can reload the
> area <t:grid source="list" /> of my tml. So what i am looking for
> is a way to update a specific area of my tml, if a tapestry
> function of my page is invoked.
>
> I am happy for any help..
>
> 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; }
>
> -- View this message in context:
> http://tapestry.1045711.n5.nabble.com/javascript-and-tapestry-reloading-a-list-tp5713535.html
>
>
Sent from the Tapestry - User mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
>
>
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.11 (GNU/Linux)
Comment: Using GnuPG with Mozilla - http://enigmail.mozdev.org/
iEYEARECAAYFAk/GjqUACgkQbmZsMyUPuXTNAACcCVZBNHE1po9sRbfWYuTjPGSk
wIwAoKVaxS3luz2neOdQ4po0VhJFhXcC
=WqOz
-----END PGP SIGNATURE-----
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org