Dynamic Select Fields in Rails using Hotwire
Vložit
- čas přidán 1. 08. 2021
- ► Check out gorails.com for Pro episodes and more!
► SaaS business template for Ruby on Rails with built-in features like Payments, Teams, and much more: jumpstartrails.com
► Ruby on Rails hosting with Hatchbox.io: hatchbox.io
► Learn how to add Stripe Payments (with SCA support!) with Ruby on Rails: courses.gorails.com/payments-... - Věda a technologie
SIRRR!!!!!
You are my Knight in SHIMMERING armor
Chris is a genius when it comes to programming.. it's all Greek to me.. how do you understand it all.. You are truly in a league of your own in my opinion.. Thank you for this tutorial
I really liked this video, generally but primarily for one reason. It confirmed that I was on the right track with my own dive in to stimulus and turbo. There's not a lot of information out there still and, for turbo/turbo frames especially, it's very much still a moving target.
It sure is. Luckily it's becoming easier and easier to use and more tutorials now that we've had time to learn and use it for a few months.
.invert 😲 where has that been my whole life. I don't do rails anymore 😭 but I just LOVE watching your videos 💘
Just what i needed for my current project
Love when a screencast comes out at the perfect time!
@@GorailsTV thank you!
dude please add more hotwire-related content this semester. you also need to update any existing content that already done with turbolinks/UJS, like button loading spinner and love/like/follow button.
It's coming!
Thanks for sharing.
Awesome video, thank you
Nice, thanks!
This is nice, how it would work if you set the value of the country in the form?
I think we should make changes to the *change* function to make it work
Great video. Do you have a tutorial video on 'collection_check_boxes'?
possible to show the turbo progress bar when the request.js GET is slow?
Great work. What about when editing an address to have the list of states pull on page load based on the record's existing country?
hey i ran into the same issue and i solved it by getting the id of the existing record from the url params. Then calling my model from my controller e.g Address.find[:id]. Once you know what country is attached to the current address you can get the list of states and attach it to the page on page load using stimulus. Thats the basic idea
How could I integrate this functionality with the registration form of devise, I want to let my users select the country they're from or live.
anyone have example for typeahead combobox ?
This is awesome! I need to figure out a slight variation: suppose there are too many countries for a form.select field. Think of millions of countries. How could it use an autocomplete search to display only matching options for the user to select. Thank you!
A Javascript library like TomSelect is handy for this. You can have it load the options via AJAX requests and also filter those results remotely.
Thanks for this tutorial Chris. Very helpful. Somehow just for my setup (Rails 7.0.1 and Ruby 3.0.0) the request.js didn't work for me directly while using it in country_controller.js (or select_controller.js). In other words, despite doing that step, and then calling get() function, it was unable to do anything. Though, I followed the exact step from this tutorial i.e. using "yarn add @rails/request.js".
So I had to still install request.js using gem "requestjs-rails" and then running "rails requestjs:install". The earlier yarn step also added dependency in package.json but still, it was not working. After using gem and installing request.js step with rails command, it added the import statement for "rails/request.js" in import application.js. Everything worked fine after this step.
It's strange but that's how it worked for me. Letting you know here just in case it helps anybody else facing the same issue.
Did you import the " { get } from '@rails/request.js' ". I've the same setup as you and mine is not working.
i still get this error message "Uncaught TypeError: Failed to resolve module specifier "rails/request.js". Relative references must start with either "/", "./", or "../". "
@@amazingcake7023 Yes I have "import { get } from "@rails/request.js"" in country_controller.js as well otherwise it wasn't working.
@@amazingcake7023 did you try importing i.e. import "@rails/request.js" in your application.js ?
Hi Chris, I've followed this video step by step but states are not changing based on countries using stimulus, the backend request is working properly. I've also debugged the code everything is working fine but the dropdown is not updating. can you please some help on this thanks!
OS: Ubuntu 20.04.3 LTS 64-bit
Rails version: 7.0.2
Ruby Version: 3.0.0
Country Controller:
export default class extends Controller {
static targets = ["stateSelect"]
change(event) {
let country = event.target.selectedOptions[0].value
let target = this.stateSelectTarget.id
fetch(`/addresses/states?target=${target}&country=${country}`, {
responseKind: 'turbo-stream'
})
}
}
address_controller.rb
def states
@target = params[:target]
@states = CS.get(params[:country]).invert
respond_to do |format|
format.turbo_stream
end
end
states.turbo_stream.erb
I need to do this for state and county within the US. As in user selects state and the second drop down will list counties within that state. There is not gem for this that I have found. How would I do this if there is no gem that I can use? I am also new to ruby on rails.
You could load a CSV or make a database model for the counties. Doesn't really matter where you store the data. 👍
Hello, can you tell me how I can fill a simple text field dynamically in this way?
Your turbo stream would probably need to replace the text field with one that's filled out.
How would you extend this to also select a city from a given state?
You'd do the same thing when the state changes and load a list of cities from the Rails app.
Thank you, Chris@@GorailsTV
Make video on pagination without gem with dropdown filter
Failed to register controller: country (controllers/country_controller) TypeError: Failed to resolve module specifier "@rails/request.js". Relative references must start with either "/", "./", or "../".
Could not find a declaration file for module '@rails/request.js'.
Error invoking action "change->select#change"
Very good tutorial, but it would be amazing if you showed some tests too (with rspec/capybara for example)
he do something but source to download is build completly different
This approach does not work if you have another controller (e.g. slim-select) set for the select fields
You would modify it to update slim select options instead.
Is it me or is the code complex ?
It takes some getting used to. I found turbo confusing for a while.