<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div class="moz-cite-prefix">Hi Bob, <br>
</div>
<div class="moz-cite-prefix"><br>
</div>
<div class="moz-cite-prefix">it takes quite some courage to answer
after Johan's excessive post ;-) <br>
</div>
<div class="moz-cite-prefix">I try anyways, because there is one
thing in the back og my mind that seems related, even if it may
not be the ultimate solution.</div>
<div class="moz-cite-prefix"><br>
</div>
<div class="moz-cite-prefix">sending onClick: to a button registers
an event handler with the button. So far, so good. If you replace
this button with another button, it is logical that the event
handler also goes away and is not registered with the new button
any more. <br>
</div>
<div class="moz-cite-prefix"><br>
</div>
<div class="moz-cite-prefix">We've had similar problems with
elements that are not rendered on the page at render time (part of
the response that initially rendered the page). So we had to
register an event handler with the doument using an extra
selector. in Javascript you'd have to do it like this:<br>
</div>
<div class="moz-cite-prefix"><br>
</div>
<div class="moz-cite-prefix">$(document).on("click","button#idOfTheButton",
function(event) {...} ); (see <a moz-do-not-send="true"
href="https://api.jquery.com/on/">https://api.jquery.com/on/</a>
for details)<br>
</div>
<div class="moz-cite-prefix"><br>
</div>
<p>In Seaside, this would look like this:</p>
<p><br>
</p>
<p> (html jQuery document)<br>
on: 'blur'<br>
selector: '#myButton'<br>
do: (<br>
(html jQuery ajax) ....<br>
</p>
<div class="moz-cite-prefix"><br>
</div>
<div class="moz-cite-prefix">The effect of this is that $(document)
is always there and will check each click event whether it was
triggered by an element which matches "button#idOfTheButton". This
means, replacing a button with another one that matches the
selector will still be triggered.</div>
<div class="moz-cite-prefix"><br>
</div>
<div class="moz-cite-prefix"><br>
</div>
<div class="moz-cite-prefix">As I said, I am not 100% sure this is
what you are looking for, but it might be worth looking at.</div>
<div class="moz-cite-prefix"><br>
</div>
<div class="moz-cite-prefix"><br>
</div>
<div class="moz-cite-prefix">HTH</div>
<div class="moz-cite-prefix"><br>
</div>
<div class="moz-cite-prefix">Joachim<br>
</div>
<div class="moz-cite-prefix"><br>
</div>
<div class="moz-cite-prefix"><br>
</div>
<div class="moz-cite-prefix"><br>
</div>
<div class="moz-cite-prefix"><br>
</div>
<div class="moz-cite-prefix"><br>
</div>
<div class="moz-cite-prefix"><br>
</div>
<div class="moz-cite-prefix">Am 16.09.21 um 10:30 schrieb Johan
Brichau:<br>
</div>
<blockquote type="cite"
cite="mid:ECF33D85-A731-44D6-A0AE-4FEA8FB1D4F2@inceptive.be">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Hi Bob,
<div class=""><br class="">
</div>
<div class="">The JQAjax#callback being nil is normal if there is
no “primary” callback. This is what you see: the Ajax callback
registered on the onblur event (using
JQAjax>>callback:value:, which is a secondary callback)
has no primary callback block. The Ajax callback registered on
the onClick event only has a primary callback block. This is
fine and works as intended.</div>
<div class=""><br class="">
</div>
<div class="">The problem you are seeing is on the client side and
all about browser events: the click on the button triggers the
browser’s onBlur event first, which triggers the Seaside
callback for the blur, which triggers another callback to
replace the html snippet including the button you pressed and
the input field that triggered the blur. The html load replaces
the button you are clicking…. Now, depending on the speed of
events and callbacks, the html (including your button) will be
replaced before or after the browser can send the onClick event
to the button, which would trigger the Seaside callback for the
button. </div>
<div class=""><br class="">
</div>
<div class="">In addition, there is the ordering of events in the
browser that makes this very complicated to think about: an
onClick is only fired after a mouseDown and a mouseUp and an
onBlur is sent because of the mouseDown on the button.</div>
<div class=""><br class="">
</div>
<div class="">If you include a 100ms delay in the response of the
Seaside callback, you are effectively making it possible for the
browser to trigger the onClick event on the original button as
well.</div>
<div class="">Without this delay, the browser will have sent the
mouseDown event to the button but the button will be replaced
before the browser is able to trigger a mouseUp and an onClick. </div>
<div class="">Because the new button is not the one you clicked,
it will not have it’s onclick handler fired.</div>
<div class=""><br class="">
</div>
<div class="">If you do not replace the button while rendering the
Ajax update, it works as well.</div>
<div class=""><br class="">
</div>
<div class="">
<div>Doing some console logging can be helpful to debug such
issues. See code below and try with or without the delay
commented out.</div>
<div><br class="">
</div>
<div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>html
textInput </div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>value:
self stringValue; </div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>onBlur:
((JSStream on: 'console.log(''onblur'')'),</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>(html
jQuery ajax callback: [:value | </div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>self
stringValue: value. (Delay forMilliseconds: 100) wait.</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>Transcript
cr; show: Time now displayString , ' value: ' , value
asString]</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>value:
(html jQuery this value); </div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>onSuccess:
((JSStream on: 'console.log(''contentload-onblur'')'),(self
renderContentLoadDivOn: html) ))).</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>html
break; break. </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>onClick:
( (JSStream on: 'console.log(''onclick'')'),</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>(html
jQuery ajax callback: [</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>self
stringValue: self stringValue , '+'.</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>Transcript
cr; show: Time now displayString , ' button: ' , self
stringValue asString];</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>onSuccess:
((JSStream on: 'console.log(''contentload-onclick'')'),(self
renderContentLoadDivOn: html) )));</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>with:
'Press’.</div>
<div><br class="">
</div>
<div><br class="">
</div>
<div>Hope this helps,</div>
<div>Johan</div>
<div><br class="">
</div>
<blockquote type="cite" class="">
<div class="">On 15 Sep 2021, at 23:40, Bob Nemec <<a
href="mailto:bobn@rogers.com" class=""
moz-do-not-send="true">bobn@rogers.com</a>> wrote:</div>
<br class="Apple-interchange-newline">
<div class="">
<div class="ydpb0c0ebbayahoo-style-wrap"
style="caret-color: rgb(0, 0, 0); font-style: normal;
font-variant-caps: normal; font-weight: normal;
letter-spacing: normal; text-align: start; text-indent:
0px; text-transform: none; white-space: normal;
word-spacing: 0px; -webkit-text-stroke-width: 0px;
text-decoration: none; font-family: "lucida
console", sans-serif; font-size: 13px;">
<div dir="ltr" data-setdir="false" class=""><br
class="Apple-interchange-newline">
Wow, this is proving to be challenge. The problem is
that in <span class="">JQAjax>>processCallback #<span
class="">callback is sometimes nil. When it is,
the button press callback is not processed and the
button has to be pressed again. But, if the onBlur
of the text input field has a 100ms delay, the
#callback value is not nil and the button callback
works all the time. Which is especially
frustrating because adding diagnostic traces slows
down the first callback enough for things to
work. </span></span></div>
<div dir="ltr" data-setdir="false" class=""><span
class=""><span class=""><br class="">
</span></span></div>
<div dir="ltr" data-setdir="false" class=""><span
class=""><span class="">This is pushing me to the
edge of my Seaside knowledge. I will try this same
example with the latest Seaside code on Pharo. If
it works, I'll work on getting us updated (we
develop in VW but deploy on GS). If not, I'll have
a nice packaged problem to raise on the Seaside
part of the Pharo Discord channel. </span></span></div>
<div dir="ltr" data-setdir="false" class=""><span
class=""><span class=""><br class="">
</span></span></div>
<div dir="ltr" data-setdir="false" class=""><span
class=""><span class="">Bob</span></span></div>
<div dir="ltr" data-setdir="false" class=""><span
class=""><span class=""><br class="">
</span></span></div>
</div>
<div id="yahoo_quoted_2112089454" class="yahoo_quoted"
style="caret-color: rgb(0, 0, 0); font-family:
Helvetica; font-size: 12px; font-style: normal;
font-variant-caps: normal; font-weight: normal;
letter-spacing: normal; text-align: start; text-indent:
0px; text-transform: none; white-space: normal;
word-spacing: 0px; -webkit-text-stroke-width: 0px;
text-decoration: none;">
<div style="font-family: "Helvetica Neue",
Helvetica, Arial, sans-serif; font-size: 13px; color:
rgb(38, 40, 42);" class="">
<div class="">On Tuesday, September 14, 2021, 08:58:31
a.m. EDT, Karsten Kusche <<a
href="mailto:karsten@heeg.de" class=""
moz-do-not-send="true">karsten@heeg.de</a>>
wrote:</div>
<div class=""><br class="">
</div>
<div class=""><br class="">
</div>
<div class="">
<div id="yiv0857676699" class="">
<div class="">
<div style="font-family: Helvetica, Arial;
font-size: 13px;" class="">Hi Bob,</div>
<div class="yiv0857676699yqt6264543426"
id="yiv0857676699yqtfd02179">
<div style="font-family: Helvetica, Arial;
font-size: 13px;" class=""><br class=""
clear="none">
</div>
</div>
<div class="">
<blockquote class="yiv0857676699clean_bq"
type="cite" style="font-family: Helvetica,
Arial; font-size: 13px; font-style: normal;
font-weight: normal; letter-spacing: normal;
text-indent: 0px; text-transform: none;
white-space: normal; word-spacing: 0px;
text-decoration: none;">
<div class="yiv0857676699yqt6264543426"
id="yiv0857676699yqtfd95783"><span
class=""></span>
<div class="">We use onBlur to get the
data from input fields and to refresh
the state of the view. The problem comes
up if a button is included in the
refresh: the ajax callback from that
button is not handled (which makes sense
due to the jQuery load), so the user has
to press the button again.</div>
</div>
</blockquote>
</div>
<p class="">I’d say it actually doesn’t make any
sense. Your callbacks are registered, they
should work regardless. You could use the
Web-Browser’s network tool/profiler to see
which event-handler is fired and what network
requests are made. Maybe one of the requests
doesn’t come through correctly and you can
investigate that further. </p>
<p class="">Some things you should also
consider: when you use render HTML-Snippets
that contain Javascript (like new
click-handlers), Seaside will automatically
add these inside a <script>-tag at the
end of this snippet and inject that into your
DOM at the place where you inject the HTML. In
your case you should have a <script>-tag
at the end of your #testDiv. </p>
<p class="">I’m not entirely sure about this,
but iirc replacing that script-tag will also
remove all event-handlers that were registered
as part of this tag. On the other hand
replacing the <script> also means
replacing the <button> so you should
still have a working button in any case… like
i said, it doesn’t really make much sense.</p>
<p class="">Karsten</p>
</div>
</div>
</div>
</div>
</div>
<span style="caret-color: rgb(0, 0, 0); font-family:
Helvetica; font-size: 12px; font-style: normal;
font-variant-caps: normal; font-weight: normal;
letter-spacing: normal; text-align: start; text-indent:
0px; text-transform: none; white-space: normal;
word-spacing: 0px; -webkit-text-stroke-width: 0px;
text-decoration: none; float: none; display: inline
!important;" class="">_______________________________________________</span><br
style="caret-color: rgb(0, 0, 0); font-family:
Helvetica; font-size: 12px; font-style: normal;
font-variant-caps: normal; font-weight: normal;
letter-spacing: normal; text-align: start; text-indent:
0px; text-transform: none; white-space: normal;
word-spacing: 0px; -webkit-text-stroke-width: 0px;
text-decoration: none;" class="">
<span style="caret-color: rgb(0, 0, 0); font-family:
Helvetica; font-size: 12px; font-style: normal;
font-variant-caps: normal; font-weight: normal;
letter-spacing: normal; text-align: start; text-indent:
0px; text-transform: none; white-space: normal;
word-spacing: 0px; -webkit-text-stroke-width: 0px;
text-decoration: none; float: none; display: inline
!important;" class="">seaside mailing list</span><br
style="caret-color: rgb(0, 0, 0); font-family:
Helvetica; font-size: 12px; font-style: normal;
font-variant-caps: normal; font-weight: normal;
letter-spacing: normal; text-align: start; text-indent:
0px; text-transform: none; white-space: normal;
word-spacing: 0px; -webkit-text-stroke-width: 0px;
text-decoration: none;" class="">
<span style="caret-color: rgb(0, 0, 0); font-family:
Helvetica; font-size: 12px; font-style: normal;
font-variant-caps: normal; font-weight: normal;
letter-spacing: normal; text-align: start; text-indent:
0px; text-transform: none; white-space: normal;
word-spacing: 0px; -webkit-text-stroke-width: 0px;
text-decoration: none; float: none; display: inline
!important;" class=""><a
href="mailto:seaside@lists.squeakfoundation.org"
class="" moz-do-not-send="true">seaside@lists.squeakfoundation.org</a></span><br
style="caret-color: rgb(0, 0, 0); font-family:
Helvetica; font-size: 12px; font-style: normal;
font-variant-caps: normal; font-weight: normal;
letter-spacing: normal; text-align: start; text-indent:
0px; text-transform: none; white-space: normal;
word-spacing: 0px; -webkit-text-stroke-width: 0px;
text-decoration: none;" class="">
<span style="caret-color: rgb(0, 0, 0); font-family:
Helvetica; font-size: 12px; font-style: normal;
font-variant-caps: normal; font-weight: normal;
letter-spacing: normal; text-align: start; text-indent:
0px; text-transform: none; white-space: normal;
word-spacing: 0px; -webkit-text-stroke-width: 0px;
text-decoration: none; float: none; display: inline
!important;" class=""><a
href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside"
class="" moz-do-not-send="true">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a></span></div>
</blockquote>
</div>
<br class="">
</div>
<br>
<fieldset class="mimeAttachmentHeader"></fieldset>
<pre class="moz-quote-pre" wrap="">_______________________________________________
seaside mailing list
<a class="moz-txt-link-abbreviated" href="mailto:seaside@lists.squeakfoundation.org">seaside@lists.squeakfoundation.org</a>
<a class="moz-txt-link-freetext" href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a>
</pre>
</blockquote>
<p><br>
</p>
<pre class="moz-signature" cols="72">--
-----------------------------------------------------------------------
Objektfabrik Joachim Tuchel <a class="moz-txt-link-freetext" href="mailto:jtuchel@objektfabrik.de">mailto:jtuchel@objektfabrik.de</a>
Fliederweg 1 <a class="moz-txt-link-freetext" href="http://www.objektfabrik.de">http://www.objektfabrik.de</a>
D-71640 Ludwigsburg <a class="moz-txt-link-freetext" href="http://joachimtuchel.wordpress.com">http://joachimtuchel.wordpress.com</a>
Telefon: +49 7141 56 10 86 0 Fax: +49 7141 56 10 86 1
</pre>
</body>
</html>