Tutorials

Creating Dynamic Forms with Hotwire and Turbo Stream in Rails 7: A Complete Guide

Ariel Arzamendia. - 2024-01-07

Creating Dynamic Forms with Hotwire and Turbo Stream in Rails 7:

class Location < ApplicationRecord has_many :car_brands end

app/models/car_brand.rb

class CarBrand < ApplicationRecord belongs_to :location has_many :models end

app/models/model.rb

class Model < ApplicationRecord belongs_to :car_brand has_many :colors end

app/models/color.rb

class Color < ApplicationRecord belongs_to :model end

Notice that we also added the “rental” stimulus controller in the form in order to handle the JavaScript from the view. We also added data-target “location” and an action to the location select. We will explain that in the next steps.</p><pre><code class="language-language-ruby">#app/views/rentals/new.html.erb <%= form_with url: rentals_path, method: :post, data: { controller: "rental" } do |form| %> <%= form.label :first_name %> <%= form.test_field :first_name, autocomplete: "given_name" %>

<%= form.label :last_name %> <%= form.text_field :last_name, autocomplete: "family_name" %>

<%= form.label :address %> <%= form.text_field :address, autocomplete: "address" %>

<%= form.label :email %> <%= form.email_field :email, autocomplete: "email" %>

<%= form.label :location_id, 'Location' %> <%= form.collection_select :location_id, Location.all, :id, :name,

  include_blank: true,
  data: { rental_target: &quot;location&quot;, action: &quot;rental#updateCarBrands&quot; } %&gt;

&lt;%= render &#39;car_brands&#39;, car_brands: [] %&gt;

</div>

&lt;%= render &#39;models&#39;, models: [] %&gt;

</div>

&lt;%= render &#39;colors&#39;, colors: [] %&gt;

</div>

<%= form.submit "Rent Car" %> <% end %>

// app/javascript/controllers/rental_controller.js import { Controller } from '@hotwired/stimulus'; import { Turbo } from '@hotwired/turbo-rails';

export default class extends Controller { static targets = ["location", "carBrands", "models"]

connect() {

console.log(&quot;Rental controller connected&quot;);

}

updateCarBrands() {

const locationId = this.locationTarget.value;
this.fetchAndUpdate(`/update_car_brands?location_id=${locationId}`);

}

updateModels() {

const brandId = this.carBrandsTarget.value;
this.fetchAndUpdate(`/update_models?brand_id=${brandId}`);

}

updateColors() {

const modelId = this.modelsTarget.value;
this.fetchAndUpdate(`/update_colors?model_id=${modelId}`);

}

fetchAndUpdate(url) {

fetch(url, {
  method: &#39;GET&#39;,
  headers: {
    Accept: &#39;text/vnd.turbo-stream.html, text/html, application/xhtml+xml&#39;,
    &#39;X-Requested-With&#39;: &#39;XMLHttpRequest&#39;,
    &#39;X-CSRF-Token&#39;: this.getMetaContent(&#39;csrf-token&#39;),
    &#39;Cache-Control&#39;: &#39;no-cache&#39;,
  },
})
  .then(response =&gt; response.ok ? response.text() : Promise.reject(&#39;Response not OK&#39;))
  .then(html =&gt; Turbo.renderStreamMessage(html))
  .catch(error =&gt; console.error(&#39;Error:&#39;, error));

}

getMetaContent(name) {

return document.querySelector(`meta[name=&quot;${name}&quot;]`).getAttribute(&#39;content&#39;);

} }

app/controllers/rentals_controller.rb

class RentalsController < ApplicationController def update_car_brands

car_brands = CarBrand.where(location_id: params[:location_id])

render turbo_stream: turbo_stream.replace(&#39;car_brands&#39;, partial: &#39;car_brands&#39;, locals: { car_brands: car_brands })

end

def update_models

models = Models.where(brand_id: params[:brand_id])


render turbo_stream: turbo_stream.replace(&#39;models&#39;, partial: &#39;models&#39;, locals: { models: models })

end

def update_colors

colors = Colors.where(model_id: params[:model_id])

render turbo_stream: turbo_stream.replace(&#39;colors&#39;, partial: &#39;colors&#39;, locals: { colors: colors })

end end

For that we are building partials that will have the updated content from the turbo stream.</p><p>Notice that the car_brands and model partial have data-target and actions. These are going to be rendered in the main form. Each partial calls its own action from the stimulus controller and has its own data-target</p><pre><code class="language-language-ruby">#app/views/rentals/_car_brands.html.erb <%= form_with model: Rental.new do |form| %> <%= form.label :car_brand_id, 'Car Brand' %> <%= form.collection_select :car_brand_id, car_brands, :id, :name,

  include_blank: true,
  data: { rental_target: &quot;carBrands&quot;, action: &quot;rental#updateModels&quot; } %&gt;

<% end %>

app/views/rentals/_models.html.erb

<%= form_with model: Rental.new do |form| %> <%= form.label :model_id, 'Model' %> <%= form.collection_select :model_id, models, :id, :name,

  include_blank: true,
  data: { rental_target: &quot;models&quot;, action: &quot;rental#updateColors&quot; } %&gt;

<% end %>

#app/views/rentals/_colors.html.erb <%= form_with model: Rental.new do |form| %> <%= form.label :color_id, 'Color' %> <%= form.collection_select :color_id, colors, :id, :name,

  include_blank: true,
  data: { rental_target: &quot;colors&quot; } %&gt;

<% end %>

config/routes.rb

Rails.application.routes.draw do # Other routes get 'update_car_brands', to: 'rentals#update_car_brands' get 'update_models', to: 'rentals#update_models' get 'update_colors', to: 'rentals#update_colors' end

This application needs javascript to run, please enable it.