Comments (12)
I was just asking news before choosing turbo + alpine for a project (to be sure it was mature enough), so I was not exactly suffering from this problem.
Maybe @zodman can confirm? Otherwise, as you said it seems OK to me with the new version at least.
from alpine-turbo-drive-adapter.
@zodman Could you let me know if it was working with 1.0.4, please?
I recently switched to turbo:render from turbo:load to address some issues when forms returns a 423 response and I just want to make sure it's not a regression.
If you can also post a minimal example to reproduce (it's time consuming and error prone to copy the html from a gif), it would help a lot
from alpine-turbo-drive-adapter.
yes "alpine-turbo-drive-adapter": "^1.0.4",
i wil try to build on a gist ...
from alpine-turbo-drive-adapter.
@zodman Mmh, so it was working correctly with 1.0.4. Interesting.
I just need the HTML of the page (possibly only the relevant bits) in a comment here otherwise it's a bit of a nightmare to get it from the gif you posted.
You can see a good example here -> #29 (comment)
from alpine-turbo-drive-adapter.
So... the issue is because you use a turbo-frame with an src attribute which is loaded after turbo triggered turbo:render
and even turbo:load
. 1.0.4 was briefly working as a side effect of a different fix because I had put an additional refresh 2 frames after any form was submitted but that, for instance, wouldn't work with normal links triggering a turbo-frame update.
Unfortunately, it doesn't seem like there is an event to capture when a turbo frame loads. Looking at the turbo repo, there are people asking for it but the maintainers don't seem to be keen on introducing new events because they are ways to do it with Stimulus and they are not too interested in supporting different frameworks
I'll keep digging into it but you might need to manually trigger the refresh for now.
from alpine-turbo-drive-adapter.
@SimoTod do you have the link of the way to do it with stimulus ?
from alpine-turbo-drive-adapter.
I don't have a link, unfortunately. I saw someone suggesting it on a turbo bug. I'm going to work on a solution but it will likely to be end of next week.
from alpine-turbo-drive-adapter.
@SimoTod what about a timeout function for fired before the turbo:render finish
from alpine-turbo-drive-adapter.
I'd rather avoid time based behaviors because they feel hacky, they are hard to test and they are even harder to debug when you have an issue. For example, a lazy loaded turbo frame is an http request so, on slow connection, it might take longer then the arbitrary timeout we pick. I'll implement something based on mutation observers.
from alpine-turbo-drive-adapter.
Hi @zodman could you test https://cdn.jsdelivr.net/gh/simotod/alpine-turbo-drive-adapter@feature/turbo-frame-support/dist/alpine-turbo-drive-adapter.min.js and let me know if it fixes your issue? Thanks
from alpine-turbo-drive-adapter.
Is this still an issue for you @zodman? The PR seems still on hold waiting for your feedback. Thanks.
from alpine-turbo-drive-adapter.
This seems to work how of the box with Alpine 3, can anyone confirm? (cc @lobre)
from alpine-turbo-drive-adapter.
Related Issues (20)
- Missing readme
- Disappearing template loop items HOT 7
- x-for elements disappearing after Livewire rerender HOT 11
- v0.2.0 - x-for loop items disappear HOT 3
- Use Alpine.clone to avoid existing component being reset when navigating using the history. HOT 7
- IE 11 support HOT 4
- Turbo Drive compatibility HOT 12
- Issue with data-turbolinks-permanent combined with x-cloak HOT 3
- fail when render status: :unprocessable_entity HOT 32
- Figure out if the plugin is testable somehow HOT 9
- JS file always runs after the turbo:load event, causing x-data to throw a ReferenceError on first navigation HOT 6
- Turbo stream - not initialising HOT 5
- Currently Breaks with Alpine.js & Livewire HOT 14
- Add github action to publish the library on npm when a new version is tagged. HOT 1
- Alpine v3 compatability HOT 36
- How can I keep the cdn link updated HOT 5
- Necessary if caching disabled? HOT 1
- Add npm instructions HOT 3
- Components hidden by default, such as mobile navigation menus, get cached and cause flickering when navigating between pages. HOT 19
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 alpine-turbo-drive-adapter.