Блог

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

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

#javascript #htmx

#javascript #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=2amp;order_by=-publish_date.) и отправить его обратно в представление Django как при изменении «выбрать», так и при нажатии кнопки. Конечная точка возвращает HTML-код, который я хочу поменять местами с другим Html-узлом с помощью Htmx. (Обратите внимание, что класс span должен быть изменен при нажатии кнопки, чтобы показать сортировку по Asc или Dsc)

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

Ответ №1:

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

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

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

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

Комментарии:

1. Если htmx-get установлено значение on <form> , как оно будет запущено? Разве я не могу просто использовать входные данные и установить htmx-материал непосредственно на это? Затем htmx будет срабатывать после изменения входного значения с помощью JS.

2.@AlirezaFarahani вы можете использовать change событие через hx-trigger htmx.org/attributes/hx-trigger

3. Я использовал трюк со скрытым вводом, хотя change в этом случае событие не запускается, и мне нужно было программно отправить его. Ваш ответ был полезен, но я бы подождал, пока @1cg выберет принятый ответ.

Ответ №2:

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

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

Комментарии:

1. Не могли бы вы объяснить это немного подробнее? Вернуть его с помощью исходного запроса get или с htmx помощью запроса ajax? Как это поможет мне достичь моей цели?

Ответ №3:

Из того, что я понял из 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-* материал может быть установлен только на внешних ограждающих элементах). Но в целом, я думаю, что скрытый ввод был лучшим решением.

Метки: