Dynamic query parameters with hx-post

[dmcgillen]

Hi there

I’m trying to figure out what the best way is to be able to send query parameters when using hx-post.

The specific situation I have is that I have tables containing form inputs and I am using hx-post to send these to the server in the body, but I also have separate table parameters such as sorting, pagination, selected rows etc that I would like to put in query parameters, so they can be bookmarked and to keep them separate from the actual form data.

The only way I can see to add query parameters when using hx-post is to add them to the hx-post string manually, but this only works if I know what those values are upfront. I’m using Alpine to manage the state of the table parameters and so don’t know what they are at the time I create the HTML. It appears that I cannot use Alpine’s x-bind with hx-post because the URL cannot change dynamically (https://www.reddit.com/r/htmx/comments/uxw7bj/trying_to_put_a_variable_in_hxget_string_is_it/).

I’m currently getting around this by just using headers, i.e. doing x-bind:hx-headers, but would really like to use query params for the reasons stated above.

Is there any recommended solution to this? It looks like I probably have to make my own htmx.ajax call in js, but wondered if there was something better?

Cheers

[Telroshan]

I may be misunderstanding the issue here, but wouldn't hx-include suit your need?
Something like hx-include="[name='pagination'], [name='sorting'] or hx-include="#pagination, #sorting" if you have IDs
Also,

hx-include is inherited and can be placed on a parent element

If you have many individual elements that can each make their own request, and you need those values for every one of them, you might as well define your hx-include on your table itself, to define it at 1 single place

[jreviews]

You could also try setting the path with parameters in https://htmx.org/attributes/hx-push-url/ or updating the URL from the server using the hx-push-url header https://htmx.org/headers/hx-push-url/ which would let you filter out the posted data and add only the parameters you need for bookmarking.

[johntom]

On Mon, Jun 5, 2023 at 6:18 PM Alejandro Schmeichler < ***@***.***> wrote: You could also try setting the path with parameters in https://htmx.org/attributes/hx-push-url/ or updating the URL from the server using the hx-push-url header https://htmx.org/headers/hx-push-url/ which would let you filter out the posted data and add only the parameters you need for bookmarking. — Reply to this email directly, view it on GitHub <#1454 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAOKLADZCN3IJSEYISQQIF3XJZLMRANCNFSM6AAAAAAYORFMI4> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.*** com>

on a separate note I've successfully used cookies (nodejs / fastfy) to store state, no need for alpine afaik