Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Preventing Reload of Permanent Element?

See original GitHub issue

Turbo is really great. Thanks for building it.

So, I coded up a video tray to persist across navigation. A user can click a button, which will load an iframe into a fixed positioned element that persists across navigation. This sort of works, but not quite. On navigation, the permanent element flashes in and out, and the iframe has to reload.

Here are some iterations I tried;

<html>
<head>
</head>
<body>

{{ rest of page }}

<div id="video-tray" turbo-data-permanent>
  {{ iframe dynamically added here }}
</div>
</body>
</html>

That has the problem with the iframe load on navigation. So I tried this:

<html>
<head>
</head>
<body>

<turbo-frame id="main_outlet" data-turbo-action="advance" >
  {{ rest of page }}
</turbo-frame>

<div id="video-tray"  turbo-data-permanent>
  {{ iframe dynamically added here }}
</div>
</body>
</html>

This solves the problem with the video tray! It does not reload any more on navigation.

HOWEVER, a whole lot of other far worse problems arise. The head section is not merged on navigation. This doesn’t end up as a true solution.

So we can try this:

<html>
<head>
</head>
<body>

<turbo-frame id="main_outlet" data-turbo-action="advance" target="_top">
  {{ rest of page }}
</turbo-frame>

<div id="video-tray"  turbo-data-permanent>
  {{ iframe dynamically added here }}
</div>
</body>
</html>

This ends up being identical to the first attempt. There is a reload flash on navigation.

So, how can this problem be solved without creating new problems?

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6

github_iconTop GitHub Comments

3reactions
rainerborenecommented, Dec 17, 2021

You can solve this problem by wrapping your app into another root element instead of the body element. I’m currently using this monkey patch to change the body reference internally. Here’s the code:

import { PageRenderer } from "@hotwired/turbo"

Object.assign(PageRenderer.prototype, {
  assignNewBody() {
    const container = document.querySelector("#app")
    const newContainer = this.newElement.querySelector("#app")

    if (container && newContainer) {
      container.replaceWith(newContainer)
    } else {
      document.body.replaceWith(this.newElement)
    }
  }
})

And markup example:

<html>
  <head>
    <!-- ... -->
  </head>
  <body>
    <div id="app">
    </div>

    <div id="persisted-video">
    </div>
  </body>
</html>
0reactions
swamidasscommented, Dec 19, 2021

@dhh @sstephenson @ctrochalakis would you be interested in a PR that makes this part of Turbo as an option?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Preventing Reload of Permanent Element? - Hotwire Discussion
This sort of works, but not quite. On navigation, the permanent element flashes in and out, and the iframe has to reload. Here...
Read more >
How to stop reload while using inspect element - Stack Overflow
Right click on the element of interest then click inspect. Navigate to the Sources tab. Click the pause button (or press F8 or...
Read more >
How to Disable Cache & Hard Refresh a Specific Site in Chrome
Follow these steps to bypass cache and hard refresh a specific website. 1. Open Inspect Element (Developer Tools Console). Right click and ...
Read more >
How to prevent the reloading of the whole page when I let the ...
I am building a page which let the user to run a query against my database, once I have the data I would...
Read more >
How to Disable Web Page Auto-Refresh (All Major Browsers)
When “Auto Discardable” is active, any site that is disabled will not refresh. The caveat is that these settings are not permanent.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Double fetch requests for eager-loaded frames

Next page

Turbo frame not replaced when at root of an HTML fragment