itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-10-02 07:21:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #225 from ChexWarrior/224-unlock-request-after-xhr-abort

Browse Source 
End request lock when xmlHttpRequest is aborted

awesome, thank you!
This commit is contained in:
1cg 2020-11-15 19:22:20 -07:00 committed by GitHub
commit fa1db3b290
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 43 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/htmx.js
View File

@ -2050,6 +2050,10 @@ return (function () {
triggerErrorEvent(elt, 'htmx:sendError', eventDetail);
endRequestLock();
}
xhr.onabort = function() {
removeRequestIndicatorClasses(elt);
endRequestLock();
}
if(!triggerEvent(elt, 'htmx:beforeRequest', eventDetail)) return endRequestLock();
addRequestIndicatorClasses(elt);

3
test/index.html
View File

@ -51,6 +51,9 @@
<li>
<a href="manual/sse-settle.html">SSE - Settling</a>
</li>
<li>
<a href="manual/aborting-request.html">Aborting Request Test</a>
</li>
</ul>
<h2>Mocha Test Suite</h2>

36
test/manual/aborting-request.html Normal file
View File

@ -0,0 +1,36 @@
<!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>