HTMX: How to update hx-delete url dynamically?

1k Views Asked by At

In order to build a modal to confirm a delete action, I'm trying to dynamically set a delete url, using hyperscript. Here is the (partial) code:

<!-- open the modal and set the (Django) delete url -->
<button
  _="on click set @hx-delete of #confirm_delete_button to '{% url view_name record.pk %}'">

<!-- the delete confirmation button -->
<button
  id="confirm_delete_button"
  hx-delete="to_be_set_later_by_hyperscript"
  hx-trigger="click"
  hx-target="body" {# TODO: change #}
  hx-swap="delete">
   Delete
</button>

At first, everything seems to work as expected, since I can see the right delete url in the inspector: enter image description here

However, when clicking the button, I got a Not Found: /to_be_set_later_by_hyperscript error, showing that even if the attribute has been set, the "old" url is used by HTMX.

What should I do? Thanks.

1

There are 1 best solutions below

0
On

No idea why it doesn't work with the "set", but the following worked for me:

<button
    _="on click add [@hx-delete={% url view_name record.pk %}] to #confirm_delete_button">
    Open
</button>

<!-- the delete confirmation button -->
<button
  id="confirm_delete_button"
  hx-delete=""
  hx-trigger="click"
  hx-target="body"
  hx-swap="delete">
     Delete
</button>