[Seaside] A welcome; and chaining jQuery events
watchlala at hotmail.com
Wed Oct 16 00:00:22 UTC 2013
Here's a little demo that should illustrate what you're attempting to do:
==============WAComponent > IndexComponent==============Class > canBeRoot ^true.Instance > renderContentOn: html html div id: 'parent'; with: ChildA new. html paragraph id: 'hiddenComponent'; style: 'display: none;'; with: 'I was hidden! But no longer!'. html button bePush; " using a script returned from the server (in this case, it's inline, but it could be a method call) via AJAX " " the #fadeOut: method is exactly the same as the jQuery docs. it's signature is fadeOut( [ duration Number ][, callback Function ] )" onClick: ( (html jQuery: '#parent') children first fadeOut: 1 second callback: ( html jQuery ajax script: [ :s | s add: ( (s jQuery: '#parent') html: ChildB new ) ] ) ); value: 'Replace component via AJAX'. html break. html button bePush; " notice this is using JQAnimate to do the same thing " " also notice that if you use this twice in the demo, the other two buttons won't load anything because there is no longer a child in #parent " onClick: ( (html jQuery: '#parent') children first animate opacity: 0; duration: 1 second; onComplete: ( (html jQuery: '#parent') empty, (html jQuery: '#hiddenComponent') appendTo: (html jQuery: '#parent'); fadeIn: 1 second ) ); value: 'Move hidden component and show it'. html break. html button bePush; " this one just inserts some pre-rendered content " onClick: ( (html jQuery: '#parent') children first fadeOut: 1 second callback: ( (html jQuery: '#parent') html: [ :r | r paragraph: 'blah blah' ] ) ); value: 'Replace component with static content'.
=======WAComponent > ChildA=======Instance > renderContentOn: html html paragraph: 'Child A'.
======WAComponent > ChildB======Instance > renderContentOn: html html paragraph: 'Child B'.
RSFrom: watchlala at hotmail.com
To: seaside at lists.squeakfoundation.org
Subject: RE: [Seaside] A welcome; and chaining jQuery events
Date: Tue, 15 Oct 2013 13:34:19 -0600
You should be able to cascade an #onComplete block to the JQAnimate object. I have a bunch of code at home I can send you later, but it should look something like this:
(html jQuery: id) fadeOut: 0.5; onComplete: (html jQuery: id) ....
> From: wojtekk at kofeina.net
> Date: Tue, 15 Oct 2013 16:46:00 +0200
> Subject: Re: [Seaside] A welcome; and chaining jQuery events
> To: seaside at lists.squeakfoundation.org
> this is obvious, isn't it? Now how to do this not leaving Smalltalk
> On Tue, Oct 15, 2013 at 4:38 PM, Karsten Kusche <karsten at heeg.de> wrote:
> > try the documentation:
> > http://api.jquery.com/fadeout/ there's an options parameter that you can
> > pass to fadeout. In that dictionary you can specify a done-function.
> > Kind Regards
> > Karsten
> > --
> > Karsten Kusche - Dipl. Inf. (FH) - karsten at heeg.de
> > Georg Heeg eK - Köthen
> > Handelsregister: Amtsgericht Dortmund A 12812
> > Am Dienstag, 15. Oktober 2013 um 16:04 schrieb Wojciech Kaczmarek:
> > Hello,
> > I'd like to welcome everyone on this list. I was playing with Seaside
> > many years ago and I'm very glad to see it not only survived but being
> > still active and evolving :)
> > Now I'm trying to get my head around the idea of interactive web
> > components I always wanted to have in a library. Looks like with some
> > creativity and discipline Seaside may be the platform it's possible to
> > have such thing on.
> > I am experimenting now with giving the components visual behavior via
> > jquery effects. Say I want to: fade out some dom element, then replace
> > it with another and fade in this new one. My tries now boil down to a
> > very specific question:
> > How to properly chain jQuery effects?
> > If I do something like:
> > html fooElement
> > id: id;
> > onClick: (html jQuery ajax script: [ :s |
> > s << (s jQuery: id) fadeOut: 2 seconds.
> > s << (s jQuery: id) parent html: OtherFoo new.
> > ]
> > then the fade-out action will be fired -- meaning: started, but then
> > the dom replacement will be also fired right-away, effectively
> > replacing the element being faded out.
> > I need a method for chaining actions - not only pre-existing effects
> > is starting upon completion of another.
> > I realize it'd require to have some Seaside API over what goes into js
> > complete() callback handlers - is there anything like this, possibly
> > undocumented?
> > cheers,
> > Wojtek
> seaside mailing list
> seaside at lists.squeakfoundation.org
seaside mailing list
seaside at lists.squeakfoundation.org
-------------- next part --------------
An HTML attachment was scrubbed...
More information about the seaside