You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Antony Stubbs <an...@gmail.com> on 2009/08/18 15:04:02 UTC
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/
> javascript">Wicket.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 <an...@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/javascript">Wicket.replaceOuterHtml=function()
> {alert('replaceOuterHtml');}</script>
> <script type="text/
> javascript">Wicket.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 Stubbs<antony.stubbs@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.php&p=sourceforge&CID=DEVDEV
>>> _______________________________________________
>>> Wicket-user mailing list
>>> Wicket-user@...
>>> 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-unsubscribe@wicket.apache.org
>> For additional commands, e-mail: users-help@wicket.apache.org
>>
>
>
>
>
> --
> ___________________________
> http://stubbisms.wordpress.com/
>
>
RE: javascript effects before an ajax call
Posted by Joe Hudson <Jo...@clear2pay.com>.
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.stubbs@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/
> javascript">Wicket.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 <an...@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/javascript">Wicket.replaceOuterHtml=function()
> {alert('replaceOuterHtml');}</script>
> <script type="text/
> javascript">Wicket.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 Stubbs<antony.stubbs@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.php&p=sourceforge&CID=DEVDEV
>>> _______________________________________________
>>> Wicket-user mailing list
>>> Wicket-user@...
>>> 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-unsubscribe@wicket.apache.org
>> For additional commands, e-mail: users-help@wicket.apache.org
>>
>
>
>
>
> --
> ___________________________
> http://stubbisms.wordpress.com/
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org