How do I reload a turbo-frame using idiomorph?

rubyonrails-talk
1

I’d like to reload a turbo-frame tag but replace the content using idiomorph. I there a way I can achieve that? I already know how to reload the frame content, but it doesn’t use idiomorph.

<turbo-frame src="/some_action" id="my-frame">
</turbo-frame>

document.getElementById('my-frame').reload()
2

Hey, @coorasse I think you could use this Turbo Handbook

3

Thank you! This is what I needed indeed. I solved it using:

addEventListener("turbo:before-frame-render", (event) => {
  event.detail.render = (currentElement, newElement) => {
    Idiomorph.morph(currentElement, newElement, {morphStyle:'innerHTML'})
  }
})

unfortunately I had to pin again idiomoprh library. I did not manage to get it from turbo directly.

1 Like
4

@coorasse if I understood you correctly I think it should be enough to add refresh="morph" to your turbo frame tag.

I.e.

<turbo-frame src="/some_action" id="my-frame" refresh="morph">
</turbo-frame>

Here’s the PR that added it to Turbo and it has a bit more info on how it works: Restore attribute "refresh=morph" to flag turbo frames to reload during a page refresh by jorgemanrubia · Pull Request #1068 · hotwired/turbo · GitHub

1 Like