Не удается добиться обновления двух элементов при использовании Django и HTMX

Я пытаюсь создать автомобильный пул, где я использую HTMX в моем проекте Django, чтобы заставить его работать. Модель CarPool состоит из двух FK. Один FK - это "City", а другой - "Car". У меня это в некоторой степени работает. Таким образом, внутри двух таблиц (одна таблица со всеми автомобилями, не имеющими привязки к городу, а другая таблица отображает все автомобили, привязанные к городу, на который был сделан клик) я могу использовать hx-post для добавления автомобиля, и то же самое для удаления автомобиля с выбранным городом. Но я не могу заставить списки обновляться после нажатия на них.

Я пробовал разные способы использования hx-oob-swap, но поскольку я довольно новичок в работе с Django и HTMX, я не уверен, где именно его использовать.

См. прилагаемые изображения. Итак, картинка "notclicked", левая таблица показывает все автомобили без города, а правая таблица показывает автомобили с "Chicago" в качестве FK. notclicked

Картинка "нажата" Сейчас я нажал на автомобиль MMW 331 из левой таблицы, и он добавляет его в правую таблицу, что хорошо, но затем, когда я нажимаю на него, я хочу, чтобы он также был удален из левой таблицы (то же самое происходит, если я удаляю автомобиль из правой таблицы) нажал

Благодарю за любую помощь :)

Вот моя тестовая репозиция с github: github

Лично я не понимаю, почему вы не можете просто сделать обычный запрос и обновить всю страницу.

Использование htmx может показаться довольно сложным, и есть несколько способов справиться с этим. Хотя я предпочитаю избегать использования oob и предпочитаю подход с использованием пользовательских заголовков tirgger:

Создайте 2 конечные точки:

  • удаление элемента из левой таблицы (POST)
  • получение данных из правой таблицы (GET)

Следуйте примеру htmx delete row, чтобы увидеть, как должно происходить удаление.

Чтобы вторая таблица обновлялась после удаления элемента, вы можете прикрепить htmx trigger header к ответу на удаление.

Для этого необходимо установить пакет django-htmx (который будет вам полезен в целом при работе с django + htmx).

Подробнее о пользовательских заголовках ответа htmx можно прочитать здесь.

Так что ваш ответ будет выглядеть примерно так:

return trigger_client_event(
    HttpResponse(''),
    "citySelected",
    after="swap"
)

Это заставит htmx запустить событие citySelected, после того как будет возвращен ответ на удаление элемента.

Затем вы можете использовать это событие для обновления содержимого правой части таблицы (или ее tbody) следующим образом:

<tbody id="filter-cars" hx-get="/list-of-cars/" hx-trigger="citySelected from:body">

Это решение может быть весьма спорным, но это один из способов его реализации.

Разобрался с этим благодаря комментарию. Итак, в моих представлениях добавления/удаления автомобиля вместо возврата шаблона я вернул trigger_client_event:

Добавить автомобиль: 

def car_pool_add(request, pk, city_id):
'''Add a car with no cities to a city that is clicked'''
city = get_object_or_404(City, pk=city_id)
car = get_object_or_404(CarPool, pk=pk)
if request.htmx:
    car.city = city
    car.save()
    return trigger_client_event(
        HttpResponse(''),
        "citySelected",
        after="swap")

Снять машину: 

def car_pool_remove(request, pk):
'''Remove a car from a city'''
car = get_object_or_404(CarPool, pk=pk)
if request.htmx:
    car.city = None
    car.save()
    return trigger_client_event(
        HttpResponse(''),
        "citySelected",
        after="swap")

После этого в шаблоне "car_pool_cars.html" я просто добавил в строку следующее:

<div class="row" 
    hx-trigger="citySelected from:body"
    hx-get="{% url 'htmx_tests:car_pool_cars' city.pk %}">

Не нажата: unclicked

Нажата: clicked

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