Re: [5.4] update zone with javascript

[Geoff Callender]

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
>