bigskysoftware / bigskysoftware/htmx

Form submit event doesn't execute AJAX request, but previous custom trigger event

Open
#2,266 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.