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.
Easy way to update <title> and other elements using Frames
See original GitHub issueHi, when using data-turbo-frame="some-frame" then <title> in <head> is not updated.
Also, I would like to update <meta name="csrf-token" content="..."> which changes on each request.
Also <link rel="canonical" href="https://example.com/some-page-xyz"> should be always updated.
Also <footer>Our site was visited {{ get_day_visits() }} times today.</footer> should be always updated.
And so on…
One workaround is to include <turbo-stream> to html template, however that duplicates elements and it is very verbose:
/* in head */
<meta id="csrf-token" name="csrf-token" content="{{ get_csrf_token() }}">
<title id="title">{{ get_title() }}</title>
/* in frame */
<turbo-stream action="update" target="csrf-token">
<template>{{ get_csrf_token() }}</template>
</turbo-stream>
<turbo-stream action="update" target="title">
<template>{{ get_title() }}</template>
</turbo-stream>
What is better solution to solve this problem using Frames?
I was thinking that a new attribute data-turbo-fresh could be created. It could always try to update that element (it should have id attribute) when new data arrive to client.
<title id="title" data-turbo-fresh>{{ get_title() }}</title>
So, title would be always updated/replaced if the new HTML data contains #title element. If the new HTML data does not contain matching element, then no change should be done.
Maybe method could be specified: data-turbo-fresh="update" or data-turbo-fresh="replace"
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:8
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
@kendagriff My response contains full
<html>content. The<title>is in<head>which is not wrapped in turbo-tag.If the crawler is advanced and renders JavaScript in a way that is indistinguishable from a web browser, then yes - it indexes wrong data. I am not aware that Turbo tries to detect JavaScript crawlers… However it is better to assume that crawler is as capable as web browser.
However, in principle, it does not matter - what matter is that a DOM as seen by anyone has WRONG canonical URL and WRONG content of some elements. As a result, crawler could index it wrong. And as a result, other JavaScript scripts could work with WRONG canonical URL and other WRONG elements.
So at the end of the day, it is a responsibility of web developers to make it work right. And it is responsibility of tool creators (Turbo and its community) to create useful tools. Maybe there is a way how to achieve this nicely, however I did not find it in docs. It can be done with Turbo Stream, but that is big overkill tool for such a basic solution to a problem that Frame usage creates.
I think that the proposed solution is small enough to not disrupt the Frame concept and useful enough to solve this problem of Frames.
Why?
It is similar to
data-turbo-track="reload", the difference is thatdata-turbo-track="reload"detects a change and then reloads the page whereasdata-turbo-freshwould update just one element.So maybe the
data-turbo-freshshould not exist and just new values should be added to existing API:data-turbo-track="update"anddata-turbo-track="replace"Such API would mean that three options exist:
data-turbo-track="reload"data-turbo-track="replace"data-turbo-track="update"However that maybe needs rethinking of the concept of
data-turbo-track="reload"because what defines a change while tracking? How deep in child elements it should check/track for a change? For the time this is rethinked, the original proposal ofdata-turbo-freshwith two values could be implemented - the thing is, the proposed solution does not track… It always makes sure that the element is fresh by replacing / updating it.