<html>
<head>
</head>
<body class='hmmessage'><div dir='ltr'>
<style><!--
.hmmessage P
{
margin:0px;
padding:0px
}
body.hmmessage
{
font-size: 12pt;
font-family:Calibri
}
--></style>
<div dir="ltr">Here's a little demo that should illustrate what you're attempting to do:<div><br></div><div>==============</div><div><div><span style="font-size: 12pt;">WAComponent > </span>IndexComponent</div><div>==============</div><div>Class > canBeRoot</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>^true.</div><div><div>Instance > renderContentOn: html</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>html div</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>id: 'parent';</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>with: ChildA new.</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>html paragraph </div><div><span class="Apple-tab-span" style="white-space:pre"> </span>id: 'hiddenComponent';</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>style: 'display: none;';</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>with: 'I was hidden! But no longer!'.</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>html button</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>bePush;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>" using a script returned from the server (in this case, it's inline, but it could be a method call) via AJAX "</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>" the #fadeOut: method is exactly the same as the jQuery docs. it's signature is fadeOut( [ duration Number ][, callback Function ] )"</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>onClick: ( (html jQuery: '#parent') children first fadeOut: 1 second callback: ( html jQuery ajax script: [ :s | s add: ( (s jQuery: '#parent') html: ChildB new ) ] ) );</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>value: 'Replace component via AJAX'.</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>html break.</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>html button</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>bePush;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>" notice this is using JQAnimate to do the same thing "</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>" 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 "</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>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 ) );</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>value: 'Move hidden component and show it'.</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>html break.</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>html button</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>bePush;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>" this one just inserts some pre-rendered content "</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>onClick: ( (html jQuery: '#parent') children first fadeOut: 1 second callback: ( (html jQuery: '#parent') html: [ :r | r paragraph: 'blah blah' ] ) );</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>value: 'Replace component with static content'.</div></div><div><br></div><div><div><span style="font-size: 12pt;">Instance > </span>updateRoot: html</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>super updateRoot: html.</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>html title: 'Fade out child component in parent with a different child.'.</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>html javascript url: 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'.</div></div><div><br></div><div>=======</div><div><span style="font-size: 12pt;">WAComponent > </span>ChildA</div><div>=======</div><div><span style="font-size: 12pt;">Instance > </span>renderContentOn: html</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>html paragraph: 'Child A'.</div><div><br></div><div>======</div><div>WAComponent > ChildB</div><div>======</div><div><div><span style="font-size: 12pt;">Instance > </span>renderContentOn: html</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>html paragraph: 'Child B'.</div></div><div><br></div><div>RS</div><div><hr id="stopSpelling">From: watchlala@hotmail.com<br>To: seaside@lists.squeakfoundation.org<br>Subject: RE: [Seaside] A welcome; and chaining jQuery events<br>Date: Tue, 15 Oct 2013 13:34:19 -0600<br><br>
<style><!--
.ExternalClass .ecxhmmessage P {
padding:0px;
}
.ExternalClass body.ecxhmmessage {
font-size:12pt;
font-family:Calibri;
}
--></style>
<div dir="ltr">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:<br>
<br>
(html jQuery: id) fadeOut: 0.5; onComplete: (html jQuery: id) ....<br>
<br>
Check out the examples as well: <a href="http://demo.seaside.st/javascript/jquery/animations" target="_blank">http://demo.seaside.st/javascript/jquery/animations</a><br>
<br>
RS<br> <br>
<div>> From: wojtekk@kofeina.net<br>> Date: Tue, 15 Oct 2013 16:46:00 +0200<br>> Subject: Re: [Seaside] A welcome; and chaining jQuery events<br>> To: seaside@lists.squeakfoundation.org<br>> <br>> Hi,<br>> this is obvious, isn't it? Now how to do this not leaving Smalltalk<br>> and not introducing literal javascript?<br>> <br>> W.<br>> <br>> On Tue, Oct 15, 2013 at 4:38 PM, Karsten Kusche <karsten@heeg.de> wrote:<br>> > try the documentation:<br>> ><br>> > http://api.jquery.com/fadeout/ there's an options parameter that you can<br>> > pass to fadeout. In that dictionary you can specify a done-function.<br>> ><br>> > Kind Regards<br>> > Karsten<br>> ><br>> > --<br>> > Karsten Kusche - Dipl. Inf. (FH) - karsten@heeg.de<br>> > Georg Heeg eK - Köthen<br>> > Handelsregister: Amtsgericht Dortmund A 12812<br>> ><br>> > Am Dienstag, 15. Oktober 2013 um 16:04 schrieb Wojciech Kaczmarek:<br>> ><br>> > Hello,<br>> ><br>> > I'd like to welcome everyone on this list. I was playing with Seaside<br>> > many years ago and I'm very glad to see it not only survived but being<br>> > still active and evolving :)<br>> ><br>> > Now I'm trying to get my head around the idea of interactive web<br>> > components I always wanted to have in a library. Looks like with some<br>> > creativity and discipline Seaside may be the platform it's possible to<br>> > have such thing on.<br>> ><br>> > I am experimenting now with giving the components visual behavior via<br>> > jquery effects. Say I want to: fade out some dom element, then replace<br>> > it with another and fade in this new one. My tries now boil down to a<br>> > very specific question:<br>> ><br>> > How to properly chain jQuery effects?<br>> ><br>> > If I do something like:<br>> ><br>> > html fooElement<br>> > id: id;<br>> > onClick: (html jQuery ajax script: [ :s |<br>> > s << (s jQuery: id) fadeOut: 2 seconds.<br>> > s << (s jQuery: id) parent html: OtherFoo new.<br>> > ]<br>> ><br>> > then the fade-out action will be fired -- meaning: started, but then<br>> > the dom replacement will be also fired right-away, effectively<br>> > replacing the element being faded out.<br>> > I need a method for chaining actions - not only pre-existing effects<br>> > but also dom manipulation, and, ideally, any javascript, so that one<br>> > is starting upon completion of another.<br>> > I realize it'd require to have some Seaside API over what goes into js<br>> > complete() callback handlers - is there anything like this, possibly<br>> > undocumented?<br>> ><br>> ><br>> > cheers,<br>> ><br>> > Wojtek<br>> _______________________________________________<br>> seaside mailing list<br>> seaside@lists.squeakfoundation.org<br>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside<br></div> </div>
<br>_______________________________________________
seaside mailing list
seaside@lists.squeakfoundation.org
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</div></div></div>
</div></body>
</html>