Подключим кнопки Save и Cancel в шаблоне templates\partial_book_update_form.html:

                            <!-- Кнопка "Save" -->
                            <button type="submit"
                                    hx-post="{% url 'update_book_details' book.id %}"
                                    hx-target="closest tr"
                                    hx-swap="outerHTML"
                                    hx-include="closest tr" >
                                Save
                            </button>
                            <!-- Кнопка "Cancel" -->
                            <button hx-get="{% url 'book_detail' book.id %}"
                                    hx-target="closest tr"
                                    hx-swap="outerHTML" >
                                Cancel
                            </button>

HTMX атрибуты для кнопки Save:

• hx-post="{% url 'update_book_details' book.id %}" определяет адрес запроса /update_book_details/<id книги>/ и тип запроса - POST. По этому адресу будут отправлены данные формы редактирования книги.

• hx-include="closest tr" позволяет включить дополнительные значения элементов в запрос AJAX, в данном случае это ближайший элемент tr, а так-как атрибут hx-include наследуется, то в запрос будут включены значения элементов - текстовых полей.

После нажатия данной кнопки будут отправлены данные формы, и строка с формой редактирования будет заменена на ответ - строку текущей книги, с изменёнными данными.
 

HTMX атрибуты для кнопки Cancel:

• hx-get="{% url 'book_detail' book.id %}" определяет адрес запроса /book_detail/<id книги>/ и тип запроса - GET.

После нажатия данной кнопки, строка с формой редактирования будет заменена на ответ - строку текущей книги.
 

Добавим в шаблон templates\base.html код для блокирования всех кнопок, кроме кнопок формы редактирования -  Save и Cancel, при редактировании данных книги:

    <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', '');
            }else if(path_str.includes('update_book_details')){
                if(event.detail.requestConfig.verb === 'put'){
                    cngElementsAtr('disbtn', 'disabled', true);
                }else{
                    cngElementsAtr('disbtn', 'disabled', false);
                }
            }else if(path_str.includes('book_detail')){
                cngElementsAtr('disbtn', 'disabled', false);
            }
        });
    </script>

Данный код работает так: если в пути из запроса есть строка update_book_details и тип запроса был PUT(была нажата кнопка Edit), то тогда будет вызвана функция cngElementsAtr('disbtn', 'disabled', true).

Эта функция установит значение атрибута disabled равное true для всех элементов с классом disbtn, то есть произойдёт блокирование всех кнопок, кроме кнопок формы редактирования данных книги.

Если запрос был не типа PUT, например POST, или в пути есть строка book_detail(была нажата кнопка Save или кнопка Cancel), то тогда будет вызвана функция cngElementsAtr('disbtn', 'disabled', false), которая разблокирует кнопки.

Проверим работу редактирования, запустим сервер и перейдем по адресу http://127.0.0.1:8000:

Выберем любую книгу, и нажмем кнопку Edit:

Мы видим что другие кнопки стали не активны, то-есть мы не можем их нажать.

Введем другую цену и нажмем кнопку Save:

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