Comments (8)
Thanks for the quick feedback!
Sorry, I think you might have found a loophole in v0.5. x-target
was intended to only work on <a>
and <form>
elements, but I think there was a regression recently that allowed it to unintentionally work on <button>
s too. 😓
I'm assuming that the <Button>
component in your project compiles down to a plain <button>
? If that's not the case, let me know, but switching to an <a href="...">
or wrapping that button in a <form action="...">
should make it work again. We support only those two elements so that they can gracefully degrade without JavaScript.
from alpine-ajax.
I'm afraid it's a , not button!
cast2.mp4
from alpine-ajax.
Ok, thanks for the clarification. I'm wondering if the link click
events aren't bubbling up to document
in Astro for some reason. I created a "debug" branch that logs a bunch of debug messages to the console. Would you mind trying it out and taking a look at the results:
npm install "https://github.com/imacrayon/alpine-ajax.git#debug"
You should see output in the console when loading the page and clicking a link like this:
[x-target] (Element)
Event: "click" captured
Requesting [...arguments]
Rendering [..arguments]
Thanks for your help!
from alpine-ajax.
Hey, so sorry for the delay, got drowned in work. Anyway, here's what the console said:
[astro] Prefetching http://localhost:8002/partials/clicked/?id=tgt-1 with fetch
@imacrayon_alpine-ajax.js?v=1c33ba91:14 Event: "click" captured
Abort: Insignificant click event
Navigated to http://localhost:8002/partials/clicked/?id=tgt-1
Here's the code:
https://github.com/vladstudio/aaui/tree/main/src/pages
from alpine-ajax.
Also if I'm the only one experiencing this, I think you can safely ignore the bug. I'm not (yet) using this code in any real product, so the impact is minimal.
from alpine-ajax.
No worries! I got this spun up on my machine just now, I'm gonna try to figure out what's going on. Thanks for sharing the repo.
from alpine-ajax.
Ok, so the problem is caused by Astro's View Transitions feature, specifically, this line. When view transitions are enabled, the framework listens for link clicks and navigates to the next page before Alpine AJAX has a chance to perform an AJAX request.
If you remove <ViewTransitions />
in Layout.astro
things will start working again.
In v0.5 Alpine AJAX registered link click listeners before Astro's click listeners, but in v0.6 we deferred the click listeners so that other libraries have a chance to handle the click event before Alpine AJAX handles it.
We made the change to event listeners in v0.6 to support some future client-side routing features, but I might have to rethink that approach to make sure we can stay compatible with frameworks like Astro...
from alpine-ajax.
good catch! I will disable view transitions meanwhile.
from alpine-ajax.
Related Issues (20)
- Add support for `autofocus`
- `MissingIdError` error thrown when using `x-target.replace` without an ID HOT 2
- Calling $ajax from code outside of Alpine.js HOT 5
- Use ajax:success to preload assets (js) HOT 3
- Could not find a declaration file for module '@imacrayon/alpine-ajax' HOT 3
- Any way to make incoming html replace the innerHTML of target instead of the whole target? HOT 3
- Uncaught (in promise) Missing Target: #[object HTMLButtonElement] was not found in the current document. HOT 5
- SSE and websockets support HOT 4
- Using x-morph, new Alpine components don't initialize HOT 5
- Apply different merge strategy per target HOT 4
- Polling support? HOT 2
- Dynamically assigning a value for x-target not working, but works if assigning it statically. HOT 4
- Filterable content + infinite scroll: how to set x-merge attribute HOT 3
- x-target response code modifiers HOT 2
- Question: Fetch and headers HOT 2
- Global event listeners HOT 4
- x-sync deletes div if no matching id in response HOT 1
- Redirect on successful form submission HOT 8
- Website examples are currently not working 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 alpine-ajax.