How to call Alpine function in hx-on::after-request ?

[GeorgeFlorian]

I have a form being submitted via a button:

  <form
    method="post"
    class=""
    x-data="{
      deliveryAddressConfirmed: $persist(false).as('deliveryAddressConfirmed'),
      resetDelivery() {
        this.deliveryAddressConfirmed = false;
        localStorage.setItem('deliveryAddress', '');
        localStorage.setItem('deliveryAddressName', '');
        localStorage.setItem('deliveryAddressPostalCode', '');
        localStorage.setItem('deliveryAddressCity', '');
        localStorage.setItem('deliveryAddressCountry', '');
        localStorage.setItem('selectedAddress', '');
        localStorage.removeItem('displayedAddress', '');
      },
    }"
  >

// Some inputs

          <button
            class=""
            type="submit"
            id="checkout_confirm_button"
            hx-post="{% url 'shop:checkout-page' %}"

            hx-params="delivery_address_name,delivery_address,delivery_address_postal_code,delivery_address_city,delivery_address_country"

            hx-swap="none"
            data-loading-class="pointer-events-none cursor-wait opacity-80"
            data-loading-aria-busy
          >
            Submit
          </button>
</form>

I do the input validation using AlpineJS.

The issue is that I need to call the Alpine function resetDelivery() after the form was successfully submitted and I can't find a way of doing it.

I've added the following code to the form tag, then to the button and I only get Uncaught ReferenceError: resetDelivery is not defined from the hx-on::after-request = "resetDelivery()"

        hx-on::after-request = "resetDelivery()"
        @submit="resetDelivery()"
        onsubmit="resetDelivery()"

[ntorga]

@GeorgeFlorian You can use Alpine to listen to the HTMX event with @htmx:after-request="resetDelivery()".

[hookenz]

That helped me a lot. I was using hx-on::after-request and couldn't figure out how to update the x-data state without jumping through hoops. None of which looked nice.