2

I am essentially following this GoRails episode: https://gorails.com/episodes/datatables-from-scratch-using-hotwire

Changes to the form update the projects frame as expected. I have filters in a modal that work great. Previously I had the projects frame below the form. However that content doesn't get updated via Turbo. I nested the modal in the turbo frame and the turbo frame in the form.

This works great now - the model content gets updated except now when turbo updated the hidden class gets re-applied, the modal 'closes' and the modal background stays displayed over the page. I want the modal to stay open so the user can select multiple filters then hit the esc key or the modal button to close it.

<form data-sort-target="form" data-turbo-frame="projects" data-turbo-action="advance" action="" accept-charset="UTF-8" method="get">
  <input placeholder="Search..." oninput="this.form.requestSubmit()" class="form-control" type="search" name="query" id="query">
  <turbo-frame data-turbo-action="advance" id="projects">
    <div class="modal hidden">
      <h4>Status</h4>
      <div class="m-l-md">
        <input onchange="this.form.requestSubmit()" type="checkbox" value="active" name="status[]" id="status[]">
        Active (77)
      </div>
      <div class="m-l-md">
        <input onchange="this.form.requestSubmit()" class="form-control" type="closed" value="green" name="status[]" id="status[]">
        Closed (74)
      </div>
    </div>
    <!-- index partial -->
  </turbo-frame>
</form>

Open to other methods to accomplish this - new to Turbo / Hotwire so I may be missing something easy here.

Dan Tappin
  • 2,692
  • 3
  • 37
  • 77

1 Answers1

2

This sounds like a perfect use case for the data-turbo-permanent attribute this will keep the state of the element throughout page loads.

yungindigo
  • 241
  • 1
  • 6