[Seaside] ajax onBlur callback with load html: [...]

[Karsten Kusche]

Hi Bob,

Typically it’s no problem to replace an element that has an event-handler attached. The only thing you need to take care of is that you register another event-handler for the new element. IIRC your example did exactly that because you used the exact same render-code during callback as you did during initial rendering.

Here’s an example to demonstrate what I mean:
                https://jsfiddle.net/Lt2hnb0c/

You have three DIVs, each with a button. Each button has Javascript code that adds some interaction. B1 has its code outside of its DIV in a SCRIPT element. B2 has its code inside its DIV.
The Javascript code of B1 and B2 replaces a B2’s content. What that does is remove the <script> next to B2, which also removes B2’s event handler.
When B3 is clicked, it not only replaces B2 with a new button, it also registers a new event-handler. Thus the new B2 can operate again.

In your example you replace the wrapping DIV with new content. Due to the way Seaside transports jQuery code, you’ll have a SCRIPT-element at the end. Replacing this element (when you replace your DIV again) will remove all of its contained Javascript-code and with it all your event-handlers. The question is: what happens when you’re currently executing an event-handler that’s defined in this SCRIPT-element?

My guess is that during your initial page-rendering the script will be at the end of BODY, not at the end of your DIV. When you BLUR, you’ll replace your DIV and add another event-handler inside the DIV. If you now click a button and it replaces its own event-handler, I’m not sure what would happen.

Kind Regards
Karsten


Von: seaside [mailto:seaside-bounces at lists.squeakfoundation.org] Im Auftrag von Bob Nemec
Gesendet: Dienstag, 21. September 2021 17:22
An: seaside at lists.squeakfoundation.org; jtuchel at objektfabrik.de
Betreff: [Seaside] ajax onBlur callback with load html: [...]


For some reason I am no longer getting these emails. (I'd really like to move this mailing list to better forum, like a Google Group or questions on Stack Overflow).

Found this from Joachim in the archive...

...we had to register an event handler with the doument using an

extra selector. in Javascript you'd have to do it like this:



$(document).on("click","button#idOfTheButton", function(event) {...} );

(see https://api.jquery.com/on/ <https://api.jquery.com/on/> for details)



In Seaside, this would look like this:





     (html jQuery document)

                 on: 'blur'

                 selector: '#myButton'

                 do: (

                     (html jQuery ajax) ....



...I tried that, but if I include the button render in the reloaded div, with the on:selector:do: outside of the reloaded div, I get the same symptom: the 'click' (changed from 'blur') event does not consistently fire, as if the selector did not find the button. Adding console.log() tracing shows the occasional absence of the button onClick event.

Seems that the rule for me is: don't reload components that contain onClick scripts.

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.squeakfoundation.org/pipermail/seaside/attachments/20210921/7aa2dca5/attachment-0001.html>