Triggering Turbo Frame with JS

37

Alternatively, you could use a GET response and dynamically update the src of the turbo-frame with a GET query. No polyfill needed.

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = ['results'];
  static values = {url: String}

  findResults(event) {
    this.resultsTarget.src = this.urlValue.replace(/%s/g, encodeURIComponent(event.target.value))
  }
}

<div data-controller="search" data-search-url-value="books?q=%s">
  Search:
  <input type="search" data-action="search#findResults">
  <turbo-frame id="search-results" data-search-target="results"></turbo-frame>
</div>
6 Likes