Re: T5 actionlink, ajax zone and user onclick handler
On Tue, Apr 29, 2008 at 9:14 AM, Chris Lewis chris_le...@bellsouth.net wrote:
Unfortunately I can't think of a clean workaround for that. The issues
are all in the javascript and how events are dispatched and handled.
Basically it comes down to 2 problems:
This is an old thread but found it when I run into a similar issue.
1) The W3C does not mandate even handler ordering, so if you register a
handler before another there is no guarantee that it will actually fire
before the other. Lame.
I wouldn't say it's lame, it's just the way it is. No other event
system I know of would ever allow ordering event handlers. In fact,
treating all handlers equally allows an option for executing them in
parallel (even if current Javascript engines don't do that).
2) Stopping the DOM event only stops it's propagation to subsequent DOM
elements and not subsequent handlers. So that means that even if you
knew your handler would fire first, stopping the event will not stop the
zone handler from firing.
Coincidentally my tests show that the mixin's JS handler is fired first,
but that's no guarantee. If it was then you could override the
First of all, thanks for the well-written wiki page Chris, it's very
informative. I'd think the right way to solve the problem is to use
event propagation as intended. That is, in the case of confirm(), you
should target the element inside of your actionlink - for example:
t:actionlink t:id=deleteLink t:zone=zoneToUpdatespan
id=confirmDeletedelete/span/t:actionlink
Then add a handler for the nested element:
Event.observe($('confirmDelete'), 'click', function(event) {if
(!confirm('are you sure to delete this record ?')) event.stop();});
to stop the event from being propagated to the actionlink handler.
You could probably attach the confirm mixin to an Any component
outputting a span. If you put a button inside, it'd be even easier
since you could just do onclick=return confirm(...);. Unfortunately
it's not possible, or at least not trivial, to create a mixin that you
could attach to the parent element but make it listen to a click
event of a nested element - and I don't think it would be cool if the
mixing would programmatically modify the parent element (since that's
how I see you could get it done if you really wanted to).
Kalle
-
To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org
For additional commands, e-mail: users-h...@tapestry.apache.org
Re: T5 actionlink, ajax zone and user onclick handler
Hi Chris,
while not in this much detail, I also thought that the DOM events may
cause this problem. Pity even you don't know what to do.
Thanks for your answer,
Tobias
Chris Lewis schrieb:
Hi Tobias,
Unfortunately I can't think of a clean workaround for that. The issues
are all in the javascript and how events are dispatched and handled.
Basically it comes down to 2 problems:
1) The W3C does not mandate even handler ordering, so if you register a
handler before another there is no guarantee that it will actually fire
before the other. Lame.
2) Stopping the DOM event only stops it's propagation to subsequent DOM
elements and not subsequent handlers. So that means that even if you
knew your handler would fire first, stopping the event will not stop the
zone handler from firing.
Coincidentally my tests show that the mixin's JS handler is fired first,
but that's no guarantee. If it was then you could override the
Tapestry.linkZone method to make an explicit check on the event to see
if has been stopped (event.stopped), and if so cancel the operation. Not
really a nice option, unfortunately. You could take it further to force
ordering using some function reference replacement voodoo, but that's a
tad nasty. Perhaps this logic would be better factored into the
components. Any other thoughts, anyone?
Tobias Wehrum wrote:
Hi Chris,
first let me please thank you for the example you've written. It's
quite informative.
I've discovered a problem with updating a zone - I think it's no
problem of your mixin, but you may have an idea how to fix it.
The problem is: When I use have an actionlink with the confirm mixin
and a t:zone, it doesn't matter whether I click ok or cancel: The
function updating the zone will called anyway. Short example:
t:zone t:id=testArea
/t:zone
t:actionlink t:id=test t:zone=testArea
t:mixins=confirmTest 1/t:actionlinkbr/
t:actionlink t:id=test2 t:mixins=confirmTest 2/t:actionlink
@Component
private Zone testArea;
@OnEvent(component=test, value=action)
Zone onActionFromTest()
{
System.out.println(onActionFromTest!);
return testArea;
}
@OnEvent(component=test2, value=action)
void onActionFromTest2()
{
System.out.println(onActionFromTest2!);
}
Now when you click on Test 1, the console will output
onActionFromTest!, regardless of which choice I make in the confirm
dialog.
Test 2 works without problems.
Do you - or anybody else - have any idea why this is the case, or even
better, a possible solution for it?
Thanks in advance,
Tobias
Chris Lewis schrieb:
Hi Lucca,
I'd been looking for a good example to use to write a wiki explaining
the integration javascript by Tapestry, and your request gave me what I
was looking for. Check out the article here:
http://wiki.apache.org/tapestry/Tapestry5AndJavaScriptExplained (project
source: http://thegodcode.net/tapestry5/jsclarity-project.zip). Apart
from discussing in detail how T5 integrates JS, it shows how to create a
mixin that can be added to link components. The mixin attaches js code
to the component, so that when the link is clicked the user is presented
with a confirmation box. Canceling the box cancels the click, while OK
allows it to proceed as normal. This should be useful for those looking
to add click confirmation functionality, but in your case I'm not sure
if it will help. I ask you to try and see, but the problem will be how
T5 attaches the js handlers for the ajax code (that is, they may fire
before the confirmation code).
Anyway, I think it will be helpful to those looking for such an
explanation, and I hope it helps you.
chris
Luca Fossato wrote:
Hi all,
I'm playing with actionlink and zones to understand T5 ajax functions
(Tapestry 5.0.11).
I'd like to define an actionlink like this one:
t:actionlink t:id=deleteLink context=myContext
t:zone=zoneToUpdate onclick=confirm('are you sure to delete this
record ?');delete/t:actionlink
where the onclick handler uses a javascript confirmation dialog to ask
to the user if he/she wants to delete the selected record.
It seems to me the Tapestry.linkZone js function eats the user
onclick handler and set its own - so it is not possible to execute any
js code prior to invoke the ajax call.
Is it correct or am I missing something ?
I tried to fix this behaviour, modifying a bit the Tapestry.linkZone
function (just an experiment):
--- cut here ---
/** Convert a form or link into a trigger of an
Re: T5 actionlink, ajax zone and user onclick handler
Hi Chris,
first let me please thank you for the example you've written. It's quite
informative.
I've discovered a problem with updating a zone - I think it's no problem
of your mixin, but you may have an idea how to fix it.
The problem is: When I use have an actionlink with the confirm mixin and
a t:zone, it doesn't matter whether I click ok or cancel: The
function updating the zone will called anyway. Short example:
t:zone t:id=testArea
/t:zone
t:actionlink t:id=test t:zone=testArea t:mixins=confirmTest
1/t:actionlinkbr/
t:actionlink t:id=test2 t:mixins=confirmTest 2/t:actionlink
@Component
private Zone testArea;
@OnEvent(component=test, value=action)
Zone onActionFromTest()
{
System.out.println(onActionFromTest!);
return testArea;
}
@OnEvent(component=test2, value=action)
void onActionFromTest2()
{
System.out.println(onActionFromTest2!);
}
Now when you click on Test 1, the console will output
onActionFromTest!, regardless of which choice I make in the confirm
dialog.
Test 2 works without problems.
Do you - or anybody else - have any idea why this is the case, or even
better, a possible solution for it?
Thanks in advance,
Tobias
Chris Lewis schrieb:
Hi Lucca,
I'd been looking for a good example to use to write a wiki explaining
the integration javascript by Tapestry, and your request gave me what I
was looking for. Check out the article here:
http://wiki.apache.org/tapestry/Tapestry5AndJavaScriptExplained (project
source: http://thegodcode.net/tapestry5/jsclarity-project.zip). Apart
from discussing in detail how T5 integrates JS, it shows how to create a
mixin that can be added to link components. The mixin attaches js code
to the component, so that when the link is clicked the user is presented
with a confirmation box. Canceling the box cancels the click, while OK
allows it to proceed as normal. This should be useful for those looking
to add click confirmation functionality, but in your case I'm not sure
if it will help. I ask you to try and see, but the problem will be how
T5 attaches the js handlers for the ajax code (that is, they may fire
before the confirmation code).
Anyway, I think it will be helpful to those looking for such an
explanation, and I hope it helps you.
chris
Luca Fossato wrote:
Hi all,
I'm playing with actionlink and zones to understand T5 ajax functions
(Tapestry 5.0.11).
I'd like to define an actionlink like this one:
t:actionlink t:id=deleteLink context=myContext
t:zone=zoneToUpdate onclick=confirm('are you sure to delete this
record ?');delete/t:actionlink
where the onclick handler uses a javascript confirmation dialog to ask
to the user if he/she wants to delete the selected record.
It seems to me the Tapestry.linkZone js function eats the user
onclick handler and set its own - so it is not possible to execute any
js code prior to invoke the ajax call.
Is it correct or am I missing something ?
I tried to fix this behaviour, modifying a bit the Tapestry.linkZone
function (just an experiment):
--- cut here ---
/** Convert a form or link into a trigger of an Ajax update that
* updates the indicated Zone.
*/
linkZone : function(element, zoneDiv)
{
// ... original code until Otherwise, assume it's just an ordinary
link. comment...
// Otherwise, assume it's just an ordinary link.
var onClickValue = element.getAttribute(onclick);
if (onClickValue != null)
{
element.setAttribute(tapestry5_onbeforeajax, onClickValue);
}
var handler = function(event)
{
var onBeforeAjaxRes = true;
var onBeforeAjaxValue = element.getAttribute(tapestry5_onbeforeajax);
if (onBeforeAjaxValue != null)
{
onBeforeAjaxRes = eval(onBeforeAjaxValue);
}
// execute the Ajax request only if the original onclick
attribute was not set or if the evaluation
// of the related function returned true;
if (onBeforeAjaxRes === undefined || onBeforeAjaxRes)
new Ajax.Request(element.href, { onSuccess : successHandler });
return false;
};
element.onclick = handler;
}, // end of linkZone function
--- cut here ---
that is a 10 minutes fix, so probably it's not the best solution.
Anyway it seems to work fine for my experiment ;^)
To block the execution of the ajax call, do NOT use a return statement
inside the onclick handler. Example:
t:actionlink t:id=deleteLink t:zone=zoneToUpdate onclick=return
Re: T5 actionlink, ajax zone and user onclick handler
Hi Tobias,
Unfortunately I can't think of a clean workaround for that. The issues
are all in the javascript and how events are dispatched and handled.
Basically it comes down to 2 problems:
1) The W3C does not mandate even handler ordering, so if you register a
handler before another there is no guarantee that it will actually fire
before the other. Lame.
2) Stopping the DOM event only stops it's propagation to subsequent DOM
elements and not subsequent handlers. So that means that even if you
knew your handler would fire first, stopping the event will not stop the
zone handler from firing.
Coincidentally my tests show that the mixin's JS handler is fired first,
but that's no guarantee. If it was then you could override the
Tapestry.linkZone method to make an explicit check on the event to see
if has been stopped (event.stopped), and if so cancel the operation. Not
really a nice option, unfortunately. You could take it further to force
ordering using some function reference replacement voodoo, but that's a
tad nasty. Perhaps this logic would be better factored into the
components. Any other thoughts, anyone?
Tobias Wehrum wrote:
Hi Chris,
first let me please thank you for the example you've written. It's
quite informative.
I've discovered a problem with updating a zone - I think it's no
problem of your mixin, but you may have an idea how to fix it.
The problem is: When I use have an actionlink with the confirm mixin
and a t:zone, it doesn't matter whether I click ok or cancel: The
function updating the zone will called anyway. Short example:
t:zone t:id=testArea
/t:zone
t:actionlink t:id=test t:zone=testArea
t:mixins=confirmTest 1/t:actionlinkbr/
t:actionlink t:id=test2 t:mixins=confirmTest 2/t:actionlink
@Component
private Zone testArea;
@OnEvent(component=test, value=action)
Zone onActionFromTest()
{
System.out.println(onActionFromTest!);
return testArea;
}
@OnEvent(component=test2, value=action)
void onActionFromTest2()
{
System.out.println(onActionFromTest2!);
}
Now when you click on Test 1, the console will output
onActionFromTest!, regardless of which choice I make in the confirm
dialog.
Test 2 works without problems.
Do you - or anybody else - have any idea why this is the case, or even
better, a possible solution for it?
Thanks in advance,
Tobias
Chris Lewis schrieb:
Hi Lucca,
I'd been looking for a good example to use to write a wiki explaining
the integration javascript by Tapestry, and your request gave me what I
was looking for. Check out the article here:
http://wiki.apache.org/tapestry/Tapestry5AndJavaScriptExplained (project
source: http://thegodcode.net/tapestry5/jsclarity-project.zip). Apart
from discussing in detail how T5 integrates JS, it shows how to create a
mixin that can be added to link components. The mixin attaches js code
to the component, so that when the link is clicked the user is presented
with a confirmation box. Canceling the box cancels the click, while OK
allows it to proceed as normal. This should be useful for those looking
to add click confirmation functionality, but in your case I'm not sure
if it will help. I ask you to try and see, but the problem will be how
T5 attaches the js handlers for the ajax code (that is, they may fire
before the confirmation code).
Anyway, I think it will be helpful to those looking for such an
explanation, and I hope it helps you.
chris
Luca Fossato wrote:
Hi all,
I'm playing with actionlink and zones to understand T5 ajax functions
(Tapestry 5.0.11).
I'd like to define an actionlink like this one:
t:actionlink t:id=deleteLink context=myContext
t:zone=zoneToUpdate onclick=confirm('are you sure to delete this
record ?');delete/t:actionlink
where the onclick handler uses a javascript confirmation dialog to ask
to the user if he/she wants to delete the selected record.
It seems to me the Tapestry.linkZone js function eats the user
onclick handler and set its own - so it is not possible to execute any
js code prior to invoke the ajax call.
Is it correct or am I missing something ?
I tried to fix this behaviour, modifying a bit the Tapestry.linkZone
function (just an experiment):
--- cut here ---
/** Convert a form or link into a trigger of an Ajax update that
* updates the indicated Zone.
*/
linkZone : function(element, zoneDiv)
{
// ... original code until Otherwise,
Re: T5 actionlink, ajax zone and user onclick handler
I don't understand - it uses the modern DOM events system, abstracted
(partially) by tapestry.js, and further abstracted by the underlying
prototype.js library. What is it you are asking?
zack1403 wrote:
Why doesnt tapestry attach events to the DOM instead of using onClick?
Zack
Chris Lewis-5 wrote:
Hi Lucca,
I'd been looking for a good example to use to write a wiki explaining
the integration javascript by Tapestry, and your request gave me what I
was looking for. Check out the article here:
http://wiki.apache.org/tapestry/Tapestry5AndJavaScriptExplained (project
source: http://thegodcode.net/tapestry5/jsclarity-project.zip). Apart
from discussing in detail how T5 integrates JS, it shows how to create a
mixin that can be added to link components. The mixin attaches js code
to the component, so that when the link is clicked the user is presented
with a confirmation box. Canceling the box cancels the click, while OK
allows it to proceed as normal. This should be useful for those looking
to add click confirmation functionality, but in your case I'm not sure
if it will help. I ask you to try and see, but the problem will be how
T5 attaches the js handlers for the ajax code (that is, they may fire
before the confirmation code).
Anyway, I think it will be helpful to those looking for such an
explanation, and I hope it helps you.
chris
Luca Fossato wrote:
Hi all,
I'm playing with actionlink and zones to understand T5 ajax functions
(Tapestry 5.0.11).
I'd like to define an actionlink like this one:
t:actionlink t:id=deleteLink context=myContext
t:zone=zoneToUpdate onclick=confirm('are you sure to delete this
record ?');delete/t:actionlink
where the onclick handler uses a javascript confirmation dialog to ask
to the user if he/she wants to delete the selected record.
It seems to me the Tapestry.linkZone js function eats the user
onclick handler and set its own - so it is not possible to execute any
js code prior to invoke the ajax call.
Is it correct or am I missing something ?
I tried to fix this behaviour, modifying a bit the Tapestry.linkZone
function (just an experiment):
--- cut here ---
/** Convert a form or link into a trigger of an Ajax update that
* updates the indicated Zone.
*/
linkZone : function(element, zoneDiv)
{
// ... original code until Otherwise, assume it's just an ordinary
link. comment...
// Otherwise, assume it's just an ordinary link.
var onClickValue = element.getAttribute(onclick);
if (onClickValue != null)
{
element.setAttribute(tapestry5_onbeforeajax, onClickValue);
}
var handler = function(event)
{
var onBeforeAjaxRes = true;
var onBeforeAjaxValue =
element.getAttribute(tapestry5_onbeforeajax);
if (onBeforeAjaxValue != null)
{
onBeforeAjaxRes = eval(onBeforeAjaxValue);
}
// execute the Ajax request only if the original onclick
attribute was not set or if the evaluation
// of the related function returned true;
if (onBeforeAjaxRes === undefined || onBeforeAjaxRes)
new Ajax.Request(element.href, { onSuccess : successHandler });
return false;
};
element.onclick = handler;
}, // end of linkZone function
--- cut here ---
that is a 10 minutes fix, so probably it's not the best solution.
Anyway it seems to work fine for my experiment ;^)
To block the execution of the ajax call, do NOT use a return statement
inside the onclick handler. Example:
t:actionlink t:id=deleteLink t:zone=zoneToUpdate onclick=return
myFunction(myParam);delete/t:actionlink
use this instead:
t:actionlink t:id=deleteLink t:zone=zoneToUpdate
onclick=myFunction(myParam);delete/t:actionlink
because eval() returns the value of the last expression evaluated.
http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Functions:eval
Does this stuff make sense for you ?? ;^)
Thank you,
Luca Fossato
-
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
--
http://thegodcode.net
-
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
--
http://thegodcode.net
Re: T5 actionlink, ajax zone and user onclick handler
Umm, that's exactly what Tapestry does...
-Filip
zack1403 skrev:
Why doesnt tapestry attach events to the DOM instead of using onClick?
Zack
Chris Lewis-5 wrote:
Hi Lucca,
I'd been looking for a good example to use to write a wiki explaining
the integration javascript by Tapestry, and your request gave me what I
was looking for. Check out the article here:
http://wiki.apache.org/tapestry/Tapestry5AndJavaScriptExplained (project
source: http://thegodcode.net/tapestry5/jsclarity-project.zip). Apart
from discussing in detail how T5 integrates JS, it shows how to create a
mixin that can be added to link components. The mixin attaches js code
to the component, so that when the link is clicked the user is presented
with a confirmation box. Canceling the box cancels the click, while OK
allows it to proceed as normal. This should be useful for those looking
to add click confirmation functionality, but in your case I'm not sure
if it will help. I ask you to try and see, but the problem will be how
T5 attaches the js handlers for the ajax code (that is, they may fire
before the confirmation code).
Anyway, I think it will be helpful to those looking for such an
explanation, and I hope it helps you.
chris
Luca Fossato wrote:
Hi all,
I'm playing with actionlink and zones to understand T5 ajax functions
(Tapestry 5.0.11).
I'd like to define an actionlink like this one:
t:actionlink t:id=deleteLink context=myContext
t:zone=zoneToUpdate onclick=confirm('are you sure to delete this
record ?');delete/t:actionlink
where the onclick handler uses a javascript confirmation dialog to ask
to the user if he/she wants to delete the selected record.
It seems to me the Tapestry.linkZone js function eats the user
onclick handler and set its own - so it is not possible to execute any
js code prior to invoke the ajax call.
Is it correct or am I missing something ?
I tried to fix this behaviour, modifying a bit the Tapestry.linkZone
function (just an experiment):
--- cut here ---
/** Convert a form or link into a trigger of an Ajax update that
* updates the indicated Zone.
*/
linkZone : function(element, zoneDiv)
{
// ... original code until Otherwise, assume it's just an ordinary
link. comment...
// Otherwise, assume it's just an ordinary link.
var onClickValue = element.getAttribute(onclick);
if (onClickValue != null)
{
element.setAttribute(tapestry5_onbeforeajax, onClickValue);
}
var handler = function(event)
{
var onBeforeAjaxRes = true;
var onBeforeAjaxValue =
element.getAttribute(tapestry5_onbeforeajax);
if (onBeforeAjaxValue != null)
{
onBeforeAjaxRes = eval(onBeforeAjaxValue);
}
// execute the Ajax request only if the original onclick
attribute was not set or if the evaluation
// of the related function returned true;
if (onBeforeAjaxRes === undefined || onBeforeAjaxRes)
new Ajax.Request(element.href, { onSuccess : successHandler });
return false;
};
element.onclick = handler;
}, // end of linkZone function
--- cut here ---
that is a 10 minutes fix, so probably it's not the best solution.
Anyway it seems to work fine for my experiment ;^)
To block the execution of the ajax call, do NOT use a return statement
inside the onclick handler. Example:
t:actionlink t:id=deleteLink t:zone=zoneToUpdate onclick=return
myFunction(myParam);delete/t:actionlink
use this instead:
t:actionlink t:id=deleteLink t:zone=zoneToUpdate
onclick=myFunction(myParam);delete/t:actionlink
because eval() returns the value of the last expression evaluated.
http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Functions:eval
Does this stuff make sense for you ?? ;^)
Thank you,
Luca Fossato
-
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
--
http://thegodcode.net
-
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
-
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
Re: T5 actionlink, ajax zone and user onclick handler
Andy, Thanks for that, and I hope you'll find it helpful. I'd been wanting to write it for a while, but it takes a good chunk of time to write decent documentation/tutorials. This is why I encourage those out there who have knowledge of specific aspects of T5 to write articles. There are some fine ones available now, and they make using Tapestry so much easier. Chris Blower, Andy wrote: Chris, Just wanted to say that's a very well written wiki page which seems to pull together all relevant points without being too verbose. Bravo. Hope you get the urge to write more. Andy. -Original Message- From: Luca Fossato [mailto:[EMAIL PROTECTED] Sent: 19 April 2008 22:30 To: Tapestry users Subject: Re: T5 actionlink, ajax zone and user onclick handler Hi Chris, thank you ! I will read your article and I will try to use the mixin to implement the confirmation dialog for my delete actionLink. Give me some days to digest all this stuff and to implement it into my test application ;^) Regards, Luca Chris Lewis wrote: Hi Lucca, I'd been looking for a good example to use to write a wiki explaining the integration javascript by Tapestry, and your request gave me what I was looking for. Check out the article here: http://wiki.apache.org/tapestry/Tapestry5AndJavaScriptExplained (project source: http://thegodcode.net/tapestry5/jsclarity-project.zip). Apart from discussing in detail how T5 integrates JS, it shows how to create a mixin that can be added to link components. The mixin attaches js code to the component, so that when the link is clicked the user is presented with a confirmation box. Canceling the box cancels the click, while OK allows it to proceed as normal. This should be useful for those looking to add click confirmation functionality, but in your case I'm not sure if it will help. I ask you to try and see, but the problem will be how T5 attaches the js handlers for the ajax code (that is, they may fire before the confirmation code). Anyway, I think it will be helpful to those looking for such an explanation, and I hope it helps you. chris - To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED] - To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED] -- http://thegodcode.net
RE: T5 actionlink, ajax zone and user onclick handler
Chris, Just wanted to say that's a very well written wiki page which seems to pull together all relevant points without being too verbose. Bravo. Hope you get the urge to write more. Andy. -Original Message- From: Luca Fossato [mailto:[EMAIL PROTECTED] Sent: 19 April 2008 22:30 To: Tapestry users Subject: Re: T5 actionlink, ajax zone and user onclick handler Hi Chris, thank you ! I will read your article and I will try to use the mixin to implement the confirmation dialog for my delete actionLink. Give me some days to digest all this stuff and to implement it into my test application ;^) Regards, Luca Chris Lewis wrote: Hi Lucca, I'd been looking for a good example to use to write a wiki explaining the integration javascript by Tapestry, and your request gave me what I was looking for. Check out the article here: http://wiki.apache.org/tapestry/Tapestry5AndJavaScriptExplained (project source: http://thegodcode.net/tapestry5/jsclarity-project.zip). Apart from discussing in detail how T5 integrates JS, it shows how to create a mixin that can be added to link components. The mixin attaches js code to the component, so that when the link is clicked the user is presented with a confirmation box. Canceling the box cancels the click, while OK allows it to proceed as normal. This should be useful for those looking to add click confirmation functionality, but in your case I'm not sure if it will help. I ask you to try and see, but the problem will be how T5 attaches the js handlers for the ajax code (that is, they may fire before the confirmation code). Anyway, I think it will be helpful to those looking for such an explanation, and I hope it helps you. chris - To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED] - To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
Re: T5 actionlink, ajax zone and user onclick handler
Why doesnt tapestry attach events to the DOM instead of using onClick?
Zack
Chris Lewis-5 wrote:
Hi Lucca,
I'd been looking for a good example to use to write a wiki explaining
the integration javascript by Tapestry, and your request gave me what I
was looking for. Check out the article here:
http://wiki.apache.org/tapestry/Tapestry5AndJavaScriptExplained (project
source: http://thegodcode.net/tapestry5/jsclarity-project.zip). Apart
from discussing in detail how T5 integrates JS, it shows how to create a
mixin that can be added to link components. The mixin attaches js code
to the component, so that when the link is clicked the user is presented
with a confirmation box. Canceling the box cancels the click, while OK
allows it to proceed as normal. This should be useful for those looking
to add click confirmation functionality, but in your case I'm not sure
if it will help. I ask you to try and see, but the problem will be how
T5 attaches the js handlers for the ajax code (that is, they may fire
before the confirmation code).
Anyway, I think it will be helpful to those looking for such an
explanation, and I hope it helps you.
chris
Luca Fossato wrote:
Hi all,
I'm playing with actionlink and zones to understand T5 ajax functions
(Tapestry 5.0.11).
I'd like to define an actionlink like this one:
t:actionlink t:id=deleteLink context=myContext
t:zone=zoneToUpdate onclick=confirm('are you sure to delete this
record ?');delete/t:actionlink
where the onclick handler uses a javascript confirmation dialog to ask
to the user if he/she wants to delete the selected record.
It seems to me the Tapestry.linkZone js function eats the user
onclick handler and set its own - so it is not possible to execute any
js code prior to invoke the ajax call.
Is it correct or am I missing something ?
I tried to fix this behaviour, modifying a bit the Tapestry.linkZone
function (just an experiment):
--- cut here ---
/** Convert a form or link into a trigger of an Ajax update that
* updates the indicated Zone.
*/
linkZone : function(element, zoneDiv)
{
// ... original code until Otherwise, assume it's just an ordinary
link. comment...
// Otherwise, assume it's just an ordinary link.
var onClickValue = element.getAttribute(onclick);
if (onClickValue != null)
{
element.setAttribute(tapestry5_onbeforeajax, onClickValue);
}
var handler = function(event)
{
var onBeforeAjaxRes = true;
var onBeforeAjaxValue =
element.getAttribute(tapestry5_onbeforeajax);
if (onBeforeAjaxValue != null)
{
onBeforeAjaxRes = eval(onBeforeAjaxValue);
}
// execute the Ajax request only if the original onclick
attribute was not set or if the evaluation
// of the related function returned true;
if (onBeforeAjaxRes === undefined || onBeforeAjaxRes)
new Ajax.Request(element.href, { onSuccess : successHandler });
return false;
};
element.onclick = handler;
}, // end of linkZone function
--- cut here ---
that is a 10 minutes fix, so probably it's not the best solution.
Anyway it seems to work fine for my experiment ;^)
To block the execution of the ajax call, do NOT use a return statement
inside the onclick handler. Example:
t:actionlink t:id=deleteLink t:zone=zoneToUpdate onclick=return
myFunction(myParam);delete/t:actionlink
use this instead:
t:actionlink t:id=deleteLink t:zone=zoneToUpdate
onclick=myFunction(myParam);delete/t:actionlink
because eval() returns the value of the last expression evaluated.
http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Functions:eval
Does this stuff make sense for you ?? ;^)
Thank you,
Luca Fossato
-
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
--
http://thegodcode.net
-
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
--
View this message in context:
http://www.nabble.com/T5-actionlink%2C-ajax-zone-and-user-onclick-handler-tp16729287p16819660.html
Sent from the Tapestry - User mailing list archive at Nabble.com.
-
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
Re : T5 actionlink, ajax zone and user onclick handler
Hi Chris, Just a little suggestion. Because confirm.js depends on prototype I think you should add @IncludeJavaScriptLibrary(prototype.js) to your Confirm mixin. Thanks for this article Julien - Message d'origine De : Luca Fossato [EMAIL PROTECTED] À : Tapestry users users@tapestry.apache.org Envoyé le : Samedi, 19 Avril 2008, 23h30mn 17s Objet : Re: T5 actionlink, ajax zone and user onclick handler Hi Chris, thank you ! I will read your article and I will try to use the mixin to implement the confirmation dialog for my delete actionLink. Give me some days to digest all this stuff and to implement it into my test application ;^) Regards, Luca Chris Lewis wrote: Hi Lucca, I'd been looking for a good example to use to write a wiki explaining the integration javascript by Tapestry, and your request gave me what I was looking for. Check out the article here: http://wiki.apache.org/tapestry/Tapestry5AndJavaScriptExplained (project source: http://thegodcode.net/tapestry5/jsclarity-project.zip). Apart from discussing in detail how T5 integrates JS, it shows how to create a mixin that can be added to link components. The mixin attaches js code to the component, so that when the link is clicked the user is presented with a confirmation box. Canceling the box cancels the click, while OK allows it to proceed as normal. This should be useful for those looking to add click confirmation functionality, but in your case I'm not sure if it will help. I ask you to try and see, but the problem will be how T5 attaches the js handlers for the ajax code (that is, they may fire before the confirmation code). Anyway, I think it will be helpful to those looking for such an explanation, and I hope it helps you. chris - To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED] __ Do You Yahoo!? En finir avec le spam? Yahoo! Mail vous offre la meilleure protection possible contre les messages non sollicités http://mail.yahoo.fr Yahoo! Mail
Re: Re : T5 actionlink, ajax zone and user onclick handler
Julien, The beauty of using @IncludeJavaScriptLibrary is that you don't need to explicitly include prototype - it does it automatically (I mention that in the part where I talk about the annotation). Now some people will probably find that invasive and I think that as T5 evolves into a framework less coupled with a particular JS implementation, we will see this behavior evolve with that. Thanks for looking through it and I'm sorry about the length, but I wanted to cover the workings thoroughly. chris Julien HENRY wrote: Hi Chris, Just a little suggestion. Because confirm.js depends on prototype I think you should add @IncludeJavaScriptLibrary(prototype.js) to your Confirm mixin. Thanks for this article Julien - Message d'origine De : Luca Fossato [EMAIL PROTECTED] À : Tapestry users users@tapestry.apache.org Envoyé le : Samedi, 19 Avril 2008, 23h30mn 17s Objet : Re: T5 actionlink, ajax zone and user onclick handler Hi Chris, thank you ! I will read your article and I will try to use the mixin to implement the confirmation dialog for my delete actionLink. Give me some days to digest all this stuff and to implement it into my test application ;^) Regards, Luca Chris Lewis wrote: Hi Lucca, I'd been looking for a good example to use to write a wiki explaining the integration javascript by Tapestry, and your request gave me what I was looking for. Check out the article here: http://wiki.apache.org/tapestry/Tapestry5AndJavaScriptExplained (project source: http://thegodcode.net/tapestry5/jsclarity-project.zip). Apart from discussing in detail how T5 integrates JS, it shows how to create a mixin that can be added to link components. The mixin attaches js code to the component, so that when the link is clicked the user is presented with a confirmation box. Canceling the box cancels the click, while OK allows it to proceed as normal. This should be useful for those looking to add click confirmation functionality, but in your case I'm not sure if it will help. I ask you to try and see, but the problem will be how T5 attaches the js handlers for the ajax code (that is, they may fire before the confirmation code). Anyway, I think it will be helpful to those looking for such an explanation, and I hope it helps you. chris - To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED] __ Do You Yahoo!? En finir avec le spam? Yahoo! Mail vous offre la meilleure protection possible contre les messages non sollicités http://mail.yahoo.fr Yahoo! Mail -- http://thegodcode.net
Re: T5 actionlink, ajax zone and user onclick handler
Hi Chris, thank you ! I will read your article and I will try to use the mixin to implement the confirmation dialog for my delete actionLink. Give me some days to digest all this stuff and to implement it into my test application ;^) Regards, Luca Chris Lewis wrote: Hi Lucca, I'd been looking for a good example to use to write a wiki explaining the integration javascript by Tapestry, and your request gave me what I was looking for. Check out the article here: http://wiki.apache.org/tapestry/Tapestry5AndJavaScriptExplained (project source: http://thegodcode.net/tapestry5/jsclarity-project.zip). Apart from discussing in detail how T5 integrates JS, it shows how to create a mixin that can be added to link components. The mixin attaches js code to the component, so that when the link is clicked the user is presented with a confirmation box. Canceling the box cancels the click, while OK allows it to proceed as normal. This should be useful for those looking to add click confirmation functionality, but in your case I'm not sure if it will help. I ask you to try and see, but the problem will be how T5 attaches the js handlers for the ajax code (that is, they may fire before the confirmation code). Anyway, I think it will be helpful to those looking for such an explanation, and I hope it helps you. chris - To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
Re: T5 actionlink, ajax zone and user onclick handler
Hi Lucca,
I'd been looking for a good example to use to write a wiki explaining
the integration javascript by Tapestry, and your request gave me what I
was looking for. Check out the article here:
http://wiki.apache.org/tapestry/Tapestry5AndJavaScriptExplained (project
source: http://thegodcode.net/tapestry5/jsclarity-project.zip). Apart
from discussing in detail how T5 integrates JS, it shows how to create a
mixin that can be added to link components. The mixin attaches js code
to the component, so that when the link is clicked the user is presented
with a confirmation box. Canceling the box cancels the click, while OK
allows it to proceed as normal. This should be useful for those looking
to add click confirmation functionality, but in your case I'm not sure
if it will help. I ask you to try and see, but the problem will be how
T5 attaches the js handlers for the ajax code (that is, they may fire
before the confirmation code).
Anyway, I think it will be helpful to those looking for such an
explanation, and I hope it helps you.
chris
Luca Fossato wrote:
Hi all,
I'm playing with actionlink and zones to understand T5 ajax functions
(Tapestry 5.0.11).
I'd like to define an actionlink like this one:
t:actionlink t:id=deleteLink context=myContext
t:zone=zoneToUpdate onclick=confirm('are you sure to delete this
record ?');delete/t:actionlink
where the onclick handler uses a javascript confirmation dialog to ask
to the user if he/she wants to delete the selected record.
It seems to me the Tapestry.linkZone js function eats the user
onclick handler and set its own - so it is not possible to execute any
js code prior to invoke the ajax call.
Is it correct or am I missing something ?
I tried to fix this behaviour, modifying a bit the Tapestry.linkZone
function (just an experiment):
--- cut here ---
/** Convert a form or link into a trigger of an Ajax update that
* updates the indicated Zone.
*/
linkZone : function(element, zoneDiv)
{
// ... original code until Otherwise, assume it's just an ordinary
link. comment...
// Otherwise, assume it's just an ordinary link.
var onClickValue = element.getAttribute(onclick);
if (onClickValue != null)
{
element.setAttribute(tapestry5_onbeforeajax, onClickValue);
}
var handler = function(event)
{
var onBeforeAjaxRes = true;
var onBeforeAjaxValue = element.getAttribute(tapestry5_onbeforeajax);
if (onBeforeAjaxValue != null)
{
onBeforeAjaxRes = eval(onBeforeAjaxValue);
}
// execute the Ajax request only if the original onclick
attribute was not set or if the evaluation
// of the related function returned true;
if (onBeforeAjaxRes === undefined || onBeforeAjaxRes)
new Ajax.Request(element.href, { onSuccess : successHandler });
return false;
};
element.onclick = handler;
}, // end of linkZone function
--- cut here ---
that is a 10 minutes fix, so probably it's not the best solution.
Anyway it seems to work fine for my experiment ;^)
To block the execution of the ajax call, do NOT use a return statement
inside the onclick handler. Example:
t:actionlink t:id=deleteLink t:zone=zoneToUpdate onclick=return
myFunction(myParam);delete/t:actionlink
use this instead:
t:actionlink t:id=deleteLink t:zone=zoneToUpdate
onclick=myFunction(myParam);delete/t:actionlink
because eval() returns the value of the last expression evaluated.
http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Functions:eval
Does this stuff make sense for you ?? ;^)
Thank you,
Luca Fossato
-
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
--
http://thegodcode.net
-
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
Re : T5 actionlink, ajax zone and user onclick handler
Hi,
Instead of trying to deal with onclick html attribute you should use DOM lvl 2
events:
http://www.prototypejs.org/api/event/observe
The following JavaScript should work (not tested):
Event.observe($('deleteLink'), 'click', function(event) {confirm('are you sure
to delete this
record ?')});
Regards
Julien
- Message d'origine
De : Luca Fossato [EMAIL PROTECTED]
À : users@tapestry.apache.org
Envoyé le : Mercredi, 16 Avril 2008, 19h27mn 24s
Objet : T5 actionlink, ajax zone and user onclick handler
Hi all,
I'm playing with actionlink and zones to understand T5 ajax functions
(Tapestry 5.0.11).
I'd like to define an actionlink like this one:
t:actionlink t:id=deleteLink context=myContext
t:zone=zoneToUpdate onclick=confirm('are you sure to delete this
record ?');delete/t:actionlink
where the onclick handler uses a javascript confirmation dialog to ask
to the user if he/she wants to delete the selected record.
It seems to me the Tapestry.linkZone js function eats the user
onclick handler and set its own - so it is not possible to execute any
js code prior to invoke the ajax call.
Is it correct or am I missing something ?
I tried to fix this behaviour, modifying a bit the Tapestry.linkZone
function (just an experiment):
--- cut here ---
/** Convert a form or link into a trigger of an Ajax update that
* updates the indicated Zone.
*/
linkZone : function(element, zoneDiv)
{
// ... original code until Otherwise, assume it's just an ordinary
link. comment...
// Otherwise, assume it's just an ordinary link.
var onClickValue = element.getAttribute(onclick);
if (onClickValue != null)
{
element.setAttribute(tapestry5_onbeforeajax, onClickValue);
}
var handler = function(event)
{
var onBeforeAjaxRes = true;
var onBeforeAjaxValue = element.getAttribute(tapestry5_onbeforeajax);
if (onBeforeAjaxValue != null)
{
onBeforeAjaxRes = eval(onBeforeAjaxValue);
}
// execute the Ajax request only if the original onclick
attribute was not set or if the evaluation
// of the related function returned true;
if (onBeforeAjaxRes === undefined || onBeforeAjaxRes)
new Ajax.Request(element.href, { onSuccess : successHandler });
return false;
};
element.onclick = handler;
}, // end of linkZone function
--- cut here ---
that is a 10 minutes fix, so probably it's not the best solution.
Anyway it seems to work fine for my experiment ;^)
To block the execution of the ajax call, do NOT use a return statement
inside the onclick handler. Example:
t:actionlink t:id=deleteLink t:zone=zoneToUpdate onclick=return
myFunction(myParam);delete/t:actionlink
use this instead:
t:actionlink t:id=deleteLink t:zone=zoneToUpdate
onclick=myFunction(myParam);delete/t:actionlink
because eval() returns the value of the last expression evaluated.
http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Functions:eval
Does this stuff make sense for you ?? ;^)
Thank you,
Luca Fossato
-
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
_
Envoyez avec Yahoo! Mail. Une boite mail plus intelligente http://mail.yahoo.fr
