Hi Matthias,
as second parameter of deferredZoneUpdate() function You need to
provide a event link to a function that returns a block or a
Zone.Body, something like:
@OnEvent("update-zone-event")
Object myEvent() {
return request.isXHR()?zone.getBody():null;
}
the event Link, that should be passed to js Module can be created as follow:
public String getZoneUpdateLink() {
componentResources.createEventLink("update-zone-event",
context).toAbsoluteURI();
}
JavaScript, something like
require([ "jquery", "t5/core/zone" ], function($, zoneManager) {
var moduleFunc, exports;
moduleFunc = function(myController, myZoneId, url){
$('#'+myControllerId).on("myEvent", function(e) {
zoneManager.deferredZoneUpdate(myZoneId, url);
}
};
return exports = {
moduleFunc: moduleFunc
};
});
}).call(this);
and initialization call in page/component:
javaScriptSupport.require("myModule").invoke("moduleFunc").with(myControllerId,
zone.getClientId(), getZoneUpdateLink());
2013/12/12 Matthias <thegreatme...@gmail.com>:
> Thanks to both of you, I tried Howard's approach but I think I missing
> something fundamental.
> Heres my new code:
>
> JavaScript
> require([ "jquery", "t5/core/zone" ], function($, zoneManager) {
>
> // #1 with zone.update
> var myZone = $("#myZone");
> // why do I have to set the data-update-zone attribute?
> myZone.attr("data-update-zone", "myZone");
> var zone = zoneManager.findZone(myZone);
> // this works, but just with a string. should I get the dom elements via
> ajax?
> zone.update("some string");
>
> // #2 refresh - there is no refresh method on the zone?
> // zone.refresh();
>
> // #3 defferedZoneUpdate
> // the java method is called - maybe this can work
> zoneManager.deferredZoneUpdate("myZone",
> "http://localhost:8080/search.myZone";);
> });
>
> Java
> public class Search {
>
> // the method is called successfully, but my zone is not updated in any
> way.
> JSONArray onActionFromDriverZone() {
> JSONArray arr = new JSONArray();
> JSONObject d = new JSONObject();
> d.put("id", "2");
> arr.put(d);
> return arr;
>
> }
> }
>
>
> On 12.12.2013 12:56, Howard Lewis Ship wrote:
>>
>> The short form is: trigger an events.zone.update event on the zone's
>> client-side element to update it immediately, using available content (a
>> string, or DOM elements).
>>
>> Or, trigger events.zone.refresh event when you know a URL and additional
>> parameters; Tapestry will run the Ajax request and update the zone when
>> the
>> content is available.
>>
>> I think Geoff's example is actually a bit complicated. Take a peek at the
>> t5/core/zone module to see how simple it can be:
>> http://people.apache.org/~hlship/t5api/coffeescript/zone.html
>>
>>
>> On Thu, Dec 12, 2013 at 1:47 AM, Geoff Callender <
>> geoff.callender.jumpst...@gmail.com> wrote:
>>
>>> This should give you the clues you need: it's the ZoneUpdater mixin from
>>> the upcoming preview of JumpStart 7. It uses a dependency on
>>> "t5/core/zone".
>>>
>>> Example usage:
>>>
>>> <t:textfield t:id="firstName" t:mixins="zoneUpdater" clientEvent="keyup"
>>> event="firstNameChanged" zone="nameZone"/>
>>>
>>>
>>> ZoneUpdater.java:
>>>
>>> /**
>>> * A simple mixin for attaching javascript that updates a zone on any
>>> client-side event.
>>> * Based on
>>> http://tinybits.blogspot.com/2010/03/new-and-better-zoneupdater.html
>>> */
>>> package jumpstart.web.mixins;
>>>
>>> import org.apache.tapestry5.BindingConstants;
>>> import org.apache.tapestry5.ClientElement;
>>> import org.apache.tapestry5.ComponentResources;
>>> import org.apache.tapestry5.annotations.Environmental;
>>> import org.apache.tapestry5.annotations.InjectContainer;
>>> import org.apache.tapestry5.annotations.Parameter;
>>> import org.apache.tapestry5.ioc.annotations.Inject;
>>> import org.apache.tapestry5.services.javascript.JavaScriptSupport;
>>>
>>> public class ZoneUpdater {
>>>
>>> // Parameters
>>>
>>> /**
>>> * The event to listen for on the client. If not specified, zone
>>> update can only be triggered manually through
>>> * calling updateZone on the JS object.
>>> */
>>> @Parameter(name = "clientEvent", defaultPrefix =
>>> BindingConstants.LITERAL)
>>> private String clientEvent;
>>>
>>> /**
>>> * The event to listen for in your component class
>>> */
>>> @Parameter(name = "event", defaultPrefix =
>>> BindingConstants.LITERAL, required = true)
>>> private String event;
>>>
>>> @Parameter(name = "prefix", defaultPrefix =
>>> BindingConstants.LITERAL, value = "default")
>>> private String prefix;
>>>
>>> @Parameter(name = "context")
>>> private Object[] context;
>>>
>>> /**
>>> * The zone to be updated by us.
>>> */
>>> @Parameter(name = "zone", defaultPrefix =
>>> BindingConstants.LITERAL, required = true)
>>> private String zone;
>>>
>>> /**
>>> * Set secure to true if https is being used, else set to false.
>>> */
>>> @Parameter(name = "secure", defaultPrefix =
>>> BindingConstants.LITERAL, value = "false")
>>> private boolean secure;
>>>
>>> // Useful bits and pieces
>>>
>>> @Inject
>>> private ComponentResources componentResources;
>>>
>>> @Environmental
>>> private JavaScriptSupport javaScriptSupport;
>>>
>>> /**
>>> * The element we attach ourselves to
>>> */
>>> @InjectContainer
>>> private ClientElement clientElement;
>>>
>>> // The code
>>>
>>> void afterRender() {
>>> String listenerURI =
>>> componentResources.createEventLink(event, context).toAbsoluteURI(secure);
>>>
>>>
>>>
>>> javaScriptSupport.require("mixins/zone-updater").with(clientElement.getClientId(),
>>> clientEvent, listenerURI,
>>> zone);
>>> }
>>> }
>>>
>>>
>>> zone-updater.js:
>>>
>>> define(["jquery", "t5/core/zone"], function($, zoneManager) {
>>>
>>> return function(elementId, clientEvent, listenerURI,
>>> zoneElementId) {
>>> var element = $("#" + elementId);
>>>
>>> if (clientEvent) {
>>> element.on(clientEvent, updateZone);
>>> }
>>>
>>> function updateZone() {
>>> var listenerURIWithValue = listenerURI;
>>>
>>> if (element.val()) {
>>> listenerURIWithValue =
>>> appendQueryStringParameter(listenerURIWithValue, 'param', element.val());
>>> }
>>>
>>> zoneManager.deferredZoneUpdate(zoneElementId,
>>> listenerURIWithValue);
>>> }
>>> }
>>>
>>> function appendQueryStringParameter(url, name, value) {
>>> if (url.indexOf('?') < 0) {
>>> url += '?'
>>> }
>>> else {
>>> url += '&';
>>> }
>>> value = escape(value);
>>> url += name + '=' + value;
>>> return url;
>>> }
>>>
>>> });
>>>
>>> Cheers,
>>>
>>> Geoff
>>>
>>>
>>> On 12/12/2013, at 6:50 AM, Matthias wrote:
>>>
>>>> Hi,
>>>>
>>>> I'd like to update a zone with a simple ajax call and I'm not sure how
>>>
>>> its done:
>>>>
>>>> Javascript
>>>> require([ "jquery", "myController"], function($, myController) {
>>>>
>>>> $(myController).on("myEvent", function(e) {
>>>> // here i'd like to fire an ajax call that should update my zone
>>>> });
>>>> });
>>>>
>>>> tml
>>>> <t:zone id="myZone" t:id="myZone">
>>>> <table class="table">
>>>> <tbody>
>>>> <tr t:type="loop" source="hits" value="hit">
>>>> <td>${hit.id}</td>
>>>> </tr>
>>>> </tbody>
>>>> </table>
>>>> </t:zone>
>>>>
>>>> Java
>>>> public class Search {
>>>>
>>>> @Property
>>>> // some other annotations needed?
>>>> List<Hit> hits;
>>>>
>>>> @Property
>>>> // some other annotations needed?
>>>> Hit hit; // i need this right?
>>>>
>>>> @InjectComponent
>>>> private Zone myZone;
>>>>
>>>> private void setupRender() {
>>>> hits = new ArrayList<>();
>>>> }
>>>>
>>>> Object onAjaxEvent() {
>>>> hits = // do some solr stuff to get hits
>>>> return myZone;
>>>> }
>>>> }
>>>>
>>>> In 5.3 there was a Tapestry javascript object with a
>>>
>>> findZoneManagerForZone() method. How is this done in 5.4?
>>>>
>>>> ---------------------------------------------------------------------
>>>> To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org
>>>> For additional commands, e-mail: users-h...@tapestry.apache.org
>>>>
>>>
>>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org
> For additional commands, e-mail: users-h...@tapestry.apache.org
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org
For additional commands, e-mail: users-h...@tapestry.apache.org
