Comments (6)
Actually, nevermind. JSON doesn't work either when there is some delay added to the server response.
Edit: Just checked, no response sent from the server besides the 500 code is still not triggering the htmx:responseError or htmx:afterRequest events when there is delay introduced via the server. Am I doing something wrong?
document.body.addEventListener('htmx:beforeRequest', function(event) {
// Find all buttons that have a loading span inside them
any('button')?.forEach(button => {
if (button.querySelector('.loading-span')) {
console.log(`Disabling button from beforeRequest`);
console.log(button);
button.disabled = true;
}
});
});
document.body.addEventListener('htmx:responseError', function(event) {
console.log(`htmx:responseError`);
// Re-enable all buttons that have a loading span inside them
any('button')?.forEach(button => {
if (button.querySelector('.loading-span')) {
console.log(`Re-enabling button from responseError`);
console.log(button);
button.disabled = false;
}
});
});
document.body.addEventListener('htmx:afterRequest', function(event) {
console.log(`htmx:afterRequest`);
// Re-enable all buttons that have a loading span inside them
any('button')?.forEach(button => {
if (button.querySelector('.loading-span')) {
console.log(`Re-enabling button from afterRequest`);
console.log(button);
button.disabled = false;
}
});
});
<form
id="bulkUploadForm"
class="w-full flex flex-col gap-4"
hx-encoding="multipart/form-data"
hx-post="/s/monitoring/upload"
hx-target="body"
hx-swap="outerHTML"
hx-indicator=".loading-span"
>
from htmx.
Hey, could you provide a reproducible example (either a JSFiddle/Codepen, or a repo)?
A quick test on this JSFiddle seems to behave as expected, am I missing something?
Note that this code gets 404 errors and not 5xx, though 4xx and 5xx error code should get the same treatment, as they are both part of the same responseHandling
default config.
Lines 264 to 268 in bd2dc65
from htmx.
Dang it. My minimal example works fine. I'll have to keep digging into my code to find out where things are going wrong. I'll close this for now.
from htmx.
Reopening, I reproduced the issue in my minimal example and now I understand what's going wrong. Essentially, I have a form in a modal. That modal has it's own onclick handler on the submit button that starts an animation to fade out the modal. At this same time, the post request is made. However, there is a listener on animationend that removes the modal from the DOM. So, when the request comes back later, the event is processed by HTMX, however because the original node that issued the request is no longer in the DOM, a JS exception is thrown and JS stops working. Could this be handled more gracefully?
from htmx.
I made a workaround (not in the example repo) that waits to remove the element that triggered the request until there is no htmx-request class present. That unblocks me, but there may still be some improvements that could be made here, so leaving this open.
from htmx.
On a UX aspect, I would suggest waiting for the request to complete before dismissing the modal anyway; what if, for any reason, the request fails, wouldn't you want your modal to stay open with potentially an error message instead of having it dismissed, giving the user the illusion that everything went well even though it didn't?
from htmx.
Related Issues (20)
- Cannot use HX-* response headers with hx-boost? HOT 1
- Minor typo in docs for unminified version, read "2.02" missing a dot, should be "2.0.2" HOT 1
- Website search also shows v1 docs, which is not ideal HOT 13
- A nested hx-get works incorrectly HOT 6
- Change the version tags on npm HOT 2
- Better surfacing of extensions documentation: github not enough
- hx-swap-oob tag makes it's way to dom when it is not needed
- Exposing saveCurrentPageToHistory via js API
- Data URLs do not work when selfRequestsOnly is enabled. HOT 3
- Need help replicating: script-loading issue with nonce-based CSP HOT 6
- CSP issue unsafe-inline HOT 2
- Page title not restored correctly after back button in Firefox HOT 1
- htmx.ajax requests promise fulfilled too early HOT 1
- Example when searching a form (multiple fields) HOT 2
- Provide option on hx attributes for them not to be inherited HOT 1
- hx-headers inheritance cannot be disabled HOT 2
- View transitions and html dialog modals scrollbar flickering
- Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document' HOT 3
- Typescript: Configuration variables shouldn't be const HOT 6
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 htmx.