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

after fired turbo:render x-data not exists #36

Closed
zodman opened this issue May 4, 2021 · 12 comments
Closed

after fired turbo:render x-data not exists #36

zodman opened this issue May 4, 2021 · 12 comments

Comments

@zodman
Copy link

zodman commented May 4, 2021

Hi guys, thanks for the connector, but a found a little issue:

I had this form:
image
as you can see the alpinejs works at the beginning. when the form submitted is succeed turbo reload the complete page.

image
and the alpinejs not working ....

What happened ?

The turbo:render fired but not found any dom node related alpine document.querySelectorAll('[x-data]')

If I put on console the snippet

      window.Alpine.discoverUninitializedComponents((el) => {
        window.Alpine.initializeComponent(el)
      })

Now the alpinejs works...

TLDR; when turbo:render the ``document.querySelectorAll('[x-data]')` return empty and the window.Alpine.initializeComponent never happened.

image

@SimoTod
Copy link
Owner

SimoTod commented May 4, 2021

@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

@zodman
Copy link
Author

zodman commented May 4, 2021

yes "alpine-turbo-drive-adapter": "^1.0.4", i wil try to build on a gist ...

@SimoTod
Copy link
Owner

SimoTod commented May 4, 2021

@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)

@SimoTod
Copy link
Owner

SimoTod commented May 5, 2021

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.

@zodman
Copy link
Author

zodman commented May 7, 2021

@SimoTod do you have the link of the way to do it with stimulus ?

@SimoTod
Copy link
Owner

SimoTod commented May 9, 2021

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.

@zodman
Copy link
Author

zodman commented May 10, 2021

@SimoTod what about a timeout function for fired before the turbo:render finish

@SimoTod
Copy link
Owner

SimoTod commented May 10, 2021

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.

@SimoTod
Copy link
Owner

SimoTod commented May 18, 2021

@lobre
Copy link
Contributor

lobre commented Dec 3, 2021

Is this still an issue for you @zodman? The PR seems still on hold waiting for your feedback. Thanks.

@SimoTod
Copy link
Owner

SimoTod commented Dec 24, 2021

This seems to work how of the box with Alpine 3, can anyone confirm? (cc @lobre)

@lobre
Copy link
Contributor

lobre commented Dec 24, 2021

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.

@zodman zodman closed this as completed Jan 13, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants