Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Duplicate examples in "How'd You Get Here?"? #10

Open
raghubetina opened this issue Sep 29, 2024 · 1 comment
Open

Duplicate examples in "How'd You Get Here?"? #10

raghubetina opened this issue Sep 29, 2024 · 1 comment

Comments

@raghubetina
Copy link

I've followed the instructions in the Hotwire Native iOS: Getting Started guide, and am playing around with the demo app.

In Basic Features > Navigate to another page > How'd You Get Here?, are the last two examples duplicates? They both seem to be showing the same thing (refreshing programmatically with replace):

Screenshot 2024-09-29 at 4 12 41 PM
@leonvogt
Copy link

The outcome of both actions is identical, but the methods used to trigger the page refresh differ:

  • The "Refresh" button performs a replace visit by linking to the same page with data-turbo-action="replace", which triggers a Turbo morph.
  • The "Refresh programmatically" button calls the JavaScript function Turbo.session.refresh(document.baseURI), which also triggers a Turbo morph.
<p class="space --bottom-s">This performs a <code>replace</code> visit to the current page, refreshing its content with morphing:</p>
<p><a href="/one" class="button@native" data-turbo-action="replace">Refresh</a></p>

<p class="space --bottom-s">This programatically refreshes the current page, performing a <code>replace</code> visit and refreshing its content with morphing:</p>
<p><a id="refresh" class="button@native" data-turbo-action="replace">Refresh programatically</a></p>

<footer class="text --size-s --color-subtle space --top-xxl">
  Rendered <%- new Date().toLocaleString() %> via Turbo 8
</footer>

<script>
  document.getElementById("refresh").addEventListener("click", () => {
    Turbo.session.refresh(document.baseURI)
  })
</script>

I guess the demo just wanna illustrates that both approaches can refresh the page content through morphing, but one uses an HTML anchor link, while the other relies on JavaScript to achieve the same result.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

2 participants