search

bigskysoftware / htmx

</> htmx - high power tools for HTML
https://htmx.org
Other
37.22k stars 1.26k forks source link

Custom event hx-trigger form #1950

Closed gassechen closed 10 months ago

gassechen commented 10 months ago

Hello, I am trying to send a form with a custom event that I receive from the server in a header.

<form class="w3-container" id="canvasConfigForm" 
data-hx-get="/draw-linear-gauge" 
data-hx-swap="innerHTML" 
data-hx-target="#linear-gauge-place225" 
data-hx-trigger="click,every 10s,my-custom-event">
<div class="w3-container  w3-cell w3-panel">
......
<label <button class="w3-btn w3-blue-grey" id="m">Actualizar Gauge</button></div></form>

With the submit method or with my-custom-event the following happens The form is executed and the parameters are sent, but the URL is incorrectly directed. this is the url http://localhost:8000/?canvasWidth=160&canvasHeight=300&canvasValue=99&canvasTitle=Temperature&canvasUnits=%C2%B0C&canvasMinorTicks=10&select-keys=asset_id&filter=mean&sql-querys=nil

As I understand it, the url should be pointing here /draw-linear-gauge with the click methods, and everything works fine

andryyy commented 10 months ago

Can you show the complete response header that is sent with the event?

Copy it from the dev console of your browser.

The response header to your GET request would also be important.

gassechen commented 10 months ago 
Request URL:
http://localhost:8000/get-data-from-url-src
Request Method:
POST
Status Code:
200 OK
Remote Address:
127.0.0.1:8000
Referrer Policy:
strict-origin-when-cross-origin
Connection:
Close
Content-Type:
text/html
Date:
Fri, 03 Nov 2023 12:27:52 GMT
Hx-Trigger:
my-custom-event
Server:
Hunchentoot 1.3.0
Accept:
*/*
Accept-Encoding:
gzip, deflate, br
Accept-Language:
es-AR,es;q=0.9,en-US;q=0.8,en;q=0.7
Cache-Control:
no-cache
Connection:
keep-alive
Content-Length:
237
Content-Type:
application/x-www-form-urlencoded
Cookie:
session=f1af6b6c-bce7-472e-a3d7-24d216f29fbe; adminer_permanent=c2VydmVy--cm9vdA%3D%3D-Sg%3D%3D%3A9qooUL3BZ9GfSbhxoz2anQ%3D%3D+c2VydmVy-bG9jYWxob3N0OjgwODI%3D-cm9vdA%3D%3D-Sg%3D%3D%3AP1LFyNK8AFcJibg60twxQQ%3D%3D
Host:
localhost:8000
Hx-Current-Url:
http://localhost:8000/?canvasWidth=160&canvasHeight=300&canvasValue=99&canvasTitle=Temperature&canvasUnits=%C2%B0C&canvasMinorTicks=10&select-keys=asset_id&filter=min&sql-querys=nil
Hx-Request:
true
Hx-Target:
data-frame-report-result
Hx-Trigger:
report-form-src
Origin:
http://localhost:8000
Pragma:
no-cache
Referer:
http://localhost:8000/?canvasWidth=160&canvasHeight=300&canvasValue=99&canvasTitle=Temperature&canvasUnits=%C2%B0C&canvasMinorTicks=10&select-keys=asset_id&filter=min&sql-querys=nil
Sec-Ch-Ua:
"Not.A/Brand";v="8", "Chromium";v="114"
Sec-Ch-Ua-Mobile:
?0
Sec-Ch-Ua-Platform:
"Linux"
Sec-Fetch-Dest:
empty
Sec-Fetch-Mode:
cors
Sec-Fetch-Site:
same-origin
User-Agent:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
gassechen commented 10 months ago

with click event and every

Request URL:
http://localhost:8000/draw-linear-gauge?canvasWidth=150&canvasHeight=300&canvasValue=99&canvasTitle=Temperature&canvasUnits=%C2%B0C&canvasMinorTicks=10&select-keys=asset_id&filter=min&sql-querys=nil
Request Method:
GET
Status Code:
200 OK
Remote Address:
127.0.0.1:8000
Referrer Policy:
strict-origin-when-cross-origin
Connection:
Keep-Alive
Content-Length:
551
Content-Type:
text/html; charset=utf-8
Date:
Fri, 03 Nov 2023 12:30:08 GMT
Keep-Alive:
timeout=20
Server:
Hunchentoot 1.3.0
Accept:
*/*
Accept-Encoding:
gzip, deflate, br
Accept-Language:
es-AR,es;q=0.9,en-US;q=0.8,en;q=0.7
Cache-Control:
no-cache
Connection:
keep-alive
Cookie:
session=f1af6b6c-bce7-472e-a3d7-24d216f29fbe; adminer_permanent=c2VydmVy--cm9vdA%3D%3D-Sg%3D%3D%3A9qooUL3BZ9GfSbhxoz2anQ%3D%3D+c2VydmVy-bG9jYWxob3N0OjgwODI%3D-cm9vdA%3D%3D-Sg%3D%3D%3AP1LFyNK8AFcJibg60twxQQ%3D%3D
Host:
localhost:8000
Hx-Current-Url:
http://localhost:8000/?canvasWidth=160&canvasHeight=300&canvasValue=99&canvasTitle=Temperature&canvasUnits=%C2%B0C&canvasMinorTicks=10&select-keys=asset_id&filter=min&sql-querys=nil
Hx-Request:
true
Hx-Target:
linear-gauge-place255
Hx-Trigger:
canvasConfigForm
Pragma:
no-cache
Referer:
http://localhost:8000/?canvasWidth=160&canvasHeight=300&canvasValue=99&canvasTitle=Temperature&canvasUnits=%C2%B0C&canvasMinorTicks=10&select-keys=asset_id&filter=min&sql-querys=nil
Sec-Ch-Ua:
"Not.A/Brand";v="8", "Chromium";v="114"
Sec-Ch-Ua-Mobile:
?0
Sec-Ch-Ua-Platform:
"Linux"
Sec-Fetch-Dest:
empty
Sec-Fetch-Mode:
cors
Sec-Fetch-Site:
same-origin
User-Agent:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
gassechen commented 10 months ago

