Отправка комбинации двух входных значений с помощью htmx

Я пишу простой сайт на Django и решил попробовать библиотеку Htmx на стороне клиента для загрузки html фрагментов. Теперь я хочу сортировать списки по разным полям, по возрастанию и по убыванию. У меня есть что-то вроде этого:

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

Я хочу добавить/заменить параметр запроса order_by=<order><key> в текущий url (Например /articles?page=2&order_by=-publish_date.) и отправить его обратно в Django view как при изменении "select", так и при нажатии "button". Конечная точка возвращает Html, я хочу поменять его на другой Html узел с Htmx. (Обратите внимание, что класс span должен быть изменен при нажатии кнопки, чтобы показать сортировку Asc или Dsc)

Возможно ли это с помощью htmx? Если нет, приветствуются простые решения на Javascript.

Вы можете решить ее следующим образом:

Вы используете

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

Затем вы можете отобразить пользователю красивую иконку для сортировки. Если пользователь нажимает на иконку, вы обновляете скрытый вход через JS.

Самым простым подходом будет построение URL на стороне сервера на основе входных значений, а затем передача его с помощью заголовка ответа HX-Push:

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

Насколько я понял из документации htmx, htmx предоставляет нам два инструмента для отправки пользовательских значений:

  • hx-vals, который позволяет добавлять пользовательские параметры в текущий запрос. Эти параметры имеют форму объекта Json, а их значения могут быть как статическими, так и динамическими (возвращаемыми из JS-функции). Например:
<div hx-get="/list" hx-vals='js:{"order_by": concatSortOrderAndKey()}'>
  • hx-include, который добавляет значения элементов, указанных селектором запроса, к текущему запросу.

В случае моей проблемы, в дополнение к ответу @guettli, я мог бы установить htmx-параметры в тегах "select" и "button" и использовать hx-vals для вычисления нового значения order_by. (также, используя hx-boost, hx-* параметры могут быть установлены только для внешних окружающих элементов). Но в целом, я думаю, что скрытый ввод был лучшим решением.

Вернуться на верх