HX-Trigger header isn't shown in a back-end

[cardinal-II]

I'm learning HTMX and stuck at "HTTP Request Headers In Htmx" section. My back-end, Fat Free Framework (PHP) can see Hx-Boosted, Hx-Current-Url, Hx-Request headers but it can't see HX-Trigger. In a browser -> Network -> Headers -> Request Headers, I can see HX-Trigger.

Is there anything I am overlooking?

<form action="/contacts" method="get" class="tool-bar">
    <label for="search">Search Term</label>
    <input id="search" type="search" name="q"
           hx-get="/contacts"
           hx-trigger="search, keyup delay:500ms changed"
           hx-target="tbody"
           hx-select="tbody tr"
           />
    <input type="submit" value="Search"/>
</form>

<?php
header("Access-Control-Allow-Headers: *");
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Override: *');
header('Access-Control-Allow-Methods: GET, POST, DELETE, PUT, OPTIONS');

[Telroshan]

it can't see HX-Trigger

How do you inspect that in this case? Do you look for the exact name, or log/dump/whatever every header available in your request? Just an idea, could it be a case issue (or even a typo)? If you haven't already, you may want to simply dump all the info in your request and see if it's in there

In a browser -> Network -> Headers -> Request Headers, I can see HX-Trigger.

Unfortunately the HX-Trigger doesn't have anything special going on with it compared to other htmx headers, and as you see it in the network inspector, I'd say it must be an issue with your backend then 😕

The only thing I can think of ; make sure you're inspecting the same request between your network tab and your backend, more specifically, HX-Trigger won't be present if the element doesn't have an ID, so make sure you're inspecting the same request

Other than that, I know nothing about Fat Free, so this probably won't be of much help, but who knows!

[cardinal-II]

HX-Trigger won't be present if the element doesn't have an ID

Exactly. The form didn't have an id. After specifying one, HX-Trigger header is present now on the back-end.

Maybe there is a typo in the book.

we have an id, search on our search input. So the value of the HX-Trigger header should be set to search when the request is coming from the search input, which has the id search.

But the input tag in my form does have an id. However HX-Trigger header for the input is still not present, with or without presence of the form id.

I'm trying to understand how to distinguish requests coming from the form tag and the input tag.

[Telroshan]

The book is actually correct;

we have an id, search on our search input. So the value of the HX-Trigger header should be set to search when the request is coming from the search input, which has the id search.

As you mentioned Hx-Boosted, I'm assuming you're within a boosted body or container around your form. If you take a look at this JSFiddle, notice we have 2 different "actors":

• The form itself has a standard action & method, and is htmx-powered thanks to boosting. This means htmx intercepts the default form events and overrides them to make partial requests, i.e. avoid the full page load. This is specific to the form, and is an equivalent of putting a hx-get="/contacts" on that same form.
• The search input has its own hx-get and can make its own requests, thus separated from the form.

What you can notice are those 2 possibilities:

• If you click the submit button (labeled Search here), you're submitting the request through the form itself as it's a standard submit within a form. In this case, your ID-less form will result in no HX-Trigger being set, which is to be expected
• If you type in your search input, you will trigger its own hx-get as this matches its trigger specification hx-trigger="search, keyup delay:500ms changed". In this case, it is not the form but the input itself that makes the request, in which case, you'll have its ID in the HX-Trigger header

Hope this helps!

[cardinal-II]

• but the input itself that makes the request, in which case, you'll have its ID in the HX-Trigger header

In the browser, I can see the HX-Trigger header of the input tag, but the back-end can't see it. The back-end CAN see the HX-Trigger header of the form tag. I wonder why the back-end see the one and can't the other.

[Telroshan]

That is very weird indeed, on what exact interaction are you seeing this? I'm asking as I see one special case with the current code ; if you hit Enter in the search input, it currently triggers 2 requests, both from the form (a submit event on the form due to Enter) and from the input (a search event on the input due to Enter as well. Note that keyup isn't triggered here as the value didn't change). In that case, you get one request with the header (from the input), the other request without (from the form). Just an idea in case that's what you were inspecting.

[cardinal-II]

If I type in the input tag without clicking Enter or the button Search, the browser shows HX-Trigger: search_input, but the back-end can't see it. If I type in the input tag and click the button Search, the browser shows HX-Trigger: search_form, and the back-end can see it.

[Telroshan]

Very strange indeed. Just checked on my side with a golang backend and I see the header just fine... Would you mind setting up a minimal repo that reproduces this issue? So we can investigate it with your backend combination.

[cardinal-II]

Some_repo.zip

That's a Fat Free Framework (PHP).

[MichaelWest22]

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers

Try setting this header as well

[MichaelWest22]

https://htmx.org/docs/#cors

[cardinal-II]

Try setting this header as well

I've set the header but that doesn't work.