Episodes
ye-lin-aung said almost 2 years ago on Hotwire :
Hi. It should be rails g model comment in notes. 

David Kimura PRO said almost 2 years ago on Hotwire :
Note, if you were using Turbolinks/Rails UJS in your app previously, you should remove them:

  1. Remove the turbolinks gem from your Gemfile.
  2. Run ./bin/bundle install
  3. Run ./bin/yarn remove turbolinks @rails/ujs
  4. Remove these from your application's JavaScript pack:
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
Rails.start()
Turbolinks.start()

It sounds like we should also remove ujs from Webpacker. This was found on https://github.com/hotwired/turbo-rails


Patrick PRO said almost 2 years ago on Hotwire :
The best tutorial so far! Thank a lot!

pitosalas PRO said over 1 year ago on Hotwire :
I am following this tutorial with rails 6.1.1 and ruby 2.7.2 and am finding some small differences. What versions did you use?

David Kimura PRO said over 1 year ago on Hotwire :
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?

pitosalas PRO said over 1 year ago on Hotwire :
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. 

David Kimura PRO said over 1 year ago on Hotwire :
I do apply driftingruby.css and a bit of light styling to each episode, but nothing invasive or major.


David Kimura PRO said over 1 year ago on Hotwire :
I would be interested to see the diff   

pitosalas PRO said over 1 year ago on Hotwire :
Do you want notes like this: ... when your video first creates the form_with in comments/new.html.erb you skip the |form| bit

David Kimura PRO said over 1 year ago on Hotwire :
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?

pitosalas PRO said over 1 year ago on Hotwire :
This frame in particular actually:


David Kimura PRO said over 1 year ago on Hotwire :
Ah yes that was a “typeo”. 

pitosalas PRO said over 1 year ago on Hotwire :
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? 

David Kimura PRO said over 1 year ago on Hotwire :
  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.

guizero said over 1 year ago on Hotwire :
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.

David Kimura PRO said over 1 year ago on Hotwire :
RailsCod3rFuture said over 1 year ago on Hotwire :
Any idea why the form isn't resetting for Turbo after being submitted?? I tested my stimulus controller with a counter button and it has no issue...

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>




RailsCod3rFuture said over 1 year ago on Hotwire :
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.

<input placeholder="Type your message...." id="conversation_comment_content_1" style="width: 100% !important; border-radius: 0px !important; display: none;" type="text" name="conversation_comment[content]">

<div class="emojionearea emojionearea-inline" role="application">
<div class="emojionearea-editor" contenteditable="true" placeholder="Type your message...." tabindex="0" dir="ltr" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off">No</div>
<div class="emojionearea-button" title="Use the TAB key to insert emoji faster">
<div class="emojionearea-button-open">
</div>
<div class="emojionearea-button-close">
</div>
</div>



David Kimura PRO said over 1 year ago on Hotwire :
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.

RailsCod3rFuture said over 1 year ago on Hotwire :
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.

data: {controller: "reset_form", action: "turbo:submit-end->reset_form#reset}

RailsCod3rFuture said over 1 year ago on Hotwire :
I even added a console log to the reset() function......doesn't show up in the console at all.

RailsCod3rFuture said over 1 year ago on Hotwire :
it works now...I had to put a dash between the controller name! "reset-form"

guizero said over 1 year ago on Hotwire :
 

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

David Kimura PRO said over 1 year ago on Hotwire :
  if you're using webpacker, don't run hotwire:install. You should use stimulusjs via webpacker with

rails webpacker:install:stimulus

guizero said over 1 year ago on Hotwire :
Thanks   

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.

ternggio95 said over 1 year ago on Hotwire :
I'm using datepicker and it's broken when the form is replaced. How to solve that?

David Kimura PRO said over 1 year ago on Hotwire :
  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.

ternggio95 said over 1 year ago on Hotwire :
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.

RailsCod3rFuture said over 1 year ago on Hotwire :
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.

David Kimura PRO said over 1 year ago on Hotwire :
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.


guizero said over 1 year ago on Hotwire :
 

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


pitosalas PRO said over 1 year ago on Hotwire :
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?

pitosalas PRO said over 1 year ago on Hotwire :
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!

CaioFML said over 1 year ago on Hotwire :
Need some help here. I'm using ruby 3.0 and rails 6.1.3, my reset_form_controller.js doesn't work, here the codes:





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

David Kimura PRO said over 1 year ago on Hotwire :
  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.

David Ng PRO said over 1 year ago on Hotwire :
It would be nice if you could demo Hotwire append record to turbo_frame_tag

Helmut PRO said about 1 year ago on Hotwire :
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;
  }

}



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 %>


Maxence Pautre said about 1 year ago on Hotwire :
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 :)

David Kimura PRO said about 1 year ago on Hotwire :
  The controller action is set to 
redirect_to @ticket
We could work around that by preventing a redirect, but I just didn't in the episode.

Maxence Pautre said about 1 year ago on Hotwire :
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 :/

Login to Comment