Turbo Stream adding on top of list instead of bottom

1

Am I right in assuming that the code below will add a new item created to the top of the list instead of the bottom?

<turbo-stream action="before" target="dom_id">
  <template>
    Content to place before the element designated with the dom_id.
  </template>
</turbo-stream>

If so, where would one use it in Ruby on Rails?

2

If you want to insert inside an <ul> as the first element. You would use prepend

<turbo-stream action="prepend" target="dom_id">
  <template>
    Content to place before the element designated with the dom_id.
  </template>
</turbo-stream>

<ul id="dom_id">
    will be inserted here
  <li />
</ul>

using before would cause it to be inserted prior to the element

 will be inserted here
<ul id="dom_id">
  <li />
</ul>
3

Thanks, but specifically for Ruby on Rails? The documentation for plain HTML is great, just not sure how to fit it in Rails.

Also, tried the prepend in Rails, it would add it to the top just to be moved to the bottom automatically a few seconds later in my create.turbo_stream.erb:

<%= turbo_stream.prepend "messages", @message %>

4

Okay, so the tutorial clearly removed what was in the create.turbo_stream.erb file! I did the same. Then to prepend the new message I changed my message.rb file in Models like so:

class Message < ApplicationRecord
  belongs_to :room
  broadcasts_to :room,  action: :prepend
end

Note the action: :prepend at the end of broadcasts_to.

1 Like