I have a standard inline edit using Turbo, that replaces the turbo frame of the show
view with the turbo frame in the _form
. But the $(document).on "turbo:load", ->
event is not firing in this case.
I don't see another event that should be used. Any ideas how to run js on a response that replaces a turbo frame? (eg to initialise the datepicker in a form)
The event that fires when a frame loads is still under construction: https://github.com/hotwired/turbo/pull/59
The only events we currently have are turbo:before-fetch-request
and turbo:before-fetch-response
, that fire at the document
level every time Turbo changes a frame or navigates pages. The content of the frame won't be loaded by the time the event fires, but it will allow you to potentially use the loaded
property of the frame to hook up a promise that runs when the frame has loaded.
$(document).on("turbo:before-fetch-response", (e) ->
frame = document.getElementById("myFrame")
# Frame has finished loading
if frame.complete
#run my code
else
# Frame is still loading, run this code when it finishes
frame.loaded.then () ->
# run my code
Otherwise you can write a Stimulus controller that wraps your datepicker initialisation, so that you don't have to watch for it coming in and out of the DOM.