HTMX experiments: re-use URL for multiple hx-get attributes

I was able to successfully create a codepen that demonstrated how to use various triggers to make HTMX start an API call. One issue I had with that experiment was that I had to write the URL of the API multiple times for each example.

Second task: find a way to declare only one URL and re-use that URL in multiple hx-get instances.

Note that my main goal here is to understand how to effectively use HTMX for client-server communication. I start my experiment by reading the answer found here:

• How to configure base url for all requests using HTMX

About htmx:configRequest

I learned that HTMX has a htmx:configRequest event that can be used to modify the URL used in the request. Since this event fires up before HTMX makes the API call, it is still possible to modify the URL via the event.detail.path parameter.

However, using this feature requires adding custom JavaScript code which waits for the event to fire. For reference, see the HTML code in the codepen instance below:

See the Pen HTMX - use one URL for all requests by r0d3r1ck0rd0n3z (@r0d3r1ck0rd0n3z) on CodePen.

Click the HTML button above to inspect the backend code. For each section, note the following:

• The hx-get parameter only contains a partial value.
• Custom JavaScript code at the end provides the complete URL.

Compare this to the codepen at HTMX experiments: triggers and note how the URL gets repeated for each example. Using htmx:configRequest allows reusing the URL while still ensuring that the correct API is called.