with submit


http://localhost:8000/draw-linear-gauge?canvasWidth=110&canvasHeight=300&canvasValue=99&canvasTitle=Temperature&canvasUnits=%C2%B0C&canvasMinorTicks=10&select-keys=asset_id&filter=min&sql-querys=nil
Request Method:
GET
Status Code:
200 OK
Remote Address:
127.0.0.1:8000
Referrer Policy:
strict-origin-when-cross-origin
Connection:
Keep-Alive
Content-Length:
551
Content-Type:
text/html; charset=utf-8
Date:
Fri, 03 Nov 2023 12:35:44 GMT
Keep-Alive:
timeout=20
Server:
Hunchentoot 1.3.0
Accept:
*/*
Accept-Encoding:
gzip, deflate, br
Accept-Language:
es-AR,es;q=0.9,en-US;q=0.8,en;q=0.7
Cache-Control:
no-cache
Connection:
keep-alive
Cookie:
session=f1af6b6c-bce7-472e-a3d7-24d216f29fbe; adminer_permanent=c2VydmVy--cm9vdA%3D%3D-Sg%3D%3D%3A9qooUL3BZ9GfSbhxoz2anQ%3D%3D+c2VydmVy-bG9jYWxob3N0OjgwODI%3D-cm9vdA%3D%3D-Sg%3D%3D%3AP1LFyNK8AFcJibg60twxQQ%3D%3D
Host:
localhost:8000
Hx-Current-Url:
http://localhost:8000/?canvasWidth=160&canvasHeight=300&canvasValue=99&canvasTitle=Temperature&canvasUnits=%C2%B0C&canvasMinorTicks=10&select-keys=asset_id&filter=min&sql-querys=nil
Hx-Request:
true
Hx-Target:
linear-gauge-place259
Hx-Trigger:
canvasConfigForm
Pragma:
no-cache
Referer:
http://localhost:8000/?canvasWidth=160&canvasHeight=300&canvasValue=99&canvasTitle=Temperature&canvasUnits=%C2%B0C&canvasMinorTicks=10&select-keys=asset_id&filter=min&sql-querys=nil
Sec-Ch-Ua:
"Not.A/Brand";v="8", "Chromium";v="114"
Sec-Ch-Ua-Mobile:
?0
Sec-Ch-Ua-Platform:
"Linux"
Sec-Fetch-Dest:
empty
Sec-Fetch-Mode:
cors
Sec-Fetch-Site:
same-origin
User-Agent:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36```
gassechen commented 10 months ago

Maybe what I want to do is not possible. A form A sends a message to the server, it returns in the header "my-custon-event", if I take this returned event and do a get to a url it works, but in this case what I want is to capture the event " my-custom-event" this executes a submit in a form B

andryyy commented 10 months ago

I am having a hard time understanding it. The submit response seems to have the correct URL, doesn’t it?

Can you add action="/draw-linear-gauge" to the second form, just for ruling something out.

gassechen commented 10 months ago

only action 

(defun linear-gauge-form (num)
  (spinneret:with-html
    (:form :class "w3-container" :id "canvasConfigForm"
       :action "/draw-linear-gauge" :method "get"
       ;;:data-hx-get "/draw-linear-gauge"
       :data-hx-swap "innerHTML"
       :data-hx-target (str:concat "#linear-gauge-place"num)
       ;;:data-hx-trigger "click, my-custom-event, submit delay:1s"
Request URL:
http://localhost:8000/draw-linear-gauge?canvasWidth=160&canvasHeight=300&canvasValue=99&canvasTitle=Temperature&canvasUnits=%C2%B0C&canvasMinorTicks=10&select-keys=asset_id&filter=min&sql-querys=nil
Request Method:
GET
Status Code:
200 OK
Remote Address:
127.0.0.1:8000
Referrer Policy:
strict-origin-when-cross-origin
Connection:
Keep-Alive
Content-Length:
551
Content-Type:
text/html; charset=utf-8
Date:
Fri, 03 Nov 2023 14:09:21 GMT
Keep-Alive:
timeout=20
Server:
Hunchentoot 1.3.0
Accept:
text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
Accept-Encoding:
gzip, deflate, br
Accept-Language:
es-AR,es;q=0.9,en-US;q=0.8,en;q=0.7
Cache-Control:
no-cache
Connection:
keep-alive
Cookie:
session=f1af6b6c-bce7-472e-a3d7-24d216f29fbe; adminer_permanent=c2VydmVy--cm9vdA%3D%3D-Sg%3D%3D%3A9qooUL3BZ9GfSbhxoz2anQ%3D%3D+c2VydmVy-bG9jYWxob3N0OjgwODI%3D-cm9vdA%3D%3D-Sg%3D%3D%3AP1LFyNK8AFcJibg60twxQQ%3D%3D
Host:
localhost:8000
Pragma:
no-cache
Referer:
http://localhost:8000/?canvasWidth=160&canvasHeight=300&canvasValue=99&canvasTitle=Temperature&canvasUnits=%C2%B0C&canvasMinorTicks=10&select-keys=asset_id&filter=min&sql-querys=nil
Sec-Ch-Ua:
"Not.A/Brand";v="8", "Chromium";v="114"
Sec-Ch-Ua-Mobile:
?0
Sec-Ch-Ua-Platform:
"Linux"
Sec-Fetch-Dest:
document
Sec-Fetch-Mode:
navigate
Sec-Fetch-Site:
same-origin
Sec-Fetch-User:
?1
Upgrade-Insecure-Requests:
1
User-Agent:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

image

form A --> post --> return head my-custom-event --> form B -->not re submit

matiboy commented 10 months ago

Hi @gassechen

I've tried to reproduce your issue in this codepen but it looks as though things are working as expected. The codepen includes triggers via click, every 10s, submit delay 1s, and my-custom-event same as yours, and the mocked response actually includes the triggering event so you can see which it was.

The only difference being that I added from:body for my-custom-event <form hx-trigger="click, my-custom-event from:body">

Maybe something in the codepen will help you pinpoint your issue 🤞

gassechen commented 10 months ago

Yeah!! works, in that order <form hx-trigger="click, my-custom-event from:body"> I thought I had forgotten to put this "...from:body..." Thank you. Gracias Amigo!!

andryyy commented 10 months ago

Haha, nice!

I have seen it and thought "but it triggers, can’t be the problem here". 😄

Glad @matiboy came to the rescue.