Re: Making an anchor behave like a button
Jupiter Jones <[email protected]> Sun, 9 Mar 2025 10:12:23 +1100
| Newsgroups | gmane.comp.lang.smalltalk.squeak.seaside |
|---|---|
| Message-ID | <[email protected]> |
--===============2007794238878862554==
Content-Type: multipart/alternative;
boundary="Apple-Mail=_468EF162-FB83-4F12-B0DA-3D95B2008345"
--Apple-Mail=_468EF162-FB83-4F12-B0DA-3D95B2008345
Content-Transfer-Encoding: quoted-printable
Content-Type: text/plain;
charset=utf-8
Absolutely, users like to click on things to do stuff :) Totally up to =
you how that=E2=80=99s implemented under the cover - be it a form button =
as part of the form mechanic, or an anchor or anything else you want to =
click on outside the form mechanic.
Just like with vanilla HTML, if you want to remote control forms with =
javascript, you just have a little more work to do.
To submit a form in javascript you'll need an onClick handler on some =
element that executes the following: =
document.getElementById(=E2=80=9CmyForm").submit();
There are many ways to render that within seaside, including=E2=80=A6
canvas anchor
onClick: (canvas jQuery: #myForm) triggerSubmit;
with: =E2=80=98=E2=80=99Submit=E2=80=99
But remember that anchors are not part of the HTML form mechanic so if =
you add a seaside callback to this anchor, it will simply make a round =
trip to the server completely independently of any form processing that =
will happen once the form is submitted.
When forms are submitted, I believe input callbacks are executed first =
so they have a chance to set their values before other processing. If =
you have a submit button with a callback, I think that callback is =
called after the input callbacks. This gives you a predictable =
processing order.
So with this:
anchor
id: self id;
class: self cssClass;
callback: [
(html jQuery this closest: self director identifier) =
triggerSubmit.
self triggerEvent: #linkClicked with: self
];
onClick: 'submit()';
with: self text
I=E2=80=99m guessing it probably generate an error in javascript since =
anchor doesn=E2=80=99t respond to submit(). Also since anchors are not =
part of the form mechanic, clicking it makes a round trip to the server =
to execute it=E2=80=99s callback, which generates some javascript on the =
server but I don=E2=80=99t think this code will return it to the browser =
in usable way.
> On 8 Mar 2025, at 11:43=E2=80=AFpm, Carl G <[email protected]> =
wrote:
>=20
> People expect to be able to treat anchors like buttons and not just as =
links to another page. There should not be any functional difference in =
a modern web app. That is all I am trying to do.
>=20
> In older versions of Seaside I could just send submitFormNamed: with =
the form name to an anchor, and this would do the trick. Nothing so =
simple seems to exist in newer versions, and I cannot seem to make the =
form submit before the callbacks happen on the widgets, so then values =
are lost on those widgets.
>=20
> Or maybe my application is not configured with the correct libraries, =
or something else?
>=20
> Thanks,
>=20
> -Carl
>=20
>=20
> On Fri, Mar 7, 2025 at 11:13=E2=80=AFPM Jupiter Jones =
<[email protected] <mailto:[email protected]>> wrote:
>> Hi Carl,
>>=20
>> I=E2=80=99m not sure exactly what you=E2=80=99re wanting to achieve =
so to confirm: you want an anchor somewhere outside the form to trigger =
the submit action of a form. Is that right?
>>=20
>> Do you get an error when trying to send submit() to an Anchor? I =
assume that only a form can be submitted.
>>=20
>> If you want the anchor to submit a form somewhere else on the page =
you=E2=80=99ll need javascript like:
>>=20
>> document.getElementById("myForm").submit();
>>=20
>> You can just add a submit button to the form with:
>>=20
>> renderContentOn: canvas
>> canvas submitButton
>> callback: [ self doTheAction ];=20
>> with: self text
>>=20
>> But I assume you=E2=80=99ve done this a million times and I just =
don=E2=80=99t understand what you=E2=80=99re wanting to achieve. :)
>>=20
>>> On 8 Mar 2025, at 2:29=E2=80=AFpm, Carl G <[email protected] =
<mailto:[email protected]>> wrote:
>>>=20
>>> My attempts at submitting a form when an anchor is clicked so that =
it behaves like a button have been pretty hit or miss.=20
>>> I was able to do this in a much older version of Seaside without =
difficulty. I'm not sure if I'm not using the correct javascript =
libraries in my application's configuration. Clearly there must be a =
way to make it work, even if I need to write a little javascript to =
emulate the old behavior.
>>>=20
>>> This is the code I am using.
>>>=20
>>> anchor
>>> id: self id;
>>> class: self cssClass;
>>> callback: [
>>> (html jQuery this closest: self director identifier) =
triggerSubmit.
>>> self triggerEvent: #linkClicked with: self
>>> ];
>>> onClick: 'submit()';
>>> with: self text
>>>=20
>>> The javascript library I am using is JQuery.JQDepoloymentLibrary. I =
also was including WAToolFile, but that doesn't seem to make any =
difference.
>>>=20
>>> Any thoughts appreciated.
>>>=20
>>> Thanks,
>>>=20
>>> -Carl Gundel
>>> http://runbasic.com =
<http://runbasic.com/>_______________________________________________
>>> seaside mailing list -- [email protected] =
<mailto:[email protected]>
>>> To unsubscribe send an email to =
[email protected] =
<mailto:[email protected]>
>>=20
--Apple-Mail=_468EF162-FB83-4F12-B0DA-3D95B2008345
Content-Transfer-Encoding: quoted-printable
Content-Type: text/html;
charset=utf-8
<html><head><meta http-equiv=3D"content-type" content=3D"text/html; =
charset=3Dutf-8"></head><body style=3D"overflow-wrap: break-word; =
-webkit-nbsp-mode: space; line-break: after-white-space;">Absolutely, =
users like to click on things to do stuff :) Totally up to you how =
that=E2=80=99s implemented under the cover - be it a form button as part =
of the form mechanic, or an anchor or anything else you want to =
click on outside the form mechanic.<div><br></div><div>Just like with =
vanilla HTML, if you want to remote control forms with javascript, you =
just have a little more work to do.<div><br></div><div>To submit a form =
in javascript you'll need an onClick handler on some element that =
executes the following: =
document.getElementById(=E2=80=9CmyForm").submit();</div><div><br></div><d=
iv>There are many ways to render that within seaside, =
including=E2=80=A6<br><div><br></div><div><div>canvas =
anchor</div><div><span class=3D"Apple-tab-span" style=3D"white-space: =
pre;"> </span>onClick: (canvas jQuery: #<span style=3D"caret-color: =
rgb(0, 0, 0); color: rgb(0, 0, 0);">myForm</span>) =
triggerSubmit;</div><div><span class=3D"Apple-tab-span" =
style=3D"caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0); white-space: =
pre;"> </span><span style=3D"caret-color: rgb(0, 0, 0); color: rgb(0, =
0, 0);">with: =E2=80=98=E2=80=99Submit</span><font color=3D"#000000"><span=
style=3D"caret-color: rgb(0, 0, 0);">=E2=80=99</span></font></div><div><s=
pan style=3D"caret-color: rgb(0, 0, 0); color: rgb(0, 0, =
0);"><br></span></div><div><font color=3D"#000000"><span =
style=3D"caret-color: rgb(0, 0, 0);">But remember that anchors are not =
part of the HTML form mechanic so if you add a seaside callback to this =
anchor, it will simply make a round trip to the server completely =
independently of any form processing that will happen once the form is =
submitted.</span></font></div><div><br></div><div>When forms are =
submitted, I believe input callbacks are executed first so they have a =
chance to set their values before other processing. If you have a submit =
button with a callback, I think that callback is called after the input =
callbacks. This gives you a predictable processing =
order.</div><div><br></div><div>So with =
this:</div><div><br></div><div><div>anchor</div><div> id: =
self id;</div><div> class: self cssClass;</div><div> =
callback: [</div><div> (html jQuery =
this closest: self director identifier) triggerSubmit.</div><div> =
self triggerEvent: #linkClicked with: =
self</div><div> ];</div><div> onClick: =
'submit()';</div><div> with: self =
text</div></div><div><br></div><div style=3D"caret-color: rgb(0, 0, 0); =
color: rgb(0, 0, 0);">I=E2=80=99m guessing it probably generate an error =
in javascript since anchor doesn=E2=80=99t respond to submit(). Also =
since anchors are not part of the form mechanic, clicking it makes a =
round trip to the server to execute it=E2=80=99s callback, which =
generates some javascript on the server but I don=E2=80=99t think this =
code will return it to the browser in usable way.</div><div =
style=3D"caret-color: rgb(0, 0, 0); color: rgb(0, 0, =
0);"><br></div><div><div><blockquote type=3D"cite"><div>On 8 Mar 2025, =
at 11:43=E2=80=AFpm, Carl G <[email protected]> wrote:</div><br =
class=3D"Apple-interchange-newline"><div><div dir=3D"ltr"><div>People =
expect to be able to treat anchors like buttons and not just as links to =
another page. There should not be any functional difference in a =
modern web app. That is all I am trying to =
do.</div><div><br></div><div>In older versions of Seaside I could just =
send submitFormNamed: with the form name to an anchor, and this would do =
the trick. Nothing so simple seems to exist in newer versions, and =
I cannot seem to make the form submit before the callbacks happen on the =
widgets, so then values are lost on those =
widgets.</div><div><br></div><div>Or maybe my application is not =
configured with the correct libraries, or something =
else?</div><div><br></div><div>Thanks,</div><div><br></div><div>-Carl</div=
><div><br></div></div><br><div class=3D"gmail_quote =
gmail_quote_container"><div dir=3D"ltr" class=3D"gmail_attr">On Fri, Mar =
7, 2025 at 11:13=E2=80=AFPM Jupiter Jones <<a =
href=3D"mailto:[email protected]">[email protected]</a>> =
wrote:<br></div><blockquote class=3D"gmail_quote" style=3D"margin:0px =
0px 0px 0.8ex;border-left:1px solid =
rgb(204,204,204);padding-left:1ex"><div>Hi =
Carl,<div><br></div><div><span style=3D"">I=E2=80=99m not sure exactly =
what you=E2=80=99re wanting to achieve</span> so to confirm: you =
want an anchor somewhere outside the form to trigger the submit action =
of a form. Is that right?</div><div><br></div><div>Do you get an error =
when trying to send submit() to an Anchor? I assume that only a form can =
be submitted.</div><div><br></div><div>If you want the anchor to submit =
a form somewhere else on the page you=E2=80=99ll need javascript =
like:</div><div><span style=3D""><br></span></div><div><span =
style=3D"">document.getElementById(</span><span =
style=3D"">"myForm"</span><span =
style=3D"">).submit();</span></div><div><br></div><div>You can just add =
a submit button to the form =
with:</div><div><br></div><div>renderContentOn: canvas</div><div>canvas =
submitButton</div><div><span style=3D"white-space:pre-wrap"> =
</span>callback: [ self doTheAction ]; </div><div><span =
style=3D"white-space:pre-wrap"> </span>with: self =
text</div><div><br></div><div>But I assume you=E2=80=99ve done this a =
million times and I just don=E2=80=99t understand what you=E2=80=99re =
wanting to achieve. :)</div><div><div><br><blockquote =
type=3D"cite"><div>On 8 Mar 2025, at 2:29=E2=80=AFpm, Carl G <<a =
href=3D"mailto:[email protected]" =
target=3D"_blank">[email protected]</a>> wrote:</div><br><div><div =
dir=3D"ltr"><ol aria-label=3D"Messages in seaside" role=3D"list" =
style=3D"margin:0px;padding:0px;border:0px;font-family:"gg =
sans","Noto Sans","Helvetica =
Neue",Helvetica,Arial,sans-serif;font-size:16px;vertical-align:baseli=
ne;list-style:none;min-height:0px;overflow:hidden"><li =
id=3D"m_2620444243200943940gmail-chat-messages-311419918631305218-13477707=
25532041226" =
style=3D"margin:0px;padding:0px;border:0px;font-weight:inherit;font-style:=
inherit;font-family:inherit;vertical-align:baseline;outline:none"><div =
role=3D"article" aria-labelledby=3D"message-username-1347770725532041226 =
uid_1 message-content-1347770725532041226 uid_2 =
message-timestamp-1347770725532041226" =
style=3D"margin-right:0px;margin-bottom:0px;margin-left:0px;border:0px;fon=
t-weight:inherit;font-style:inherit;font-family:inherit;vertical-align:bas=
eline;outline:0px;min-height:2.75rem"><div =
style=3D"margin:0px;padding:0px;border:0px;font-weight:inherit;font-style:=
inherit;font-family:inherit;vertical-align:baseline;outline:0px"><div =
id=3D"m_2620444243200943940gmail-message-content-1347770725532041226" =
style=3D"margin-top:0px;margin-right:0px;margin-bottom:0px;padding-top:0px=
;padding-right:0px;padding-bottom:0px;border:0px;font-weight:inherit;font-=
style:inherit;font-family:inherit;font-size:1rem;vertical-align:baseline;o=
utline:0px;overflow:hidden">My attempts at submitting a form when =
an anchor is clicked so that it behaves like a button have been pretty =
hit or miss. <br>I was able to do this in a much older version of =
Seaside without difficulty. I'm not sure if I'm not using the =
correct javascript libraries in my application's configuration. =
Clearly there must be a way to make it work, even if I need to write a =
little javascript to emulate the old =
behavior.<br><br></div></div></div></li><li =
id=3D"m_2620444243200943940gmail-chat-messages-311419918631305218-13477707=
25532041226" =
style=3D"margin:0px;padding:0px;border:0px;font-weight:inherit;font-style:=
inherit;font-family:inherit;vertical-align:baseline;outline:none"><div =
id=3D"m_2620444243200943940gmail-message-content-1347770725532041226" =
style=3D"margin-top:0px;margin-right:0px;margin-bottom:0px;padding-top:0px=
;padding-right:0px;padding-bottom:0px;border:0px;font-weight:inherit;font-=
style:inherit;font-family:inherit;font-size:1rem;vertical-align:baseline;o=
utline:0px;overflow:hidden">This is the code I am =
using.<br><br></div></li><li =
id=3D"m_2620444243200943940gmail-chat-messages-311419918631305218-13477707=
25532041226" =
style=3D"margin:0px;padding:0px;border:0px;font-weight:inherit;font-style:=
inherit;font-family:inherit;vertical-align:baseline;outline:none"><div =
id=3D"m_2620444243200943940gmail-message-content-1347770725532041226" =
style=3D"margin-top:0px;margin-right:0px;margin-bottom:0px;padding-top:0px=
;padding-right:0px;padding-bottom:0px;border:0px;font-weight:inherit;font-=
style:inherit;font-family:inherit;font-size:1rem;vertical-align:baseline;o=
utline:0px;overflow:hidden">anchor<br> id: self =
id;<br> class: self cssClass;<br> callback: =
[<br> (html jQuery this closest: self =
director identifier) triggerSubmit.<br> self =
triggerEvent: #linkClicked with: self<br> ];<br> =
onClick: 'submit()';<br> with: self =
text<br><br></div></li><li =
id=3D"m_2620444243200943940gmail-chat-messages-311419918631305218-13477707=
25532041226" =
style=3D"margin:0px;padding:0px;border:0px;font-weight:inherit;font-style:=
inherit;font-family:inherit;vertical-align:baseline;outline:none"><div =
id=3D"m_2620444243200943940gmail-message-content-1347770725532041226" =
style=3D"margin-top:0px;margin-right:0px;margin-bottom:0px;padding-top:0px=
;padding-right:0px;padding-bottom:0px;border:0px;font-weight:inherit;font-=
style:inherit;font-family:inherit;font-size:1rem;vertical-align:baseline;o=
utline:0px;overflow:hidden">The javascript library I am using is =
JQuery.JQDepoloymentLibrary. I also was including WAToolFile, but =
that doesn't seem to make any difference.<br><br></div></li><li =
id=3D"m_2620444243200943940gmail-chat-messages-311419918631305218-13477707=
25532041226" =
style=3D"margin:0px;padding:0px;border:0px;font-weight:inherit;font-style:=
inherit;font-family:inherit;vertical-align:baseline;outline:none"><div =
id=3D"m_2620444243200943940gmail-message-content-1347770725532041226" =
style=3D"margin-top:0px;margin-right:0px;margin-bottom:0px;padding-top:0px=
;padding-right:0px;padding-bottom:0px;border:0px;font-weight:inherit;font-=
style:inherit;font-family:inherit;font-size:1rem;vertical-align:baseline;o=
utline:0px;overflow:hidden">Any thoughts =
appreciated.</div></li></ol><div><font face=3D"gg sans, Noto Sans, =
Helvetica Neue, Helvetica, Arial, sans-serif"><span =
style=3D"font-size:16px"><br></span></font></div><div><font face=3D"gg =
sans, Noto Sans, Helvetica Neue, Helvetica, Arial, sans-serif"><span =
style=3D"font-size:16px">Thanks,</span></font></div><div><font face=3D"gg =
sans, Noto Sans, Helvetica Neue, Helvetica, Arial, sans-serif"><span =
style=3D"font-size:16px"><br></span></font></div><div><font face=3D"gg =
sans, Noto Sans, Helvetica Neue, Helvetica, Arial, sans-serif"><span =
style=3D"font-size:16px">-Carl Gundel</span></font></div><div><font =
face=3D"gg sans, Noto Sans, Helvetica Neue, Helvetica, Arial, =
sans-serif"><span style=3D"font-size:16px"><a =
href=3D"http://runbasic.com/" =
target=3D"_blank">http://runbasic.com</a></span></font></div></div>
_______________________________________________<br>seaside mailing list =
-- <a href=3D"mailto:[email protected]" =
target=3D"_blank">[email protected]</a><br>To =
unsubscribe send an email to <a =
href=3D"mailto:[email protected]" =
target=3D"_blank">[email protected]</a><br></div></=
blockquote></div><br></div></div></blockquote></div>
</div></blockquote></div><br></div></div></div></div></body></html>=
--Apple-Mail=_468EF162-FB83-4F12-B0DA-3D95B2008345--
--===============2007794238878862554==
Content-Type: text/plain; charset="us-ascii"
MIME-Version: 1.0
Content-Transfer-Encoding: 7bit
Content-Disposition: inline
_______________________________________________
seaside mailing list -- [email protected]
To unsubscribe send an email to [email protected]
--===============2007794238878862554==--