CODEWITHSUNDEEP
htmx
mivilar
mivilar

Reputation: 151

Auto-appending URL parameters when using a custom hx-push-url value

I would like to push a custom URL but keep the parameters of the original request. Consider the following example

<script 
 src="https://unpkg.com/[email protected]" 
 integrity="sha384-EzBXYPt0/T6gxNp0nuPtLkmRpmDBbjg6WmCUZRLXBBwYYmwAUxzlSGej0ARHX0Bo" 
 crossorigin="anonymous">
</script>

<select id="select-number" name="number" hx-get="/debug" hx-push-url="/debug2" hx-target="#target">
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<div id="target">
</div>

Let's say I serve this at http://127.0.0.1:7000/debug. If I select 2 in the select field this will trigger a request to /debug?number=2 as expected. However, the URL pushed to the browser is http://127.0.0.1:7000/debug2, not including the parameters.

I want the following pushed to the history: http://127.0.0.1:7000/debug2?number=2

This has also been discussed in htmx issue #653. From my understanding what I'm doing should work, but maybe I'm doing something wrong?

Upvotes: 4

Views: 3241

Answers (1)

Dana Woodman
Dana Woodman

Reputation: 4552

See if hx-push-url="true" would work for you, documented here:

<input
  name="query"
  hx-get="/search"
  hx-trigger="keyup change delay:200ms"
  hx-push-url="true"
/>

Upvotes: 0

Related Questions