Clear/close model like turbo frame (clear turbo frame without JS)

1

Hye there,

I can’t seem to find anything baked in to clear out a modal-like frame.

The setup is this. Before the ending </body> tag I added a <%= turbo_frame_tag "actions_show" do %><% end %> frame tag.
When I click an action link it loads the frame content from that url and fills it up with that content that contains this modal.

Now, I want to click cancel and get rid of this modal in the “hotwire” way (if that exists).
I mean, I could add a controller action that queries the page and empties that div, but that doesn’t seem like the way to do it.
Or I could have the cancel button call a path that returns an empty frame, but that’s just wastefull.

On the modal you might have a few buttons that do various things (submit a form, redirects to a page, reloads the frame, etc.) but there will always be the need to clear the modal.
So my question is:

Is there a way of clearing the contents of a frame programatically without custom JS?

Thank you!

image

2

Until an official direction I’m using a controller to empty it out.

// modal_controller.js
import { Controller } from 'stimulus'

export default class extends Controller {
  static targets = ['modal']

  close() {
    this.modalTarget.remove()
  }
}

<!-- _modal.html.erb - pseudo modal markup -->
<div id="modal-container" data-controller="modal" data-modal-target="modal">
  <div class="modal-overlay" data-action="click->modal#close"></div>
  <div class="modal-body">
    <%= yield %>
    <%= link_to 'Cancel', "javascript:void(0);", 'data-action': 'click->modal#close' %>
  </div>
</div>