Re: script: [...] value parameter
Bob Nemec <[email protected]> Wed, 26 Oct 2022 11:26:11 +0000 (UTC)
| Newsgroups | gmane.comp.lang.smalltalk.squeak.seaside |
|---|---|
| Message-ID | <[email protected]> |
--===============6475795231125629658==
Content-Type: multipart/alternative;
boundary="----=_Part_176197_1895613295.1666783571590"
------=_Part_176197_1895613295.1666783571590
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: quoted-printable
For those that don't follow Discord, Johan provided a solution with an exa=
mple that works for me.
What I needed to position the script: block after the callback:value: block=
, and have the callback:value: set state that the script: block could use.=
=20
Seems obvious now...=C2=A0
The "script:value:" you are looking for is really the combination of a "cal=
lback:value:" with a "script:" on the same ajax request. You can pass the '=
closest div passenger' to the script block using temporary variables that g=
et assigned in the callback:value: or callback:passenger: block and then us=
e those in the script: block. If you want to see some example combinations =
with event delegation you are referring to, you can check out the Todo exam=
ple:=C2=A0https://github.com/SeasideSt/Seaside/blob/master/repository/Seasi=
de-Examples.package/WATodo.class/instance/renderTodosOn..st
On Monday, October 24, 2022 at 08:50:43 a.m. EDT, Bob Nemec <bobn@roger=
s.com> wrote: =20
=20
(Also posted on Discord) ... Thanks: we already use the secondary callbac=
ks & passenger patters. In this case, we have a large calendar component fo=
r which we're trying to avoid rendering too much cell specific code (html c=
ontent gets crazy big).=C2=A0=C2=A0Ideally, I'd have one script for the cal=
endar that uses JQueryInstance>>closest: to get the div id / passenger, pas=
s that to a script: [...] block, and then have the browser run the script b=
lock result.=C2=A0
That works (and we're using it) for static onMouseOver: js script content, =
but having new content on each mouseover provided by a script: [...] block =
is where I'm stuck... using the closest: pattern removes the need for cell =
div specific scripts (with a noticeable render speed=C2=A0 improvement), bu=
t I can't pass along the closest div to the script: [...] block to build ce=
ll specific content.=C2=A0=C2=A0
Feels like it a...=C2=A0script: [:script :value | ...] value: (js script)..=
.pattern should work with a closest: div parameter. Great opportunity for m=
e to learn more Seaside internal :-)=C2=A0=C2=A0
Bob On Monday, October 24, 2022 at 03:08:24 a.m. EDT, Johan Brichau <joh=
[email protected]> wrote: =20
=20
I copy/paste my response on the Discord channel:
=20
- An ajax request with Seaside JQuery can combine multiple secondary cal=
lbacks and a single primary callback. You can find out which are which in t=
he method comments on JQAjax. In short: a primary callback is a response-ge=
nerating callback, while secondary callbacks are callbacks that pass values=
from the client to the server. As such, you can construct what you want al=
ready as follows: | value |
html jQuery ajax=20
callback: [ :v | value :=3D v ] value: (html jQuery this propertyAt: 'id=
');
script: [ :s | ...use value in the generation of the script... ]
- [9:40 AM]Also, take a look at passengers if you want to store objects =
and retrieve them by id. Seaside has this mechanism built-in for you: | v=
alue |
html button
passenger: self;
onClick: (html jQuery ajax=20
callback: [ :v | value :=3D v ] passenger: (html jQuery this);
On 21 Oct 2022, at 19:48, Bob Nemec <[email protected]> wrote:
Cross posted from Seaside Discord channel...
I would like to have an 'html ajax script: [...]' method that has a callbac=
k:value: pattern.=C2=A0
Something like...=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0html ajax script: [:script :=
value | ...] value: (html jQuery this propertyAt: 'id')=C2=A0
Then in the script block 'value' would get the id of 'this', which in an aj=
ax callback is undefined.=C2=A0This would allow server code to use browser =
information to build the script.=C2=A0
Anyone done this?
Bob Nemec
_______________________________________________
seaside mailing list
[email protected]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
_______________________________________________
seaside mailing list
[email protected]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
_______________________________________________
seaside mailing list
[email protected]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
=20
------=_Part_176197_1895613295.1666783571590
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: quoted-printable
<html><head></head><body><div class=3D"ydpe16e7e8fyahoo-style-wrap" style=
=3D"font-family:lucida console, sans-serif;font-size:13px;"><div></div>
<div dir=3D"ltr" data-setdir=3D"false">For those that don't follow =
Discord, Johan provided a solution with an example that works for me.<br>Wh=
at I needed to position the script: block after the callback:value: block, =
and have the callback:value: set state that the script: block could use. <b=
r>Seems obvious now... </div><div dir=3D"ltr" data-setdir=3D"false"><b=
r><span>The "script:value:" you are looking for is really the combination o=
f a "callback:value:" with a "script:" on the same ajax request. You can pa=
ss the 'closest div passenger' to the script block using temporary variable=
s that get assigned in the callback:value: or callback:passenger: block and=
then use those in the script: block. If you want to see some example combi=
nations with event delegation you are referring to, you can check out the T=
odo example: </span><a href=3D"https://github.com/SeasideSt/Seaside/bl=
ob/master/repository/Seaside-Examples.package/WATodo.class/instance/renderT=
odosOn..st" rel=3D"nofollow" target=3D"_blank">https://github.com/SeasideSt=
/Seaside/blob/master/repository/Seaside-Examples.package/WATodo.class/insta=
nce/renderTodosOn..st</a><br></div>
=20
</div><div id=3D"yahoo_quoted_7027919161" class=3D"yahoo_quoted">
<div style=3D"font-family:'Helvetica Neue', Helvetica, Arial, s=
ans-serif;font-size:13px;color:#26282a;">
=20
<div>
On Monday, October 24, 2022 at 08:50:43 a.m. EDT, Bob N=
emec <[email protected]> wrote:
</div>
<div><br></div>
<div><br></div>
<div><div id=3D"yiv6882413904"><div><div style=3D"font-fami=
ly:lucida console, sans-serif;font-size:13px;" class=3D"yiv6882413904ydp463=
fbbe9yahoo-style-wrap"><div></div>
<div dir=3D"ltr"><div><div dir=3D"ltr">(Also posted on Discord) ...=
Thanks: we already use the secondary callbacks & passenger patters. In=
this case, we have a large calendar component for which we're trying to av=
oid rendering too much cell specific code (html content gets crazy big).</d=
iv><div> </div><div>Ideally, I'd have one script for the calenda=
r that uses JQueryInstance>>closest: to get the div id / passenger, p=
ass that to a script: [...] block, and then have the browser run the script=
block result. </div><div><br clear=3D"none"></div><div>That works (an=
d we're using it) for static onMouseOver: js script content, but having new=
content on each mouseover provided by a script: [...] block is where I'm s=
tuck... using the closest: pattern removes the need for cell div specific s=
cripts (with a noticeable render speed improvement), but I can't pass=
along the closest div to the script: [...] block to build cell specific co=
ntent. </div><div><br clear=3D"none"></div><div>Feels like it a.=
.. </div><div>script: [:script :value | ...] value: (js script)</div><=
div>...pattern should work with a closest: div parameter. Great opportunity=
for me to learn more Seaside internal :-) </div></div><br clear=
=3D"none"></div><div dir=3D"ltr">Bob</div>
=20
</div><div id=3D"yiv6882413904yahoo_quoted_7101938615" class=3D"yiv=
6882413904yahoo_quoted">
<div style=3D"font-family:'Helvetica Neue', Helvetica, Arial, s=
ans-serif;font-size:13px;color:#26282a;">
=20
<div id=3D"yiv6882413904yqt78631" class=3D"yiv6882413904yqt=
9599951790"><div>
On Monday, October 24, 2022 at 03:08:24 a.m. EDT, Johan=
Brichau <[email protected]> wrote:
</div>
<div><br clear=3D"none"></div>
<div><br clear=3D"none"></div>
<div><div id=3D"yiv6882413904"><div>I copy/paste my respons=
e on the Discord channel:<div class=3D"yiv6882413904"><br clear=3D"none" cl=
ass=3D"yiv6882413904"></div><div class=3D"yiv6882413904"><ol style=3D"margi=
n:0px;padding:0px;border:0px;font-family:Whitney, Helvetica, Arial, sans-se=
rif;font-size:16px;vertical-align:baseline;list-style:none;min-height:0px;o=
rphans:2;widows:2;background-color:rgb(255, 255, 255);" class=3D"yiv6882413=
904scrollerInner-2PPAp2"><li id=3D"yiv6882413904chat-messages-1033645149160=
480829" style=3D"margin:0px;padding:0px;border:0px;font-style:inherit;font-=
family:inherit;vertical-align:baseline;outline:none;" class=3D"yiv688241390=
4messageListItem-ZZ7v6g"><div style=3D"margin:0px 0px;padding-left:72px;bor=
der:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;outl=
ine:0px;position:relative;padding-right:48px !important;" class=3D"yiv68824=
13904groupStart-3Mlgv1 yiv6882413904hasReply-2Cr4KE yiv6882413904wrapper-30=
-Nkg yiv6882413904message-2CShn3 yiv6882413904zalgo-26OfGz yiv6882413904coz=
yMessage-1DWF9U yiv6882413904cozy-VmLDNB"><div style=3D"margin:0px;padding:=
0px;border:0px;font-style:inherit;font-family:inherit;vertical-align:baseli=
ne;outline:0px;" class=3D"yiv6882413904contents-2MsGLg"><div id=3D"yiv68824=
13904message-content-1033645149160480829" style=3D"margin:0px 0px 0px;paddi=
ng:0px 0px 0px 72px;border:0px;font-style:inherit;font-family:inherit;verti=
cal-align:baseline;outline:0px;position:relative;overflow:hidden;" class=3D=
"yiv6882413904markup-eYLPri yiv6882413904messageContent-2t3eCI">An ajax req=
uest with Seaside JQuery can combine multiple secondary callbacks and a sin=
gle primary callback. You can find out which are which in the method commen=
ts on JQAjax. In short: a primary callback is a response-generating callbac=
k, while secondary callbacks are callbacks that pass values from the client=
to the server.=20
As such, you can construct what you want already as follows:
<pre style=3D"margin-top:6px;margin-bottom:0px;padding:0px;border:0px;font-=
style:inherit;font-family:Consolas, Mono Sans Sans Vera Sans Mono Monaco, C=
ourier, monospace;vertical-align:baseline;border-radius:4px;white-space:pre=
-wrap;max-width:90%;" class=3D"yiv6882413904"><code style=3D"margin:0px;pad=
ding:0.5em;border:1px solid;font-style:inherit;font-family:Consolas, Mono S=
ans Sans Vera Sans Mono Monaco, Courier, monospace;vertical-align:baseline;=
display:block;border-radius:4px;" class=3D"yiv6882413904hljs yiv6882413904s=
crollbarGhostHairline-2LpzZ9 yiv6882413904scrollbar-3vVt8d">| value |
html jQuery ajax=20
callback: [ :v | value :=3D v ] value: (html jQuery this propertyAt: 'id=
');
script: [ :s | ...use value in the generation of the script... ]</code><=
/pre></div></div><div style=3D"margin:0px;padding:0px;border:0px;font-style=
:inherit;font-family:inherit;vertical-align:baseline;outline:0px;" class=3D=
"yiv6882413904buttonContainer-1502pf"><div style=3D"margin:0px;padding:0px =
14px 0px 32px;border:0px;font-style:inherit;font-family:inherit;vertical-al=
ign:baseline;outline:0px;z-index:1;" class=3D"yiv6882413904buttons-3dF5Kd y=
iv6882413904container-2gUZhU yiv6882413904isHeader-2bbX-L"><div style=3D"ma=
rgin:0px;padding:0px;border:0px;font-style:inherit;font-family:inherit;vert=
ical-align:baseline;outline:0px;display:grid;min-height:32px;border-radius:=
4px;transition:0.1s ease-out 0s, 0.1s ease-out 0s;position:relative;overflo=
w:hidden;" class=3D"yiv6882413904wrapper-2vIMkT"><div style=3D"margin:0px;p=
adding:4px;border:0px;font-style:inherit;font-family:inherit;vertical-align=
:baseline;outline:0px;display:flex;min-height:24px;min-width:24px;cursor:po=
inter;position:relative;" class=3D"yiv6882413904button-3bklZh"></div><div s=
tyle=3D"margin:0px;padding:4px;border:0px;font-style:inherit;font-family:in=
herit;vertical-align:baseline;outline:0px;display:flex;min-height:24px;min-=
width:24px;cursor:pointer;position:relative;" class=3D"yiv6882413904button-=
3bklZh"></div><div style=3D"margin:0px;padding:4px;border:0px;font-style:in=
herit;font-family:inherit;vertical-align:baseline;outline:0px;display:flex;=
min-height:24px;min-width:24px;cursor:pointer;position:relative;" class=3D"=
yiv6882413904button-3bklZh"></div><div style=3D"margin:0px;padding:4px;bord=
er:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;outli=
ne:0px;display:flex;min-height:24px;min-width:24px;cursor:pointer;position:=
relative;" class=3D"yiv6882413904button-3bklZh"></div></div></div></div></d=
iv></li><li id=3D"yiv6882413904chat-messages-1033646070099623978" style=3D"=
margin:0px;padding:0px;border:0px;font-style:inherit;font-family:inherit;ve=
rtical-align:baseline;outline:none;" class=3D"yiv6882413904messageListItem-=
ZZ7v6g"><div style=3D"margin:0px;padding-left:72px;border:0px;font-style:in=
herit;font-family:inherit;vertical-align:baseline;outline:0px;position:rela=
tive;padding-right:48px !important;" class=3D"yiv6882413904wrapper-30-Nkg y=
iv6882413904cozyMessage-1DWF9U yiv6882413904cozy-VmLDNB yiv6882413904zalgo-=
26OfGz yiv6882413904message-2CShn3"><div style=3D"margin:0px;padding:0px;bo=
rder:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;out=
line:0px;" class=3D"yiv6882413904contents-2MsGLg"><span style=3D"margin:0px=
0px 0px;padding:0px;border:0px;font-style:inherit;font-family:inherit;vert=
ical-align:baseline;outline:0px;display:inline-block;cursor:default;width:5=
6px;text-align:right;z-index:1;" class=3D"yiv6882413904timestamp-p1Df1m yiv=
6882413904latin24CompactTimeStamp-2pXUBq yiv6882413904timestampVisibleOnHov=
er-9PEuZS yiv6882413904alt-1dvXnH"><span style=3D"width:0px;display:inline-=
block;" class=3D"yiv6882413904separator-AebOhG">[</span>9:40 AM<span style=
=3D"width:0px;display:inline-block;" class=3D"yiv6882413904separator-AebOhG=
">]</span></span><div id=3D"yiv6882413904message-content-103364607009962397=
8" style=3D"margin:0px 0px 0px;padding:0px 0px 0px 72px;border:0px;font-sty=
le:inherit;font-family:inherit;vertical-align:baseline;outline:0px;position=
:relative;overflow:hidden;" class=3D"yiv6882413904markup-eYLPri yiv68824139=
04messageContent-2t3eCI">Also, take a look at passengers if you want to sto=
re objects and retrieve them by id. Seaside has this mechanism built-in for=
you:
<pre style=3D"margin-top:6px;margin-bottom:0px;padding:0px;border:0px;font-=
style:inherit;font-family:Consolas, Mono Sans Sans Vera Sans Mono Monaco, C=
ourier, monospace;vertical-align:baseline;border-radius:4px;white-space:pre=
-wrap;max-width:90%;" class=3D"yiv6882413904"><code style=3D"margin:0px;pad=
ding:0.5em;border:1px solid;font-style:inherit;font-family:Consolas, Mono S=
ans Sans Vera Sans Mono Monaco, Courier, monospace;vertical-align:baseline;=
display:block;border-radius:4px;" class=3D"yiv6882413904hljs yiv6882413904s=
crollbarGhostHairline-2LpzZ9 yiv6882413904scrollbar-3vVt8d">| value |
html button
passenger: self;
onClick: (html jQuery ajax=20
callback: [ :v | value :=3D v ] passenger: (html jQuery this);</code=
></pre></div></div></div></li></ol><div class=3D"yiv6882413904"><br clear=
=3D"none" class=3D"yiv6882413904"></div><div><br clear=3D"none" class=3D"yi=
v6882413904"><blockquote type=3D"cite" class=3D"yiv6882413904"><div id=3D"y=
iv6882413904yqt33596" class=3D"yiv6882413904yqt7058150919"><div class=3D"yi=
v6882413904">On 21 Oct 2022, at 19:48, Bob Nemec <<a rel=3D"nofollow noo=
pener noreferrer" shape=3D"rect" ymailto=3D"mailto:[email protected]" target=
=3D"_blank" href=3D"mailto:[email protected]" class=3D"yiv6882413904">bobn@ro=
gers.com</a>> wrote:</div><br clear=3D"none" class=3D"yiv6882413904Apple=
-interchange-newline"><div class=3D"yiv6882413904"><div class=3D"yiv6882413=
904"><div style=3D"font-family:lucida console, sans-serif;font-size:13px;" =
class=3D"yiv6882413904yahoo-style-wrap"><div dir=3D"ltr" class=3D"yiv688241=
3904">Cross posted from Seaside Discord channel...</div><div dir=3D"ltr" cl=
ass=3D"yiv6882413904"><br clear=3D"none" class=3D"yiv6882413904"></div><div=
dir=3D"ltr" class=3D"yiv6882413904"><div class=3D"yiv6882413904"><div clas=
s=3D"yiv6882413904">I would like to have an 'html ajax script: [...]' metho=
d that has a callback:value: pattern. </div><div class=3D"yiv688241390=
4"><br clear=3D"none" class=3D"yiv6882413904"></div><div class=3D"yiv688241=
3904">Something like... </div><div class=3D"yiv6882413904">  =
; html ajax script: [:script :value | ...] value: (html jQuery t=
his propertyAt: 'id') </div><div class=3D"yiv6882413904"><br clear=3D"=
none" class=3D"yiv6882413904"></div><div class=3D"yiv6882413904">Then in th=
e script block 'value' would get the id of 'this', which in an ajax callbac=
k is undefined. </div><div dir=3D"ltr" class=3D"yiv6882413904">This wo=
uld allow server code to use browser information to build the script. =
</div><div class=3D"yiv6882413904"><br clear=3D"none" class=3D"yiv688241390=
4"></div><div class=3D"yiv6882413904">Anyone done this?</div></div><br clea=
r=3D"none" class=3D"yiv6882413904"></div><div dir=3D"ltr" class=3D"yiv68824=
13904"><br clear=3D"none" class=3D"yiv6882413904"></div><div dir=3D"ltr" cl=
ass=3D"yiv6882413904">Bob Nemec</div><div dir=3D"ltr" class=3D"yiv688241390=
4"><br clear=3D"none" class=3D"yiv6882413904"></div></div></div>___________=
____________________________________<br clear=3D"none" class=3D"yiv68824139=
04">seaside mailing list<br clear=3D"none" class=3D"yiv6882413904"><a rel=
=3D"nofollow noopener noreferrer" shape=3D"rect" ymailto=3D"mailto:seaside@=
lists.squeakfoundation.org" target=3D"_blank" href=3D"mailto:seaside@lists.=
squeakfoundation.org" class=3D"yiv6882413904">[email protected]=
n.org</a><br clear=3D"none" class=3D"yiv6882413904">http://lists.squeakfoun=
dation.org/cgi-bin/mailman/listinfo/seaside<br clear=3D"none" class=3D"yiv6=
882413904"></div></div></blockquote></div><br clear=3D"none" class=3D"yiv68=
82413904"></div></div></div><div id=3D"yiv6882413904yqt37085" class=3D"yiv6=
882413904yqt7058150919">_______________________________________________<br =
clear=3D"none">seaside mailing list<br clear=3D"none"><a rel=3D"nofollow no=
opener noreferrer" shape=3D"rect" ymailto=3D"mailto:[email protected]=
ndation.org" target=3D"_blank" href=3D"mailto:[email protected]=
n.org">[email protected]</a><br clear=3D"none"><a rel=3D"n=
ofollow noopener noreferrer" shape=3D"rect" target=3D"_blank" href=3D"http:=
//lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside">http://lists=
.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a><br clear=3D"none=
"></div></div></div>
</div>
</div></div></div><div class=3D"yqt9599951790" id=3D"yqt14635">____=
___________________________________________<br clear=3D"none">seaside maili=
ng list<br clear=3D"none"><a shape=3D"rect" ymailto=3D"mailto:seaside@lists=
.squeakfoundation.org" href=3D"mailto:[email protected]">s=
[email protected]</a><br clear=3D"none"><a shape=3D"rect" h=
ref=3D"http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" =
target=3D"_blank">http://lists.squeakfoundation.org/cgi-bin/mailman/listinf=
o/seaside</a><br clear=3D"none"></div></div>
</div>
</div></body></html>
------=_Part_176197_1895613295.1666783571590--
--===============6475795231125629658==
Content-Type: text/plain; charset="utf-8"
MIME-Version: 1.0
Content-Transfer-Encoding: base64
Content-Disposition: inline
X19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX18Kc2Vhc2lkZSBt
YWlsaW5nIGxpc3QKc2Vhc2lkZUBsaXN0cy5zcXVlYWtmb3VuZGF0aW9uLm9yZwpodHRwOi8vbGlz
dHMuc3F1ZWFrZm91bmRhdGlvbi5vcmcvY2dpLWJpbi9tYWlsbWFuL2xpc3RpbmZvL3NlYXNpZGUK
--===============6475795231125629658==--