Turbo stream append works but does not change web page. defaultPrevented is true on it's own on frame element

Question

I'm following the original tutorial of turbo at https://hotwired.dev/

and I got to the point of 5:30, and when he added turbo like this:

div to update

<div class="messages">
   <%= render @room.messages %>
</div>

def create
    @message = @room.messages.create!(message_params)

    respond_to do |format|
      format.turbo_stream
      format.html { redirect_to room_url(@room) }
    end
  end

and in messages/create.turbo_stream.erb <%= turbo_stream.append "messages", @message %>

I opened browser page reloaded it, made a new comment and it did not work. Nothing happens. I opened logs, they seem to be fine

22:37:26 web.1  | Started POST "/rooms/4/messages" for 127.0.0.1 at 2023-03-26 22:37:26 +0200
22:37:26 web.1  | Processing by MessagesController#create as TURBO_STREAM
22:37:26 web.1  |   Parameters: {"authenticity_token"=>"[FILTERED]", "message"=>{"conten"=>"123"}, "commit"=>"submit", "room_id"=>"4"}
22:37:26 web.1  |   Room Load (0.3ms)  SELECT "rooms".* FROM "rooms" WHERE "rooms"."id" = $1 LIMIT $2  [["id", 4], ["LIMIT", 1]]
22:37:26 web.1  |   ↳ app/controllers/messages_controller.rb:22:in `set_room'
22:37:26 web.1  |   TRANSACTION (0.2ms)  BEGIN
22:37:26 web.1  |   ↳ app/controllers/messages_controller.rb:10:in `create'
22:37:26 web.1  |   Message Create (0.4ms)  INSERT INTO "messages" ("room_id", "conten", "created_at", "updated_at") VALUES ($1, $2, $3, $4) RETURNING "id"  [["room_id", 4], ["conten", "123"], ["created_at", "2023-03-26 20:37:26.059675"], ["updated_at", "2023-03-26 20:37:26.059675"]]
22:37:26 web.1  |   ↳ app/controllers/messages_controller.rb:10:in `create'
22:37:26 web.1  |   TRANSACTION (3.1ms)  COMMIT
22:37:26 web.1  |   ↳ app/controllers/messages_controller.rb:10:in `create'
22:37:26 web.1  |   Rendering messages/create.turbo_stream.erb
22:37:26 web.1  |   Rendered messages/_message.html.erb (Duration: 0.1ms | Allocations: 34)
22:37:26 web.1  |   Rendered messages/create.turbo_stream.erb (Duration: 0.4ms | Allocations: 248)
22:37:26 web.1  | Completed 200 OK in 10ms (Views: 0.8ms | ActiveRecord: 4.0ms | Allocations: 3861)

and network tab in dev tools (using firefox, tested in IE and chrome) it looks perfectly fine with resopnce as expected

<turbo-stream action="append" target="messages"><template>  <p id="message_50">
    26 Mar 20:37: 123
  </p>
</template></turbo-stream>

I found out that something can be wrong with turbo side I added

document.addEventListener('turbo:before-fetch-response', function(event) {
  console.log("Turbo loaded", event)
})

Turbo loaded 
turbo:before-fetch-response { target: form, isTrusted: false, detail: {…}, srcElement: form
, currentTarget: HTMLDocument http://127.0.0.1:3000/rooms/4, eventPhase: 3, bubbles: true, cancelable: true, returnValue: true, defaultPrevented: false, … }
bubbles: true
cancelBubble: false
cancelable: true
composed: true
currentTarget: null
defaultPrevented: true

for some reason defaultPrevented: true is true you can notice, that from the dispatch to log, something prevented it.

I found it debugging it

 this.inspectFetchResponse = event => {
      const response = fetchResponseFromEvent(event);
      if (response && fetchResponseIsStream(response)) {
        event.preventDefault();
        this.receiveMessageResponse(response);
      }
    };

I have no idea what it do.

any idea what i'm doing wrong?

I tried to

format.turbo_stream { render turbo_stream: turbo_stream.append(:messages, partial: "message", locals: { message: @message }) }

but it didn't work I also changed id of div to something more uniq, didn't work either

anyone knows what's wrong with it?

turbo stream `target` must be an `id`, not a `class`, like this: `
` — Alex, Mar 27 '23 at 08:34
That is the solution! Thank you! Can you create an answer, so that I could mark it as the solution? — merof, Mar 27 '23 at 13:54

score 1 · Accepted Answer · answered Mar 28 '23 at 07:12

From the tutorial:

Turbo Streams introduces a <turbo-stream> element with seven basic actions: append, prepend, replace, update, remove, before, and after. With these actions, along with the target attribute specifying the ID of the element you want to operate on, you can encode all the mutations needed to refresh the page

and another reference:

Turbo Streams deliver page changes as fragments of HTML wrapped in self-executing <turbo-stream> elements. Each stream element specifies an action together with a target ID to declare what should happen to the HTML inside it

It means you need add id="messages" attribute to your <div class="messages"> to make it updatable

Turbo stream append works but does not change web page. defaultPrevented is true on it's own on frame element

1 Answers1