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
