Send combination of two input values with htmx

Question

I'm writing a simple website with Django and I decided to try htmx library in client side to load html fragments. Now I want to sort lists by different fields, ascending and descending. I have something like this:

<div class="col-auto">
  <div class="input-group input-group-sm">
    <select id="np-sort-key" name="key" class="form-select">
      <option value="publish_date" selected>Publish date</option>
      <option value="title">Title</option>
    </select>
    <button class="btn btn-outline-dark" type="button">
      <span class="bi bi-sort-down"></span> <!-- bi-sort-up for Asc icon -->
    </button>
  </div>
</div>

I want to add/replace the order_by=<order><key> query parameter to/in the current url (For example /articles?page=2&order_by=-publish_date.) and send it back to Django view both on "select" change and "button" click. The endpoint returns a Html I want to swap it with another Html node with Htmx. (Note that span class should be changed on button click to show sorting is Asc or Dsc)

Is it possible using htmx? If not, simple Javascript solutions are welcome.

Franchot

Answer 1

You could solve it like this:

You use

<form hx-get="..."> 
 ...
 <input type="hidden" name="order_by">
</form>

Then you can display the user a nice icon for sorting. If the user clicks on the icon, you update the hidden input via JS.

Vickeyvicki

If htmx-get is set on <form>, how it would be triggered? Can't I just use the input and set htmx stuff directly on that? Then, htmx would trigger after input value is changed by JS. – Franchot

@AlirezaFarahani you can use the change event via hx-trigger htmx.org/attributes/hx-trigger – Vickeyvicki

I used the hidden input trick, though change event is not triggered in this case and I needed to programmatically dispatch it. Your answer was helpful but I would wait for @1cg to choose the accepted answer. – Franchot

Answer 2

You can use sth like

<select
...
hx-include="[name='fieldName1'],[name='fieldName2']"
>
</select>

Brucine

Wish I could upvote this more. This is the actual answer that works if you have named fields which of course works great with django forms. Thanks! – Ardisardisj

Answer 3

From what I understood of htmx documentations, htmx provides us two tools to send custom values:

• hx-vals that lets you add custom parameters to the ongoing request. These parameters are in the form of a Json object and their values could be either static or dynamic (returned from a JS function). For example:

<div hx-get="/list" hx-vals='js:{"order_by": concatSortOrderAndKey()}'>

• hx-include that adds values of the elements specified by a query selector to the ongoing request.

In case of my problem, in addition to @guettli answer, I could set htmx parameters on "select" and "button" tag and use hx-vals to calculate new order_by value. (also by using hx-boost, hx-* stuff could be set only on outer enclosing elements). But overall, I think the hidden input was a better solution.

Franchot

Answer 4

The easiest approach would be to construct the URL server side based on the input values and then push it using the HX-Push response header:

https://htmx.org/reference/#response_headers

Marking

Could you explain it a little more? Return it with original get request or with htmx ajax request? How it would help me achieving my goal? – Franchot