Hi Nathan,
Maybe I misunderstood your goal, but I would solve it with a module
configured by CSS classes or data attributes instead of dedicated
components.
Something along the line of this (untested) CoffeeScript I improvised:
define ['jquery', 't5/core/events'], ($, events) ->
EVENT = 'click.request-in-progress'
register = ->
$('.show-request-in-progress').off(EVENT).on EVENT, ->
$el = $(this)
$el.addClass('request-in-progress')
relatedZone = $el.data('target-zone')
elEvent = "#{t5events.zone.wilUpdate}.##{$el.id}"
zone.on elEvent, ->
zone.off(elEvent)
trigger.removeClass('request-in-progress')
return true
$ ->
register()
$(document).on events.zone.didUpdate, register
See https://gist.github.com/benweidig/2f2fdb32c74cbd57764b1f7dabbe7079 for
a nicely formatted version.
This way, you wouldn't need an additional zone and just need to listen to
the content zone to be updated. Only the ".show-request-in-progress" and
"data-target-zone" must be set accordingly.
Actually, the CSS classes isn't needed and the relevant elements could be
targeted via the data attribute.
Cheers
Ben
On Fri, Feb 24, 2023 at 2:11 PM Nathan Quirynen <nat...@pensionarchitects.be>
wrote:
> Hi,
>
> I am looking for a solution to prevent multiple clicks on event links or
> form submits in our Tapestry application and in the meanwhile if
> possible giving the user visual feedback while the request is being
> processed.
> We use ajax (async="true") on both our eventlinks and form components,
> but there are no javascript events to hook into right before the request
> is fired and when the request response is handled. But after some
> research I found I can use the zone parameter instead of the async
> parameter and then make use of the t5:zone:refresh and
> t5:zone:did-update events to do exactly that.
> So I came up with following javascript module which can be used for both
> form submit buttons and eventlinks:
>
> var init = function(triggerClientId, zoneClientId) {
>
> var trigger = $('#' + triggerClientId);
> var zone = $('#' + zoneClientId);
>
> var event_request = 't5:zone:refresh' + '.' +
> triggerClientId;
>
> zone.on(event_request, function(e) {
>
> // disable trigger + add css class
> trigger.css('pointer-events', 'none');
> trigger.addClass('request-in-progress');
>
> var event_response = 't5:zone:did-update' + '.' +
> triggerClientId;
> zone.on(event_response, function() {
>
> // remove response event handler
> zone.off(event_response);
>
> // reenable trigger + remove css class
> trigger.css('pointer-events', 'auto');
> trigger.removeClass('request-in-progress');
>
> });
> });
>
> }
>
> I would make new components AjaxForm/AjaxEventLink to wrap the original
> ones and implement everything there.
> This seems to work as I hoped it would be, but then a zone element is
> added for every EventLink/Form which seems a bit like overkill, but I
> don't see another way at the moment.
> I was wondering if others have tried to do something like I am, or if
> there's any better way of achieving what I am trying here? Or anything
> that I am missing could be wrong with my implementation?
>
>
> Nathan
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org
> For additional commands, e-mail: users-h...@tapestry.apache.org
>
>
