Теперь настало время магии HTMX.
Подключаем его, для этого отредактируем файл шаблона templates\base.html, добавив в начало следующий код:
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>И в конце:
<script src="https://unpkg.com/htmx.org@1.9.4"></script>
</body>
Подключим кнопку Add book, в файле шаблона templates\partial_create_book_form.html отредактируем код кнопки:
<!-- Кнопка "Add book" -->
<button type="submit"
class="disbtn"
hx-post="{% url 'create_book' %}"
hx-target="#book-list"
hx-swap="beforeend" >
Add book
</button>
HTMX атрибуты для кнопки Add book:
hx-post="{% url 'create_book' %}"определяет адрес запроса/create_book/и тип запроса - POST.
hx-target="#book-list"задаёт целевой элемент, куда будет добавлен ответ, в данном случае это<tbody id="book-list">.
hx-swap="beforeend"указывает как добавлять ответ в целевой элемент, в данном случае ответ будет добавлен после последнего дочернего элемента - после последней строки таблицы будет вставлена новая строка добавленной книги.
После нажатия данной кнопки, данные формы будут отправлены, и в таблицу будет добавлен ответ - строка новой книги.
В файл шаблона templates\base.html добавим код, который будет очищать текстовые поля формы после отправки:
<script src="https://unpkg.com/htmx.org@1.9.4"></script>
<script>
function cngElementsAtr(cls, atr, val){
var elems = document.getElementsByClassName(cls);
for(var i = 0; i < elems.length; i++) {
elems[i][atr] = val;
}
}
document.body.addEventListener('htmx:afterRequest', (event) => {
path_str = event.detail.pathInfo.requestPath;
if(path_str.includes('create_book')){
cngElementsAtr('clrtxt', 'value', '');
}
});
</script>
</body>
Данный код работает так: после выполнения AJAX запроса, мы получаем путь из запроса в переменную path_str и ищем в нём строку create_book.
Если в пути есть данная строка, то тогда будет вызвана функция cngElementsAtr('clrtxt', 'value', ''), которая установит значение атрибута value равное пустой строке для всех элементов с классом clrtxt, то есть произойдёт очистка текстовых полей в форме добавления книги.
Теперь можно запустить сервер и добавить несколько книг, например эти:
Изучаем Python. Том 1; Марк Лутц; 2015
Изучаем Python. Том 2; Марк Лутц; 2779
Программируем на Python; Майкл Доусон; 1368
Python. Книга рецептов; Бизли и Джонс; 2731
Python – это просто; Нилаб Нисчал; 861
Знакомство с Python; Дэн Бейдер; 1663
Python. К вершинам мастерства; Лучано Рамальо; 2964
Непрактичный Python; Воган Ли; 2644
Python без проблем; Даниэль Зингаро; 1439Или можете добавить свои книги.
Мы видим что при добавлении новых книг, нам не пришлось обновлять нашу страницу.
