mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-09-28 13:31:06 +00:00
36 lines
1.0 KiB
HTML
36 lines
1.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Aborting Request Event Test</title>
|
|
</head>
|
|
<body style="padding: 20px; font-family: sans-serif;">
|
|
<h1>Aborting Request Event Tests</h1>
|
|
<p>Aborting a request during an HTMX event should not prevent future events from firing.</p>
|
|
<label for="block">Block Request?</label>
|
|
<input id="block" type="checkbox" checked>
|
|
<br><br>
|
|
<button hx-get="https://httpbin.org/html"
|
|
hx-target="#target">
|
|
Send Request
|
|
</button>
|
|
<br><br>
|
|
<h3>Event Messages:</h3>
|
|
<div id="target"></div>
|
|
<script src="../../src/htmx.js"></script>
|
|
<script>
|
|
var btn = document.querySelector('button');
|
|
var checkbox = document.querySelector('input');
|
|
var target = document.querySelector('#target');
|
|
|
|
btn.addEventListener('htmx:beforeRequest', function(e) {
|
|
var messages = target.innerHTML;
|
|
target.innerHTML = messages + "<p>Another Message!</p>";
|
|
|
|
if (checkbox.checked) {
|
|
e.detail.xhr.abort();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |