[FIXED] Why is my hx-trigger not triggered using from: <css selector>?

Issue

I have a button that I want to send two requests to the server when clicking. The setup is like this:

<button id="add-item" hx-get="some-url" hx-trigger="click" hx-target="#item-form" hx-swap="beforeend" type="button">Add item</button>

<br>
<div hx-get="some-other-url" hx-trigger="from: #add-item" hx-swap="beforeend">
        
</div>

I have tried using hx-trigger="click from: #add-item but that does not work either.

The first request sent by add-item is fetched from the server correctly, but the second one from the div is never sent at all. When changing the trigger for the div to something like hx-trigger="click", it works (also needing some content inside it to click).

Is there soemthing wrong with the syntax or why would this not work?

I have imported HTMX like so: <script src="https://unpkg.com/[email protected]" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script>

Any help would be appreciated.

Solution

This fixed the problem:

hx-trigger="from: #add-item" 

replaced with

hx-trigger="click from:#add-item" 

Specifying the event by writing click was necessary as well as removing the space between from: and #add-item.

Answered By - Erik Koinberg