RE: javascript effects before an ajax call
How can you make the script sources that you reference in your web page show up
after the component wicket script includes? (assuming you don't want to do
this inline)
I would like to override the Wicket.replaceOuterHtml function because I would
like to do some jquery dom post processing. But whenever I include javascript,
it is above all other script includes in the rendered output. To override, it
must be included below the Wicket script includes. Thanks.
Joe
-Original Message-
From: Antony Stubbs [mailto:antony.stu...@gmail.com]
Sent: Tuesday, August 18, 2009 9:04 AM
To: Antony Stubbs
Cc: users@wicket.apache.org; Martijn Dashorst; Matej Knopp
Subject: Re: javascript effects before an ajax call
Here's the more readable version - corrected with help form Richard at
JWeekend... This is the easiest way to do the animation either side of
the Wicket replace function that I know of... If someone would like to
wrap this up into a nice behaviour for the Scriptaculous wicketstuff
library be my guest :) I probably will eventually if we get back to
the project that uses it.
script type=text/javascript!--
var oldF = Wicket.replaceOuterHtml
Wicket.replaceOuterHtml=function(element, text) {
var parent = $(element.id).parentNode;
// the disappear animation
$(element.id).fade({ duration: 0.4, afterFinish: function(effect) {
// call replace function
oldF(element, text)
// render the appear animtion on the replaced element
$(element.id).appear({ duration: 0.4});
}});
}
--/script
Cheers,
Antony Stubbs,
sharca.com
On 29/07/2009, at 4:54 AM, Antony Stubbs wrote:
I have a workaround and it goes a little something like this:
script type=text/
javascriptWicket.replaceOuterHtml=function(element, text) {
new $(element.id).fade({ duration: 0.4, afterFinish:
function(effect) {
if (Wicket.Browser.isIE()) {
Wicket.replaceOuterHtmlIE(element, text);
} else if (Wicket.Browser.isSafari() ||
Wicket.Browser.isOpera()) {
Wicket.replaceOuterHtmlSafari(element, text);
} else /* GECKO */ {
// create range and fragment
var range = element.ownerDocument.createRange();
range.selectNode(element);
var fragment =
range.createContextualFragment(text);
element.parentNode.replaceChild(fragment, element);
}
$(element.id).appear({ duration: 0.4});
}});
}
/script
Putting that at the top of the html overrides the wicket function,
adds in a javascript effect, then using the onFinish hook, runs the
original Wicket code, the precedes with another effect. This makes
the effects run immediately after the ajax call has completed...
This adds a fade transition every time wicket replaces a dom
element. A better version would allow you to do it with some hooks,
passing in your transition functions.
2009/7/28 Antony Stubbs antony.stu...@gmail.com
(sorry, sent to wrong list before)
Is it possible to override certain methods in wicketajax.js ? In
order to modify the behaviour of one of the methods.
but i'd prefer not to run a patched wicket, or have to run on a copy
of the whole wicketajax.js file - but i will if i have to :/
what i want to do is add pre and post hooks
processComponent#Wicket.replaceOuterHtml function - as this will
solve what I want to do - i.e. run an animation on the element to be
replaced, after the ajax call completes, but before the element is
replaced.
p.s. martijn, is there any info available on the plan for the new
ajax system?
I just found - there is a post animation hook in Scriptaculous,
which I have working to run the ajax request in, however this
doesn't quite get there, as there's is of course the delay between
when the animation finishes, and when the ajax request actually
completes - which is too long.
Update:
I've tried overriding the js functions like this:
script type=text/javascript
function newProcessComponent: function(steps, node) {
alert('replaced!');
}
Wicket.Ajax.Call.prototype.processComponent = newProcessComponent
/script
script type=text/javascriptWicket.replaceOuterHtml=function()
{alert('replaceOuterHtml');}/script
script type=text/
javascriptWicket.Ajax.Call.prototype.processComponent:
function(steps, node) {{alert('processComponent');}/script
but only the replaceOuterHtml functions works, i think because the
there's a difference because processComponent is a member of an
object...
I need
Re: javascript effects before an ajax call
Here's the more readable version - corrected with help form Richard at
JWeekend... This is the easiest way to do the animation either side of
the Wicket replace function that I know of... If someone would like to
wrap this up into a nice behaviour for the Scriptaculous wicketstuff
library be my guest :) I probably will eventually if we get back to
the project that uses it.
script type=text/javascript!--
var oldF = Wicket.replaceOuterHtml
Wicket.replaceOuterHtml=function(element, text) {
var parent = $(element.id).parentNode;
// the disappear animation
$(element.id).fade({ duration: 0.4, afterFinish: function(effect) {
// call replace function
oldF(element, text)
// render the appear animtion on the replaced element
$(element.id).appear({ duration: 0.4});
}});
}
--/script
Cheers,
Antony Stubbs,
sharca.com
On 29/07/2009, at 4:54 AM, Antony Stubbs wrote:
I have a workaround and it goes a little something like this:
script type=text/
javascriptWicket.replaceOuterHtml=function(element, text) {
new $(element.id).fade({ duration: 0.4, afterFinish:
function(effect) {
if (Wicket.Browser.isIE()) {
Wicket.replaceOuterHtmlIE(element, text);
} else if (Wicket.Browser.isSafari() ||
Wicket.Browser.isOpera()) {
Wicket.replaceOuterHtmlSafari(element, text);
} else /* GECKO */ {
// create range and fragment
var range = element.ownerDocument.createRange();
range.selectNode(element);
var fragment =
range.createContextualFragment(text);
element.parentNode.replaceChild(fragment, element);
}
$(element.id).appear({ duration: 0.4});
}});
}
/script
Putting that at the top of the html overrides the wicket function,
adds in a javascript effect, then using the onFinish hook, runs the
original Wicket code, the precedes with another effect. This makes
the effects run immediately after the ajax call has completed...
This adds a fade transition every time wicket replaces a dom
element. A better version would allow you to do it with some hooks,
passing in your transition functions.
2009/7/28 Antony Stubbs antony.stu...@gmail.com
(sorry, sent to wrong list before)
Is it possible to override certain methods in wicketajax.js ? In
order to modify the behaviour of one of the methods.
but i'd prefer not to run a patched wicket, or have to run on a copy
of the whole wicketajax.js file - but i will if i have to :/
what i want to do is add pre and post hooks
processComponent#Wicket.replaceOuterHtml function - as this will
solve what I want to do - i.e. run an animation on the element to be
replaced, after the ajax call completes, but before the element is
replaced.
p.s. martijn, is there any info available on the plan for the new
ajax system?
I just found - there is a post animation hook in Scriptaculous,
which I have working to run the ajax request in, however this
doesn't quite get there, as there's is of course the delay between
when the animation finishes, and when the ajax request actually
completes - which is too long.
Update:
I've tried overriding the js functions like this:
script type=text/javascript
function newProcessComponent: function(steps, node) {
alert('replaced!');
}
Wicket.Ajax.Call.prototype.processComponent = newProcessComponent
/script
script type=text/javascriptWicket.replaceOuterHtml=function()
{alert('replaceOuterHtml');}/script
script type=text/
javascriptWicket.Ajax.Call.prototype.processComponent:
function(steps, node) {{alert('processComponent');}/script
but only the replaceOuterHtml functions works, i think because the
there's a difference because processComponent is a member of an
object...
I need to replace processComponent so that I can have access to the
Cheers,
Antony Stubbs,
sharca.com
On 27/07/2009, at 9:31 PM, Martijn Dashorst wrote:
Not 100% sure if it's already done, but I've bugged Matej with this
request for 1.5's new Ajax implementation.
Martijn
On Mon, Jul 27, 2009 at 9:40 AM, Antony Stubbsantony.stu...@gmail.com
wrote:
Was this ever implemented / solved?:
Nov 21, 2006; 07:09am Re: Using Javascript Effects Before An Ajax
Call
This is possible to do with wicket, however it would require minor
enhancement of the ajax processing code.
We already have infrastructure for asynchronously postponing
processing
steps.
However, I can't do that right now. Maybe in a week or so. So if
anyone
really needs to pause between executing
Re: javascript effects before an ajax call
I have a workaround and it goes a little something like this:
script type=text/javascriptWicket.replaceOuterHtml=function(element,
text) {
new $(element.id).fade({ duration: 0.4, afterFinish: function(effect) {
if (Wicket.Browser.isIE()) {
Wicket.replaceOuterHtmlIE(element, text);
} else if (Wicket.Browser.isSafari() || Wicket.Browser.isOpera()) {
Wicket.replaceOuterHtmlSafari(element, text);
} else /* GECKO */ {
// create range and fragment
var range = element.ownerDocument.createRange();
range.selectNode(element);
var fragment = range.createContextualFragment(text);
element.parentNode.replaceChild(fragment, element);
}
$(element.id).appear({ duration: 0.4});
}});
}
/script
Putting that at the top of the html overrides the wicket function, adds in a
javascript effect, then using the onFinish hook, runs the original Wicket
code, the precedes with another effect. This makes the effects run
immediately after the ajax call has completed...
This adds a fade transition every time wicket replaces a dom element. A
better version would allow you to do it with some hooks, passing in your
transition functions.
2009/7/28 Antony Stubbs antony.stu...@gmail.com
(sorry, sent to wrong list before)
Is it possible to override certain methods in wicketajax.js ? In order to
modify the behaviour of one of the methods.
but i'd prefer not to run a patched wicket, or have to run on a copy of the
whole wicketajax.js file - but i will if i have to :/
what i want to do is add pre and post hooks
processComponent#Wicket.replaceOuterHtml function - as this will solve what
I want to do - i.e. run an animation on the element to be replaced, after
the ajax call completes, but before the element is replaced.
p.s. martijn, is there any info available on the plan for the new ajax
system?
I just found - there is a post animation hook in Scriptaculous, which I
have working to run the ajax request in, however this doesn't quite get
there, as there's is of course the delay between when the animation
finishes, and when the ajax request actually completes - which is too long.
Update:
I've tried overriding the js functions like this:
script type=text/javascript
function newProcessComponent: function(steps, node) {
alert('replaced!');
}
Wicket.Ajax.Call.prototype.processComponent = newProcessComponent
/script
script type=text/javascriptWicket.replaceOuterHtml=function() {alert(
'replaceOuterHtml');}/script
script type=text/javascriptWicket.Ajax.Call.prototype.processComponent:
function(steps, node) {{alert('processComponent');}/script
but only the replaceOuterHtml functions works, i think because the there's
a difference because processComponent is a member of an object...
I need to replace processComponent so that I can have access to the
Cheers,
Antony Stubbs,
sharca.com
On 27/07/2009, at 9:31 PM, Martijn Dashorst wrote:
Not 100% sure if it's already done, but I've bugged Matej with this
request for 1.5's new Ajax implementation.
Martijn
On Mon, Jul 27, 2009 at 9:40 AM, Antony Stubbsantony.stu...@gmail.com
wrote:
Was this ever implemented / solved?:
Nov 21, 2006; 07:09am Re: Using Javascript Effects Before An Ajax Call
This is possible to do with wicket, however it would require minor
enhancement of the ajax processing code.
We already have infrastructure for asynchronously postponing processing
steps.
However, I can't do that right now. Maybe in a week or so. So if anyone
really needs to pause between executing scripts from prependJavascript
and replacing the elements (which is I understand right this is all
about), keep bugging me, I will eventually implement that. :)
-Matej
cygnusx2112 wrote:
Thanks for the clarification Igor. I ended up achieving the desired affect
by
using an AjaxCallDecarator in combination with a server side pause.
Basically I was trying to do the following:
1) Run animation effect on element
2) Use Ajax request to replace element
3) Run another animation effect on the element
As you noticed, I needed a way to block so that #2 and #3 would not step
on
#1. As a non-Javascript guru I was unable to find a way to block the
Javascript thread without some kind of CPU beating hack loop. However,
the
solution I am using seems to work well.
In my efforts to accomplish this I have built some pretty interesting
subclasses of AjaxEventBehavior that might be worth contributing. They
basically allow you to cleanly add pre/post visual effects to components
around an Ajax event.
Regards,
-MT
igor.vaynberg wrote:
the effect is clearly executed asynchronously from the rest of the
javascript thread so you need to find a way to block until the effect
is
complete.
-igor
... [show rest of quote]
-
Take Surveys. Earn Cash. Influence
javascript effects before an ajax call
Was this ever implemented / solved?: Nov 21, 2006; 07:09am Re: Using Javascript Effects Before An Ajax Call This is possible to do with wicket, however it would require minor enhancement of the ajax processing code. We already have infrastructure for asynchronously postponing processing steps. However, I can't do that right now. Maybe in a week or so. So if anyone really needs to pause between executing scripts from prependJavascript and replacing the elements (which is I understand right this is all about), keep bugging me, I will eventually implement that. :) -Matej cygnusx2112 wrote: Thanks for the clarification Igor. I ended up achieving the desired affect by using an AjaxCallDecarator in combination with a server side pause. Basically I was trying to do the following: 1) Run animation effect on element 2) Use Ajax request to replace element 3) Run another animation effect on the element As you noticed, I needed a way to block so that #2 and #3 would not step on #1. As a non-Javascript guru I was unable to find a way to block the Javascript thread without some kind of CPU beating hack loop. However, the solution I am using seems to work well. In my efforts to accomplish this I have built some pretty interesting subclasses of AjaxEventBehavior that might be worth contributing. They basically allow you to cleanly add pre/post visual effects to components around an Ajax event. Regards, -MT igor.vaynberg wrote: the effect is clearly executed asynchronously from the rest of the javascript thread so you need to find a way to block until the effect is complete. -igor ... [show rest of quote] - Take Surveys. Earn Cash. Influence the Future of IT Join SourceForge.net's Techsay panel and you'll get the chance to share your opinions on IT business topics through brief surveys - and earn cash http://www.techsay.com/default.php?page=join.phpp=sourceforgeCID=DEVDEV ___ Wicket-user mailing list wicket-u...@... https://lists.sourceforge.net/lists/listinfo/wicket-user Cheers, Antony Stubbs, sharca.com
Re: javascript effects before an ajax call
Not 100% sure if it's already done, but I've bugged Matej with this request for 1.5's new Ajax implementation. Martijn On Mon, Jul 27, 2009 at 9:40 AM, Antony Stubbsantony.stu...@gmail.com wrote: Was this ever implemented / solved?: Nov 21, 2006; 07:09am Re: Using Javascript Effects Before An Ajax Call This is possible to do with wicket, however it would require minor enhancement of the ajax processing code. We already have infrastructure for asynchronously postponing processing steps. However, I can't do that right now. Maybe in a week or so. So if anyone really needs to pause between executing scripts from prependJavascript and replacing the elements (which is I understand right this is all about), keep bugging me, I will eventually implement that. :) -Matej cygnusx2112 wrote: Thanks for the clarification Igor. I ended up achieving the desired affect by using an AjaxCallDecarator in combination with a server side pause. Basically I was trying to do the following: 1) Run animation effect on element 2) Use Ajax request to replace element 3) Run another animation effect on the element As you noticed, I needed a way to block so that #2 and #3 would not step on #1. As a non-Javascript guru I was unable to find a way to block the Javascript thread without some kind of CPU beating hack loop. However, the solution I am using seems to work well. In my efforts to accomplish this I have built some pretty interesting subclasses of AjaxEventBehavior that might be worth contributing. They basically allow you to cleanly add pre/post visual effects to components around an Ajax event. Regards, -MT igor.vaynberg wrote: the effect is clearly executed asynchronously from the rest of the javascript thread so you need to find a way to block until the effect is complete. -igor ... [show rest of quote] - Take Surveys. Earn Cash. Influence the Future of IT Join SourceForge.net's Techsay panel and you'll get the chance to share your opinions on IT business topics through brief surveys - and earn cash http://www.techsay.com/default.php?page=join.phpp=sourceforgeCID=DEVDEV ___ Wicket-user mailing list wicket-u...@... https://lists.sourceforge.net/lists/listinfo/wicket-user Cheers, Antony Stubbs, sharca.com -- Become a Wicket expert, learn from the best: http://wicketinaction.com Apache Wicket 1.3.5 is released Get it now: http://www.apache.org/dyn/closer.cgi/wicket/1.3. - To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org For additional commands, e-mail: users-h...@wicket.apache.org
