Theo's Typesafe Cult•10mo ago

HTMX: script `hx-on::before-request` didn't finish before sending AJAX request

so I am playing with HTMX + Laravel. https://htmx.org/ https://laravel.com/docs/10.x I have this cart form to submit. And it needs to follow browser localStorage. So I use hx-on::before-request to generate a new hidden input according to the current localStorage before submitting. On the first click (even if there's something in the localStorage), the server side couldn't get the hidden input. After it's generated (on the first time), the following clicks (taking input from the cart generated on the first time) work and the server side get the hidden input. I have tried replacing hx-on::before-request with hx-on::before-send, it gives the same result. https://htmx.org/events/#htmx:beforeRequest https://htmx.org/events/#htmx:beforeSend My guess is the hidden input isn't generated yet before the first AJAX request was sent to the server. Because I manually inserted the same hidden and it works too. But I have no idea how to properly solve this issue (not hacking) Any help would be appreaciated. Cheers

<form
  id="add-{{ $product->slug }}"
  hx-patch="/cart/inc/{{ $product->slug }}"
  hx-on::before-request="updateCart(); genTmpCart('form#add-{{ $product->slug }}');"
  hx-on::after-request="updateLocalStorage();"
>
  <button class="product-card__add-to-cart-btn">
      Add to cart
  </button>
</form

<form
  id="add-{{ $product->slug }}"
  hx-patch="/cart/inc/{{ $product->slug }}"
  hx-on::before-request="updateCart(); genTmpCart('form#add-{{ $product->slug }}');"
  hx-on::after-request="updateLocalStorage();"
>
  <button class="product-card__add-to-cart-btn">
      Add to cart
  </button>
</form

</> htmx - high power tools for html

htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext htmx is small (~14k min.gz’d), dependency-free, extendable, IE11 compatible & has reduced code base sizes by 67% when compared with react

Laravel - The PHP Framework For Web Artisans

Laravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things.

</> htmx ~ Events

2 Replies

erik.gh•10mo ago

what if you used hx-vals instead of a hidden input?

erik.gh•10mo ago

https://htmx.org/attributes/hx-vals/

</> htmx ~ hx-vals Attribute

Gaming

Programming

HTMX: script `hx-on::before-request` didn't finish before sending AJAX request