# Why is it replacing the whole page and not just the turbo\_frame\_tag

**URL:** <https://discuss.hotwired.dev/t/why-is-it-replacing-the-whole-page-and-not-just-the-turbo-frame-tag/2451>\
**Category:** General\
**Created:** [March 8, 2021, 2:03am UTC](https://discuss.hotwired.dev/t/why-is-it-replacing-the-whole-page-and-not-just-the-turbo-frame-tag/2451 "2021-03-08T02:03:14Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![dazza](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/dazza/32/1439_2.png) [@dazza](https://discuss.hotwired.dev/u/dazza)\
**Post date:** [March 8, 2021, 2:03am UTC](https://discuss.hotwired.dev/t/why-is-it-replacing-the-whole-page-and-not-just-the-turbo-frame-tag/2451/1 "2021-03-08T02:03:14Z")

</div>

I step outside of the world for a few days and things seem to break.

I can’t seem to find why the following isn’t replacing just the turbo\_frame\_tag on my page. The button\_to is calling the method, but won’t work in the way I’m expecting. For some reason, if it works at all, it replaces the whole page and not just the content of the turbo\_frame. And it doesn’t show start the video at the right time code. Any help you can provide would be greatly appreciated.

**Button\_to code:**

`<%= button_to changetime_video_path(time: key), method: :post, form: {data: {'turbo-frame': 'showvideo'}}, class: "text-sm text-left text-orange-500 hover:text-white" do %><%= value %><% end %>`

**changetime method**

```
  def changetime
    # Designed to load the video at the timecode
    time = params[:time]
    @newtime = time.split(':').map(&:to_i).inject(0) { |a, b| a * 60 + b }
  end

```

**changetime.html.erb**

```
<%= turbo_frame_tag "showvideo" do %>
  <% if !@video.wis_slug.nil? %>
    <div class="wistia_embed wistia_async_<%= @video.wis_slug %>">&nbsp;</div>
  <% else %>
    <div class="aspect-w-16 aspect-h-9">
      <iframe src="https://www.youtube.com/embed/<%= @video.youtube_slug %>?start=<%= @newtime %>&enablejsapi=1&rel=0&autoplay=1&modestbranding=1&cc_load_policy=0" allow="autoplay; accelerometer; gyroscope" frameborder="0" allowfullscreen></iframe>
    </div>
  <% end %>
<% end %>

```

**UPDATE: OK. Using Chrome, when I Inspect, it seems to replace the whole page, but with the correct video timecode, but for some reason it’s not auto playing. When I turn off the Inspect mode, it auto plays. HOWEVER … it still seems to be loading the whole page?? I thought Hotwire stopped that and only did the part it needed. Or do I keep needing to put layout: false in my methods?**

**Whatever is happening is stopping it from working on mobiles or iPads etc**

I really don’t understand why it’s calling the method but returning the whole page when I’ve told it to only look at the “showvideo” section of the page.

I’ve checked the HTML it’s generating, and that seems to be fine.

Isn’t it supposed to just return the HTML in the changetime.html.erb file?

Thanks in advance. This is driving me to drink!

---

<div class="post-metadata">

**Author:** ![BryTai](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/brytai/32/1313_2.png) [@BryTai](https://discuss.hotwired.dev/u/BryTai)\
**Post date:** [March 8, 2021, 7:28pm UTC](https://discuss.hotwired.dev/t/why-is-it-replacing-the-whole-page-and-not-just-the-turbo-frame-tag/2451/2 "2021-03-08T19:28:02Z")

</div>

Try changing your button\_to data {“turbo-frame”} to

`<%= button_to changetime_video_path(time: key), method: :post, form: {data: { turbo_frame: 'showvideo'}}, class: "text-sm text-left text-orange-500 hover:text-white" do %><%= value %><% end %>`

The button\_/link\_to helpers convert the underscores to dashes for data attributes

---

<div class="post-metadata">

**Author:** ![dazza](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/dazza/32/1439_2.png) [@dazza](https://discuss.hotwired.dev/u/dazza)\
**Post date:** [March 9, 2021, 6:27am UTC](https://discuss.hotwired.dev/t/why-is-it-replacing-the-whole-page-and-not-just-the-turbo-frame-tag/2451/3 "2021-03-09T06:27:47Z")

</div>

@BryTai Thanks for your suggestion.

Sadly … no change to the operation. The whole page seems to be refreshing rather than just the turbo frame section I was hoping to change. This is really frustrating as I’m sure other sections of the site are working as they should.

---

<div class="post-metadata">

**Author:** ![BryTai](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/brytai/32/1313_2.png) [@BryTai](https://discuss.hotwired.dev/u/BryTai)\
**Post date:** [March 9, 2021, 3:12pm UTC](https://discuss.hotwired.dev/t/why-is-it-replacing-the-whole-page-and-not-just-the-turbo-frame-tag/2451/4 "2021-03-09T15:12:19Z")

</div>

Hmm, it may be because your `changetime` method isnt standard CRUD. Try adding a

```
respond_to do |format|
  format.html {}
end

```

to the method and see if that works.

To go a step further, you may need to change your changetime.html.erb to changetime.turbo\_stream.erb and add the `format.turbo_stream` to your respond\_to

---

<div class="post-metadata">

**Author:** ![robbevp](https://avatars.discourse-cdn.com/v4/letter/r/50afbb/32.png) [@robbevp](https://discuss.hotwired.dev/u/robbevp)\
**Post date:** [March 9, 2021, 7:38pm UTC](https://discuss.hotwired.dev/t/why-is-it-replacing-the-whole-page-and-not-just-the-turbo-frame-tag/2451/5 "2021-03-09T19:38:26Z")

</div>

> [@dazza](#):
>
> `<%= button_to changetime_video_path(time: key), method: :post, form: {data: {'turbo-frame': 'showvideo'}}, class: "text-sm text-left text-orange-500 hover:text-white" do %><%= value %><% end %>`

I think your missing a target here, that will tell turbo which frame you want to replace: [https://turbo.hotwire.dev/reference/frames#html-attributes](https://turbo.hotwire.dev/reference/frames#html-attributes)

In my own application I have links like: `<%= link_to t('.edit'), edit_category_path(@category), class: 'btn btn-primary', data: { 'turbo-frame': "edit_category_#{@category.id}" }, target: 'modal' %>`

---

<div class="post-metadata">

**Author:** ![dazza](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/dazza/32/1439_2.png) [@dazza](https://discuss.hotwired.dev/u/dazza)\
**Post date:** [March 10, 2021, 7:24am UTC](https://discuss.hotwired.dev/t/why-is-it-replacing-the-whole-page-and-not-just-the-turbo-frame-tag/2451/6 "2021-03-10T07:24:00Z")

</div>

Hi again @BryTai

Still no change. The whole page is being rendered when I add the respond\_to.

Could it be that the button\_to is being called inside a different turbo\_frame? Would this make a difference?

---

<div class="post-metadata">

**Author:** ![dazza](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/dazza/32/1439_2.png) [@dazza](https://discuss.hotwired.dev/u/dazza)\
**Post date:** [March 10, 2021, 7:24am UTC](https://discuss.hotwired.dev/t/why-is-it-replacing-the-whole-page-and-not-just-the-turbo-frame-tag/2451/7 "2021-03-10T07:24:58Z")

</div>

Hi @robbevp

Thanks for your suggestion. Doesn’t the form: {data: {‘turbo-frame’: ‘showvideo’}} tell the controller what the target is?

I made the change and it doesn’t affect anything. The whole page still renders.

---

<div class="post-metadata">

**Author:** ![BryTai](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/brytai/32/1313_2.png) [@BryTai](https://discuss.hotwired.dev/u/BryTai)\
**Post date:** [March 10, 2021, 4:07pm UTC](https://discuss.hotwired.dev/t/why-is-it-replacing-the-whole-page-and-not-just-the-turbo-frame-tag/2451/8 "2021-03-10T16:07:07Z")

</div>

It shouldn’t matter if the frame is inside a separate frame.  
Is your `changetime.html.erb` a partial? Are you able post the code for the view that houses the button and changetime view?  
Also, what does the controller that your changetime method is part of look like?

---

<div class="post-metadata">

**Author:** ![dazza](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/dazza/32/1439_2.png) [@dazza](https://discuss.hotwired.dev/u/dazza)\
**Post date:** [March 11, 2021, 7:56am UTC](https://discuss.hotwired.dev/t/why-is-it-replacing-the-whole-page-and-not-just-the-turbo-frame-tag/2451/9 "2021-03-11T07:56:54Z")

</div>

@BryTai

The `changetime.html.erb` file isn’t a partial.

There are two divs. One which holds a video. One which holds a list of timecodes which, when clicked should change the video being shown to play from the selected timecode.

This is the code in `show.html.erb` which is the view which uses the `turbo_frame_tag` … which is the same as `changetime.html.erb`.

```
<%= turbo_frame_tag "showvideo" do %>
    <% if !@video.wis_slug.nil? %>
      <div class="wistia_embed wistia_async_<%= @video.wis_slug %>">&nbsp;</div>
        <% else %>
      <div class="aspect-w-16 aspect-h-9">
        <iframe src="https://www.youtube.com/embed/<%= @video.youtube_slug %>?enablejsapi=1&rel=0&autoplay=1&modestbranding=1&cc_load_policy=0" allow="autoplay; accelerometer; gyroscope" frameborder="0" allowfullscreen></iframe>
      </div>
    <% end %>
<% end %>

```

The other code which creates the `button_to` is also contained in `show.html.erb` a little further down:

```
<%= turbo_frame_tag "updatetimecode" do %>
    <%= render partial: 'showtimecodes' %>
<% end %>

```

This calls the partial `showtimecodes` where each timecode has the respective button\_to link to run the `changetime` method and hence the reload of the `showvideo` tag.

```
<% @timecodes.each do |key, value| %>
  <div id="timecodes" class="flex flex-row">
    <div class="w-1/5">
      <div class="text-sm text-white"><%= key %></div>
    </div>
    <div class="flex flex-row justify-between w-4/5 px-2">
      <div>
        <%= button_to changetime_video_path(time: key), method: :post, form: {data: { turbo_frame: 'showvideo'}}, class: "text-sm text-left text-orange-500 hover:text-white" do %>
          <%= value %>
        <% end %>
      </div>
      <div>
        <% if current_user %>
          <% if current_user.admin? %>
            <%= button_to delete_timecode_video_path(time: key), method: :post, class: "text-sm text-orange-500 hover:text-white" do %>
              &nbsp;[x]
            <% end %>
          <% end %>
        <% end %>
      </div>
    </div>
  </div>
<% end %>

```

The controller (with a lot missed out) looks like:

```
require 'securerandom'
class VideosController < ApplicationController
  include ApplicationHelper
  before_action :authenticate_user!,
                only: %i[updateyoutubeslug update new create make_paid changetime make_video_courses addtimecode
                         update_video]
  before_action :set_video, only: %i[show update changetime addtimecode dislike like delete_timecode]
  
  def changetime
    # Designed to load the video at the timecode
    logger.warn("I am here trying to change the time ...")
    time = params[:time]
    @newtime = time.split(':').map(&:to_i).inject(0) { |a, b| a * 60 + b }
  end

  ...

  end

```

Thanks again for any help you can give.

---

<div class="post-metadata">

**Author:** ![BryTai](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/brytai/32/1313_2.png) [@BryTai](https://discuss.hotwired.dev/u/BryTai)\
**Post date:** [March 11, 2021, 6:36pm UTC](https://discuss.hotwired.dev/t/why-is-it-replacing-the-whole-page-and-not-just-the-turbo-frame-tag/2451/10 "2021-03-11T18:36:13Z")

</div>

OK cool, so if I’m understanding correctly, you have a `show.html.erb` and a `changetime.html.erb` file, both of which have the “showvideo” turbo frame.

If that is the case, you could rename your `changetime.html.erb` to `changetime.turbo_stream.erb` and in the code, change it to be

```
<%= turbo_stream.replace "showvideo" do %>
<%= turbo_frame_tag "showvideo" do %>
    <% if !@video.wis_slug.nil? %>
      <div class="wistia_embed wistia_async_<%= @video.wis_slug %>">&nbsp;</div>
        <% else %>
      <div class="aspect-w-16 aspect-h-9">
        <iframe src="https://www.youtube.com/embed/<%= @video.youtube_slug %>?enablejsapi=1&rel=0&autoplay=1&modestbranding=1&cc_load_policy=0" allow="autoplay; accelerometer; gyroscope" frameborder="0" allowfullscreen></iframe>
      </div>
    <% end %>
<% end %>
<% end %> 

```

emphasis on the `turbo_stream.replace`

in your controller, add

```
respond_to do |format|
  format.turbo_stream {}
end

```

at the end of your `changetime` method

When you user clicks the time code, the changetime method will do its thing and look for the `changetime.turbo_stream.erb` file.  
That file will then issue the `turbo_stream.replace` on your “show video” frame, replacing it only in your `show.html.erb`.

I’m guessing the reason it doesn’t update the turbo\_frame with a standard html format is because its a POST request. If you were doing a GET request such as changing a tab cont etc. you wouldn’t need the `format.turbo_stream`.

---

<div class="post-metadata">

**Author:** ![dazza](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/dazza/32/1439_2.png) [@dazza](https://discuss.hotwired.dev/u/dazza)\
**Post date:** [March 14, 2021, 10:59am UTC](https://discuss.hotwired.dev/t/why-is-it-replacing-the-whole-page-and-not-just-the-turbo-frame-tag/2451/11 "2021-03-14T10:59:25Z")

</div>

@BryTai Thanks so much! That seems to be working … I would still dearly love to know why the other way wasn’t working … but … for now … I’ll just leave it alone!

---

<div class="post-metadata">

**Author:** ![BryTai](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/brytai/32/1313_2.png) [@BryTai](https://discuss.hotwired.dev/u/BryTai)\
**Post date:** [March 17, 2021, 4:33pm UTC](https://discuss.hotwired.dev/t/why-is-it-replacing-the-whole-page-and-not-just-the-turbo-frame-tag/2451/12 "2021-03-17T16:33:03Z")

</div>

I’m pretty sure its because you `button_to` is issuing a POST request and therefore not rendering a page directly like it would with a GET, instead it is doing a separate GET redirect after processing in you controller which is negating the turbo functionality and just loading a page refresh.

---

<div class="post-metadata">

**Author:** ![leehericks](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/leehericks/32/1053_2.png) [@leehericks](https://discuss.hotwired.dev/u/leehericks)\
**Post date:** [March 18, 2021, 10:04am UTC](https://discuss.hotwired.dev/t/why-is-it-replacing-the-whole-page-and-not-just-the-turbo-frame-tag/2451/13 "2021-03-18T10:04:20Z")

</div>

You shouldn’t need streams at all for this.

Do you show more than one video on the same page?

You should be doing:

`<%= turbo_frame_tag dom_id(@video) do %>`

To make sure you never have more than one frame with the same id.

If Turbo got multiple frames with that same id it would have no choice but to reload the page I think.