This episode was on Ruby 2.7.2 and Rails 6.1.0. It's probably worth noting that I do have a .railsrc file which contains.
--skip-spring
--skip-coffee
This episode was also based on the version of hotwire-rails 0.1.0 and turbo-rails 0.5.0 at the time. They are moving fairly quickly with their development. What differences are you finding?
Just starting but very minor stuff. For example the content of the layout/application.html didn't match. I am now using Ruby 2.7.2 and Rails 6.1.1. Thanks for your .railrc.
It shouldn't have been missing the |form| that was generated from the scaffold generators. I did move it down to the next line. I record the videos in 1920x1080 with a 3 window zoom level so, real estate on the screen is pretty valuable. Moving the arguments down to the next line makes it a bit easier to read while watching the video. Is this what you were referring to?
Sometimes you use e.g. @comment in a .html.erb and sometimes just comment. It seems that in the erb, the instance variables from the controller are automatically mapped to local variables. But what is the rule? When are they and when are they not?
☒ There isn't really a rule, but more practices that I've come about. Basically, and whenever possible, instance variables shouldn't go in a partial. It's too easy to reuse the partial and forget to declare the instance variable. Generally, if there is a nested situation like [@ticket, comment], this would be a situation where if the @ticket wasn't assigned then there would likely be a lot more problems. However, it is still "good" practices to avoid the instance variables in the partials if possible. On top levels, i.e., a new action sets an instance variable and this renders new.html.erb, I would be a lot more likely to consume the instance variable within that new.html.erb.
I am following the tutorial and there are differences too.
I am on Rails 6.0.3.4 and Ruby 2.7.1. Hotwire 0.1.3
The the controllers folder was created inside `app/javascript`
My application.js looks like this
// This file is automatically compiled by Webpack, along with any other files// present in this directory. You're encouraged to place your actual application logic in// a relevant structure within app/javascript and only use these pack files to reference// that code so it'll be compiled.
require("@rails/ujs").start()
require("@rails/activestorage").start()
require("channels")
// Uncomment to copy all static images under ../images to the output folder and reference// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)// or the `imagePath` JavaScript helper below.//// const images = require.context('../images', true)// const imagePath = (name) => images(name, true)
import "controllers"
require("trix")
require("@rails/actiontext")
Everything went smooth until the StimulusJS part.
I am getting a: Uncaught Error: Cannot find module 'controllers'
I have tried reinstalling stimulus-rails (rails stimulus:install) with no success.
This jquery plugin is actually laying on top of the form input itself....But, I don't know exactly how to deal with removing the content inside of it, within a Turbo environment.
With it rendered in the browser, inspect the elements to see if the jquery plugin is creating additional elements, you would then need to target these from within stimulus and can drill down to them from this.element.
I saw that someone else had a similar issue with the emojionearea picker....But, then I tried without it -- there is something wrong with the reset_form controller data-attribute. Its simply not working with turbo itself....I have turbo as a require statement in my webpack application.js. Its working without issue....but the link between turbo and stimulus, are not.
I have finally managed to make it work with webpacker. The changes were: Use: - rails webpacker:install:stimulus (which will add the controllers/index.js) - rails stimulus:install:webpacker (to be sure) - rails turbo:install:webpacker
On the layout, change `data-turbolink-track` to `data-turbo-track`:
and, finally, on the Stimulus side, as pointed out by RailsCod3rFuture, use `reset-form` instead of `reset_form` when calling the controller on Stimulus.
☒ how are you initializing the datepicker? If you have a separate JS file and doing something like a turbolinks:load, make sure that you change those to a turbo:load. Alternatively, I'd recommend making the datepicker a small stimulus controller to initialize it. It will help keep the logic separate and also "just work" when turbo replaces the frame.
Yes I have a separate JS file and doing something like turbo:load, it works when navigating between pages, but the datepicker is broken when replacing the frame, still can't figure it out as I'm not familiar with stimulus.
Do you know how to handle scrolling for the window when it comes to Turbo? When an element is added, it doesn't automatically pull it into view at the bottom of the div. Is there a quick way to setup automatic scrolling unless the user is scrolling upward/downward? I haven't seen any real concrete examples of this, being done right.
I would probably avoid doing window scrolling directly as that could have strange behaviors. You could instead do linking to id tags (anchors) which would scroll the window to the new elements. However, that could also be a bit strange as it would update the history. You would probably need to do something with turbo:before-visit to make sure that you're not creating additional requests back to the server if an anchor tag is present and also check if the user is scrolling to escape the visit entirely.
Just so you know, I'd opened an issue regarding the problem I was facing: https://github.com/hotwired/stimulus-rails/issues/33#issuecomment-766373945 PR
A PR was raised and it was already merged into stimulus-rails.
Back to getting this to work. Kind of dead in the water with this error: /Users/pitosalas/.rbenv/versions/2.7.2/lib/ruby/gems/2.7.0/gems/redis-4.2.5/lib/redis/client.rb:367:in `rescue in establish_connection': Error connecting to Redis on localhost:6379 (Errno::ECONNREFUSED) (Redis::CannotConnectError)
What causes Redis to run? I didn't see any step that required me to do that. Is that what's wrong?
never mind. I noticed that I literally didn't have Redis running, I was assuming that rails somehow took care of that. I would've deleted my question, but in case someone else hit that I thought I would leave it in!
☒ Try naming referencing to the controller with reset-form instead of reset_form. Also, in the reset() function, try to do a console.log() to see if you're even triggering the function. You can do the same in a connect function to see if the controller is getting connected.
I also had the problem where my app was not reseting the form...determined that the Stimulus controller (reset_form_controller.js) was not working properly. The reset action simply wouldn't do anything (like a console log). This is not the first time a new Stimulus controller has not functioned properly, by the way!
So I just moved the reset action into the Stimulus demo controller called "hello_controller.js" that comes with a new Rails install, and then called that from the my HTML. That worked.
Here's the hello_controller.js....
import { Controller } from "stimulus"
export default class extends Controller {
static targets = ["button"]
reset() {
console.log("IM IN THE RESET ACTION!!!!!");
this.element.reset();
this.buttonTarget.disabled = false;
}
}
Hi, I like your tutorials very much and I enjoy my subscription to your contents ! One think I still don't get across different videos about Hotwire I watched is this: [24'30] "Because this one was the one initiating, we still did a redirect". Why is it so ? I thought defining broadcasts_to in the comment model would have been enough. What am I not getting here ? Thank you :)
Yes I saw that, thank for the quick reply even on Sunday!! ;) I also watched the first video of Chris Olivier about Hotwire in which he creates a Twitter Clone. In his version, even though he does a redirect in his tweets_controller, he sets the broadcast for the tweets and then it is sent across two browser windows with the one initiating doing a redirect WITHOUT the page reloading entirely. The created tweet is appended below his div with the "tweets" target. I'm wondering if the difference comes from the fact that you do your business in the show of the parent element but I can't quite get my head around that :/
It sounds like we should also remove ujs from Webpacker. This was found on https://github.com/hotwired/turbo-rails
This episode was also based on the version of hotwire-rails 0.1.0 and turbo-rails 0.5.0 at the time. They are moving fairly quickly with their development. What differences are you finding?
I am on Rails 6.0.3.4 and Ruby 2.7.1. Hotwire 0.1.3
The the controllers folder was created inside `app/javascript`
My application.js looks like this
// This file is automatically compiled by Webpack, along with any other files // present in this directory. You're encouraged to place your actual application logic in // a relevant structure within app/javascript and only use these pack files to reference // that code so it'll be compiled. require("@rails/ujs").start() require("@rails/activestorage").start() require("channels") // Uncomment to copy all static images under ../images to the output folder and reference // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) // or the `imagePath` JavaScript helper below. // // const images = require.context('../images', true) // const imagePath = (name) => images(name, true) import "controllers" require("trix") require("@rails/actiontext")Everything went smooth until the StimulusJS part.
I am getting a:
Uncaught Error: Cannot find module 'controllers'
I have tried reinstalling stimulus-rails (rails stimulus:install) with no success.
reset_form_controller.js import {Controller} from 'stimulus' export default class extends Controller { static targets = ["button"] reset() { this.element.reset() this.buttonTarget.disabled = false } }new.html.erb <%= turbo_frame_tag "new_conversation_conversation_comment", target: "_top" do %> <%= form_with(model: [@conversation_comment.conversation, @conversation_comment], html: {class: 'form-inline'}, data: {controller: "reset_form", action: "turbo:submit-end->reset_form#reset"}) do |form| %> <div class="mt-1"> <%= button_tag(type: :submit, class: 'btn btn-primary btn-sm', style: 'float: right; height: 36px !important; border-radius: 0px !important;') do %> Send <% end %> </div> <div style="overflow: hidden;"> <%= form.text_field :content, placeholder: 'Type your message....', style: 'width: 100% !important; border-radius: 0 !important;' %> </div> <% end %> <script> $(document).ready(function () { $("#conversation_comment_content").emojioneArea({ pickerPosition: "top", filtersPosition: "bottom", tones: false, autocomplete: false, inline: true, hidePickerOnBlur: false }); }); </script> <% end %> conversation - show action. <div class="col-6"> <% if @conversation.present? %> <%= turbo_stream_from @conversation %> <div class="chat-room"> <%= turbo_frame_tag "conversation" do %> <div class="text-center chat-room-title"> <h5 class="text-light-charcoal"><%= @conversation.title %></h5> </div> <% end %> <div id="conversation_comments"> <%= render @conversation.conversation_comments %> </div> <div class="chat-box"> <%= turbo_frame_tag 'new_conversation_conversation_comment', src: new_conversation_conversation_comment_path(@conversation), target: "_top" %> </div> </div> <% end %> </div>data: {controller: "reset_form", action: "turbo:submit-end->reset_form#reset}I followed your other video, without success...
Just so you understand the steps I have followed.
Using Rails 6.1.1.1
```
rails new app
cd app
bundle install
bundle add hotwire-rails
rails hotwire:install
```
I am using rails with webpacker as default.
And then scaffolded a posts model. Just that.
When visiting localhost:3000/posts the error shows up
I have finally managed to make it work with webpacker.
The changes were:
Use:
- rails webpacker:install:stimulus (which will add the controllers/index.js)
- rails stimulus:install:webpacker (to be sure)
- rails turbo:install:webpacker
On the layout, change `data-turbolink-track` to `data-turbo-track`:
<!DOCTYPE html> <html> <head> <title>Fiio</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbo-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbo-track': 'reload' %> </head> <body> <%= yield %> </body> </html>and, finally, on the Stimulus side, as pointed out by RailsCod3rFuture, use `reset-form` instead of `reset_form` when calling the controller on Stimulus.
Just so you know, I'd opened an issue regarding the problem I was facing:
https://github.com/hotwired/stimulus-rails/issues/33#issuecomment-766373945 PR
A PR was raised and it was already merged into stimulus-rails.
Thanks for the help
What causes Redis to run? I didn't see any step that required me to do that. Is that what's wrong?
the path is different than the video of reset_form_controller, still in app/javascript/controlers/reset_form_controller.js
Any thoughts?
ATT:
Renamed my reset_form_controller.js and it works, don't know what happened xD
So I just moved the reset action into the Stimulus demo controller called "hello_controller.js" that comes with a new Rails install, and then called that from the my HTML. That worked.
Here's the hello_controller.js....
import { Controller } from "stimulus" export default class extends Controller { static targets = ["button"] reset() { console.log("IM IN THE RESET ACTION!!!!!"); this.element.reset(); this.buttonTarget.disabled = false; } }
And here's the HTML for the form...
<%= form_with model: List.new, data: {controller: 'hello', action: 'turbo:submit-end->hello#reset'} do |form| %> <div class="field"> <%= form.label :name %> <%= form.text_field :name %> </div> <div class="actions"> <%= form.submit 'Post', 'data-hello-target': 'button'%> </div> <% end %>
I like your tutorials very much and I enjoy my subscription to your contents !
One think I still don't get across different videos about Hotwire I watched is this:
[24'30] "Because this one was the one initiating, we still did a redirect".
Why is it so ? I thought defining broadcasts_to in the comment model would have been enough. What am I not getting here ?
Thank you :)
I'm wondering if the difference comes from the fact that you do your business in the show of the parent element but I can't quite get my head around that :/