Synchronizing DOM manipulations between Lisp and <script> elements

[khinsen]

Is there a way to synchronize DOM manipulations via CLOG with DOM manipulations made by <script> elements?

More specifically, I use clog:inner-html to add HTML with embedded script tags to an element. I want to wait for all the scripts to have terminated before manipulating the DOM from CLOG.

[rabbibotton]

Look at the source for clog:load-script

[khinsen]

Thanks! I think I understand how this works. It will require some adaptation to my use case, but that looks very possible. On my agenda for tomorrow.

[rabbibotton]

The idea is to block till you receive a custom event from the browser. It is a very nice little trick to have in your pocket for many things.

…

On Thu, Jul 25, 2024 at 2:50 PM Konrad Hinsen ***@***.***> wrote: Thanks! I think I understand how this works. It will require some adaptation to my use case, but that looks very possible. On my agenda for tomorrow. — Reply to this email directly, view it on GitHub <#377 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACYUEFIAKPF3N7BUNLTXT3DZOFCH7AVCNFSM6AAAAABLOY62QSVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTAMJVGIZDONA> . You are receiving this because you commented.Message ID: ***@***.***>

[khinsen]

I have that part working fine. However, the event is fired after the last script in my HTML is launched, but before it terminates.

Here is how I do it: I modified clog:inner-html to add a keyword argument :wait-for-scripts, which I set to t in my code:

(defmethod (setf inner-html) (value (obj clog-element) &key (wait-for-scripts nil)
                                                         (wait-timeout 3))
  (if wait-for-scripts
      (let* ((sem (bordeaux-threads:make-semaphore))
             (document (html-document (connection-body obj)))
             (token (symbol-name (gensym)))
             (trigger-script (format nil "<script>
                 $(clog['document']).trigger('on-load-script','~A')
                 </script>" token)))
        (flet ((on-load (obj received-token)
                 (declare (ignore obj))
                 (when (equalp token received-token)
                   (bordeaux-threads:signal-semaphore sem))))
          (set-on-load-script document #'on-load :one-time t)
          (jquery-execute obj (format nil "html('~A')"
                                      (escape-string (concatenate 'string
                                                                  value
                                                                  trigger-script))))
          (bordeaux-threads:wait-on-semaphore sem :timeout wait-timeout)))
      (jquery-execute obj (format nil "html('~A')" (escape-string value))))
  value)

I started wondering how scripts are run exactly by jQuery. After an hour of looking at the jQuery code, I am still wondering. When the injected HTML contains <script>, <css>, or <link>, jQuery does a lot of pre- and post-processing, filtering out the scripts and re-inserting them under unclear conditions.

I haven't found any official documentation on how my scripts re supposed to behave under jQuery, only various comments on StackOverflow that contradict each other.

In retrospect, it is almost incredible that my scripts get run at all, and even in the right order. But I suspect that they are run asynchronously, which is not good at all for my use case.

[khinsen]

I also tried wrapping the event trigger in $( ), which the recommended way to wait for "DOM ready" after a page load. But this doesn't make any difference for inner-html.

[rabbibotton]

(defgeneric ready-state (clog-document) (:documentation "Get ready-state. Returns 'loading'|'interactive'|'complete'. The state would only change if the boot-page was still loading css, graphics, etc. Under normal circumstance there is no need in CLOG to check if the state is ready as on-new-window is only called once one can interact with page. See also SET-ON-READY-STATE-CHANGE")) I didn't read code yet you sent working - but if waiting for the page use that

…

On Fri, Jul 26, 2024 at 10:35 AM Konrad Hinsen ***@***.***> wrote: I also tried wrapping the event trigger in $( ), which the recommended way to wait for "DOM ready" after a page load. But this doesn't make any difference for inner-html. — Reply to this email directly, view it on GitHub <#377 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACYUEFIXQXNRAO3KP7VTGGTZOJNDXAVCNFSM6AAAAABLOY62QSVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTAMJWGEYDSNI> . You are receiving this because you commented.Message ID: ***@***.***>

[rabbibotton]

and the events see rest of clog-document the document events

…

On Fri, Jul 26, 2024 at 10:56 AM David Botton ***@***.***> wrote: (defgeneric ready-state (clog-document) (:documentation "Get ready-state. Returns 'loading'|'interactive'|'complete'. The state would only change if the boot-page was still loading css, graphics, etc. Under normal circumstance there is no need in CLOG to check if the state is ready as on-new-window is only called once one can interact with page. See also SET-ON-READY-STATE-CHANGE")) I didn't read code yet you sent working - but if waiting for the page use that On Fri, Jul 26, 2024 at 10:35 AM Konrad Hinsen ***@***.***> wrote: > I also tried wrapping the event trigger in $( ), which the recommended > way to wait for "DOM ready" after a page load. But this doesn't make any > difference for inner-html. > > — > Reply to this email directly, view it on GitHub > <#377 (reply in thread)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/ACYUEFIXQXNRAO3KP7VTGGTZOJNDXAVCNFSM6AAAAABLOY62QSVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTAMJWGEYDSNI> > . > You are receiving this because you commented.Message ID: > ***@***.***> >

[khinsen]

So far, what works best is... (sleep 1).

[rabbibotton]

Did you try firing the custom event as the last thing your script does? Not sure how you can get an event in JS and previous statements not processed as JS in single threaded/

[rabbibotton]

Is your script maybe aync loading other scripts?

[khinsen]

I fire the custom event in an additional script that I append to the HTML block. But that script is run before the previous one has terminated. It looks like jQuery runs scripts in async mode.

Maybe I should just take the scripts out of the HTML and run them myself!

[khinsen]

My script does nothing exotic. It walks through an SVG element created by graphviz and changes the ID attributes of some element so that I can later define on-click events for them. Nothing async, no calling other scripts, it's really boring stuff. But it gets only 4/5 of its work done before the following script is run and fires the custom event.

[rabbibotton]

I will try and do some experiments Sunday sorry been so busy

…

On Fri, Jul 26, 2024 at 4:16 PM Konrad Hinsen ***@***.***> wrote: My script does nothing exotic. It walks through an SVG element created by graphviz and changes the ID attributes of some element so that I can later define on-click events for them. Nothing async, no calling other scripts, it's really boring stuff. But it gets only 4/5 of its work done before the following script is run and fires the custom event. — Reply to this email directly, view it on GitHub <#377 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACYUEFL5TYCOSL667WP5XVLZOKVBLAVCNFSM6AAAAABLOY62QSVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTAMJWGM3TSMA> . You are receiving this because you commented.Message ID: ***@***.***>

[khinsen]

No need to say sorry - you are not a firefighter and there's no fire!

[rabbibotton]

busier than I thought I would be and likely for next two weeks @khinsen if you can sent this to me as a ticket would help

[khinsen]

Done: #378