0

I just joined this community and this is my first post.

I’ve been following several Hotwire tutorials and have built some prototypes with the technology. I’ve been impressed with how easy it is to get SPA-like responsiveness with much less complexity compared to JS front end frameworks.

However, I’ve found that when I try to translate the code and process from my prototypes to my existing Rails project it simply never works. What’s worse is that I don’t know why.

I’ve tried to write some tracer code with the following general process:

  1. Include the Hotwire gem
  2. Install Hotwire via terminal command
  3. Include broadcasts from the relevant model
  4. Apply a turbo_stream_from tag as a listener at the view level
  5. Include a turbo_frame_tag where you want the model data to be updated

This works reliably in my prototypes, but won’t work in my existing project. I’m suspecting it may be because my existing project isn’t using the latest version of Rails nor Ruby? (Upgrading has not proved easy either.) I am currently using Ruby version 2.7.1 and Rails version 6.0.2.

I know I should be offering up some of my project code, but I don't even know where to begin. If anyone would be able to offer me some guidance I’d REALLY appreciate it. Thank you!

EDIT: If it helps at all these are the kinds of terminal messages I'm getting when attempting to get Hotwire to autoupdate a list of model instances on an index page. It seems like the broadcast is working but my listener isn't?

Terminal messages when committing database changes

story index page

Code in story partial

code in my story model

EDIT: HTML Source via Chrome dev tools

Bitstack
  • 1
  • 1

2 Answers2

1

One thing that comes to mind is that you have a <turbo-frame-tag> inside of your stream response, why is that? I'm not sure if it's the cause of this not working but looking at their examples a stream template should not contain a frame tag, it should be something like this:

<turbo-stream action="append" target="dom_id">
    <template>
         Content to append to container designated with the dom_id.
    </template>
</turbo-stream>

Are you sure you have some div with id="stories" on the page ? that's the element the stream is looking for to be appended to; if it can't find one nothing will happen.

Joel Blum
  • 7,750
  • 10
  • 41
  • 60
  • Joel_Blum, thanks for taking the time to reply! It appears as though the turbo frame tags are setup correctly. I have updated the OP with a screenshot of the HTML source via Chrome dev tools. The new model instances are appending properly to the page. The problem is that they are only updating when I refresh the page. They are not updating automatically (without a page refresh) as would be expected with a proper Hotwire setup. Still at a loss for what to do... – Bitstack May 20 '21 at 01:12
  • Bummer so it's not that. I'm asking for a lot here but do u think u can create a small app on github recreating this problem and share it? I will be able to take a deeper look then. – Joel Blum May 20 '21 at 06:11
0

I wanted to circle back to this post to report that I didn't find a solution. This is despite spending over a week's worth of full-time hours trying to debug this problem.

In the end it was just faster and easier to start a new repo with the latest version of Ruby, Rails, and all of the gems. I proceeded to simply copy and paste as much code as I could into the new repo. Beyond that, I retraced my steps with my terminal commands and basically created a clone of the original app.

Lo and behold, it works.

The new app uses Ruby version 3.0.1 and Rails version 6.1.3.2. The old iteration of the app (the one that isn't working) runs on Ruby version 2.7.1 and Rails version 6.0.2.2.

Thank you to everyone who reached out to try and help me in this matter.

Bitstack
  • 1
  • 1