I noticed a couple of weeks ago when demoing an application I'm working on that the page wasn't updating. This was functionality that previously worked and I hadn't made updates to the application in awhile. I finally got to sit down and look at it today and I'm not sure what's changed, but When an end point call returns an HX-Trigger header, it doesn't seem to trigger elements with that trigger label.
As an example, I have this table element:
<table id="table_id_lookup_list" hx-swap="outerHTML" hx-get="/en/lookup/participants/table/list" hx-trigger="load, update_table from:body" ></table>
Upon page load, the end point is called and the table is populated correctly.
Above the table I have an entry form for adding new participants. Clicking the submit button calls the 'add' endpoint, which validates the form and adds a new participant to the database. If successful a blank form is returned to clear the entry form and an HX-Trigger header is attached with the update_table label. As you can see in this screen shot, a 200 OK was returned with the Hx-Trigger. This doesn't trigger the table to update though.
This was a general pattern I used through out the site and I know it was working at one point. I've tested in Chrome and Edge with the same results.
Using HTMX 2.0.10 works as expected, but there's extensions in HTMX 4 I'm taking advantage of.
I noticed a couple of weeks ago when demoing an application I'm working on that the page wasn't updating. This was functionality that previously worked and I hadn't made updates to the application in awhile. I finally got to sit down and look at it today and I'm not sure what's changed, but When an end point call returns an HX-Trigger header, it doesn't seem to trigger elements with that trigger label.
As an example, I have this table element:
<table id="table_id_lookup_list" hx-swap="outerHTML" hx-get="/en/lookup/participants/table/list" hx-trigger="load, update_table from:body" ></table>Upon page load, the end point is called and the table is populated correctly.
Above the table I have an entry form for adding new participants. Clicking the submit button calls the 'add' endpoint, which validates the form and adds a new participant to the database. If successful a blank form is returned to clear the entry form and an HX-Trigger header is attached with the update_table label. As you can see in this screen shot, a 200 OK was returned with the Hx-Trigger. This doesn't trigger the table to update though.
This was a general pattern I used through out the site and I know it was working at one point. I've tested in Chrome and Edge with the same results.
Using HTMX 2.0.10 works as expected, but there's extensions in HTMX 4 I'm taking advantage of.