bigskysoftware / bigskysoftware/htmx
Form submit event doesn't execute AJAX request, but previous custom trigger event
- Dominant language
- JavaScript
- Stars
- 49.4k
- Forks
- 1.7k
- Avg merge
- 3d 22h
- Merged PRs (30d)
- 30
Description
Hi all,
I think I may have found a bug, here are the necessary steps to reproduce it:
1. I have a table, which executes an event handler if I click on a specific `td` element.
2. This event handler sends a custom htmx trigger via the `htmx.trigger` API.
3. The target element of said trigger then fetches a form via a GET request.
4. The form has a submit button which doesn't issue an AJAX request on submit, but retriggers the custom event again.
The version of htmx I am using is `v1.9.10`
Here is the required code:
```html
Id
Value
1
Some value
2
Another value
function sendTrigger(id) {
htmx.trigger("#theDialog", "getForm", { id: id });
const dialog = document.getElementById("theDialog");
if (dialog) dialog.showModal();
}
```
Server response from GET request to `/form`:
```html
Enter something
```
The following stacktrace gets print to the console:
```console
Uncaught TypeError: event.detail is undefined
anonymous http://localhost:3001/static/htmx.js line 2790 > Function:3
varsValues http://localhost:3001/static/htmx.js:2790
maybeEval http://localhost:3001/static/htmx.js:2807
getValuesForElement http://localhost:3001/static/htmx.js:2790
getValuesForElement http://localhost:3001/static/htmx.js:2802
getHXValsForElement http://localhost:3001/static/htmx.js:2829
getExpressionVars http://localhost:3001/static/htmx.js:2837
issueAjaxRequest http://localhost:3001/static/htmx.js:3092
processVerbs http://localhost:3001/static/htmx.js:1790
eventListener http://localhost:3001/static/htmx.js:1496
addEventListener http://localhost:3001/static/htmx.js:1508
forEach http://localhost:3001/static/htmx.js:383
addEventListener http://localhost:3001/static/htmx.js:1434
addTriggerHandler http://localhost:3001/static/htmx.js:1832
processVerbs http://localhost:3001/static/htmx.js:1785
processVerbs http://localhost:3001/static/htmx.js:1784
forEach http://localhost:3001/static/htmx.js:383
processVerbs http://localhost:3001/static/htmx.js:1778
initNode http://localhost:3001/static/htmx.js:2031
processNode http://localhost:3001/static/htmx.js:2070
makeAjaxLoadTask http://localhost:3001/static/htmx.js:876
doSettle http://localhost:3001/static/htmx.js:3521
forEach http://localhost:3001/static/htmx.js:383
doSettle http://localhost:3001/static/htmx.js:3520
setTimeout handler*doSwap http://localhost:3001/static/htmx.js:3569
handleAjaxResponse http://localhost:3001/static/htmx.js:3606
onload http://localhost:3001/static/htmx.js:3209
issueAjaxRequest http://localhost:3001/static/htmx.js:3205
processVerbs http://localhost:3001/static/htmx.js:1790
eventListener http://localhost:3001/static/htmx.js:1496
triggerEvent http://localhost:3001/static/htmx.js:2145
sendTrigger http://localhost:3001/:29
onclick http://localhost:3001/:1
```
In the network tab I can't see an AJAX request issued to `/some/endpoint`.
If I move the `hx-post` attribute from the form element to the `` element, the AJAX request gets triggered correctly.
Let me know if you need anything else.
Oh, and a big thanks for creating such an awesome piece of software - as a backend developer, I can't appreciate it enough.
Greetings.
Contributor guide
Assessment
This issue has not been assessed yet.