Comments (14)
deJong
commented on August 10, 2024
2
In addition to @jesperlandberg, there is always a hard refresh of the page once a link is loaded dynamically in the router view and clicked.
The transition works, but after about 100ms there is still a hard refresh.
Simple example:
<body>
<main router-wrapper>
<article router-view>
<ul class='nav'>
<li>
<a href='#'>link</a> <!-- works when page is loaded normally but not when loaded by router view --!>
<li>
</ul>
</article>
</main>
</body>
from highway.
Anthodpnt
commented on August 10, 2024
I'm not sure to understand.
When you click a link to a single page from Wordpress the window reload happens ?
Do you have any error in the console ?
From what I see in your code you don't have any transition provided to Highway.
This could lead to some sort of hard refresh.
If you don't see the window reloading on click on your links but only the URL being updated this means Highway does his job and you might just need to provide a default transition for your pages. Otherwise I'll need more information (logs, errors,...) in order to help you.
Thanks,
Anthodpnt
from highway.
Anthodpnt
commented on August 10, 2024
@jesperlandberg Do you have the router-wrapper as well in you HTML ?
from highway.
jesperlandberg
commented on August 10, 2024
@Anthodpnt the issue is with pages that have dynamic slugs, /:id for example. All pre defined pages works fine, but dynamic ones like blog posts and such seem to have issues.
The issue for me (and a friend @westwho is also trying out highway) seem to be that the second time we click a link to a blog post or dynamic page, a hard load of the pages happen.
"loads the site" -> clicks and enter blog post (works fine) -> goes back to home page -> clicks any blog post again (this time causing a hard load).
There are no errors show in the console or other logs.
I will try put it up on a test server for you to see later today.
Here is a little video showcasing the issue:
highway.zip
from highway.
Anthodpnt
commented on August 10, 2024
Thanks for your feedback!
I'll run some tests on my side and come back to you ASAP with a fix.
from highway.
jesperlandberg
commented on August 10, 2024
@deJong yeah, exactly the problem I tried to explain haha, you did it better=)
from highway.
Anthodpnt
commented on August 10, 2024
Ok I see, should be an issue with event binding.
Will check it and come back to you.
Thanks again !
from highway.
Anthodpnt
commented on August 10, 2024
Should be fixed in v1.3.4.
The binding of the click event on links was triggered too soon...
Can you please update your package and tell me if this solves your issue please ?
Thanks a lot,
Anthodpnt
from highway.
jesperlandberg
commented on August 10, 2024
@Anthodpnt I'm afraid the issue still remains for me=/
from highway.
Anthodpnt
commented on August 10, 2024
Did you update your package.json and node_modules, and rebuild your scripts ?
Links in router-view shouldn't trigger a hard refresh anymore...
The problem came from these lines:
// Now we show our content!
await this.To.show();
// Bind events
this.bind();The bind method in charge of handling the click event on links in the router-view was called before the show method of the new page's renderer was called so basically the links were not collected and the click event wasn't bound properly.
I updated the basic-setup example top make sure it was working by adding links in the router-view elements and it solved the issue explained by @deJong that is apparently the same as yours...
Anthodpnt
from highway.
jesperlandberg
commented on August 10, 2024
@Anthodpnt My mistake. I ran a command to update my package.json, which displayed 1.3.3 -> 1.3.4 ... but now I saw it didn't actually update my package file for some reason.
However, it seems to work fine now=) Thanks for the quick update!
from highway.
Anthodpnt
commented on August 10, 2024
Ok perfect !
I'll wait for @deJong news before closing this issue.
Thank you for your helpful feedback!
Anthodpnt
from highway.
deJong
commented on August 10, 2024
Works like a charm @Anthodpnt 🔥. Thanks for the quick solution.
from highway.
Anthodpnt
commented on August 10, 2024
Ok perfect! I'll close the issue then.
Don't hesitate to share Highway.
Anthodpnt
from highway.
Related Issues (20)
- Javascript functions doesn't works on the second time HOT 1
- Locomotive scroll not updating after page transition HOT 3
- I can't get the HIGHWAY.redirect() to work HOT 1
- Updating CSS for incoming page – (Highway maintains the outgoing page's CSS) HOT 5
- data-transition attribute no longer works in 2.2.2 HOT 2
- Update /refresh/bind links dynamically created with javascript HOT 1
- New href with highway HOT 13
- Adding additional headers to page requests
- Add index.d.ts file for better IDE typehinting
- back/forward buttons pressed during transition break the website
- Facebook Pixel Tracking HOT 3
- Fatal error on transition to mismatching URL scheme, while remaining on the same domain
- Can't work with CDN
- Improper use of DOM events
- Highway not working with DOM elements rendered by javascript HOT 1
- H.redirect always refresh page HOT 1
- Help
- H is undefined HOT 1
- Navigation with parameters and anchor not working
- Javascript not working after page transition HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from highway.