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 wele.

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 wele.

• javascript
• htmx

4 Answers 4

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.

You can use sth like

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

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.

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/reference/#response_headers