HTMX hx-target перемещает содержимое вниз, а не заменяет его в указанном id

У меня проблема, когда моя hx-цель, похоже, не заменяет содержимое, на которое я указываю. Я использую базовый html файл, в котором есть div с id requestcontent. Все мои ссылки, действия формы и hx-действия, которые я использую, указывают на этот div для замены.

Мой первоначальный доступ из пункта на боковой панели меню работает нормально и дает результаты, как показано здесь:

Даже когда я нажимаю на кнопку "Добавить счет", страница отображается правильно:

Однако, если я нажимаю закрыть или сохранить на этой странице, когда я возвращаюсь на исходную страницу, верхняя часть страницы добавления все еще присутствует:

Это верно как для страницы добавления, так и для страницы удаления.

Начальная страница, с которой начинается весь процесс, находится в billlist.html

<div class="container shadow min-vh-100 py-2">
 
    {% include 'acctsite/partials/messages.html' %}
 
    <h2>Accounts Payable / Bills Listing</h2>

    <div class="row" align="right">
        <div class="col-10"></div>
        <div class="col-2 pb-1">
            <button class="btn btn-primary btn-sm" 
                    hx-trigger="click" hx-get="{% url 'expadd' %}" hx-target="#requestcontent">
                    Add bill
            </button>
        </div>
    </div>
    <div class="row">
        <div class="col h5">Date</div>
        <div class="col h5">Vendor</div>
        <div class="col h5">Description</div>
        <div class="col h5">Amount</div> 
        <div class="col h5">Paid Info</div>
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
    </div>
    <div class="row">
        <hr>
    </div>
    {% for bill in  bills %}
        <div class="row ">
            <div class="col">
                {{bill.date}}
                {% if  bill.due_date is not None %}
                    <br>{{ bill.due_date }}
                {% endif %}
            </div>
            <div class="col">{{bill.vendor.name}}</div>
            <div class="col">{{bill.description}}</div>
            <div class="col" align="right">${{bill.amount|floatformat:2}}</div>
            <div class="col">
                {% if bill.paid_date is not None %}
                    {{ bill.paid_date }} <br>
                    {{ bill.check_number}}
                {% endif %}
            </div>
            <div class="col-1">
                <button class="btn btn-primary btn-sm" hx-trigger="click">Edit</button>
            </div>
            <div class="col-1">
                {% if bill.paid_date is None %}
                    <button class="btn btn-primary btn-sm" hx-trigger="click" >Pay</button>
                {% endif %}
            </div>
            <div class="col-1">
                <button class="btn btn-danger btn-sm" hx-trigger="click" hx-get="{% url 'expdel' bill.transactionID %}" hx-target="#requestcontent" >Delete</button>
            </div>
        </div>
        <div class="row">
            <hr>
        </div>
    {% endfor %}
</div>

Страницы добавления и удаления очень похожи по способу написания. Add использует форму для сбора информации, необходимой для выполнения добавления:

expadd.html

<div class="container shadow min-vh-100 py-2">
    {% include 'acctsite/partials/messages.html' %}
    <h2>Add Expense/Bill</h2>
        <form hx-post="{% url 'expadd' %}" hx-targe="#requestcontent" method="POST">
            {% csrf_token %} 
            <div class="row">
                <div class="col-2">
                    <strong>Vendor</strong>
                </div> 
                <div class="col-5">
                    <select class="form-control" name="vendor">
                        {% for vendor in vendors %}
                            <option value="{{vendor.id}}">{{vendor.name}}</option>
                        {% endfor %}    
                    </select> 
                </div>
            </div>
            <div class="row">
                <div class="col-2">
                    <strong>Date</strong>
                </div>
                <div class="col-2">
                    <input class="form-control" type="date" name="date">
                </div>
            </div>
            <div class="row">
                <div class="col-2">
                    <strong>Due Date</strong>
                </div>
                <div class="col-2">
                    <input class="form-control" type="date" name="duedate">
                </div>
            </div>
            <div class="row">
                <div class="col-2">
                    <strong>Description</strong>
                </div>
                <div class="col-5">
                    <input class="form-control" type="text" name="description">
                </div>
            </div>
            <div class="row">
                <div class="col-2">
                    <strong>Amount</strong>
                </div>
                <div class="col-2">
                    <input class="form-control" type="number"  step=".01" name="amount">
                </div>
            </div>
            <div class="row">
                <div class="col-5">
                </div>

                <div class="col-1">
                    <input class="form-control btn btn-secondary" type="submit" name="action"  value="Close">
                </div>
                <div class="col-1">    
                    <input class="form-control btn btn-primary" type="submit"  name="action"  value="Save">
                </div>               

            </div>
        </form>    
 
</div>

expdel.html

<div class="container shadow min-vh-100 py-2">
    {% include 'acctsite/partials/messages.html' %}
    <h2>Confirm Expense Delete</h2>
        <form hx-post="{% url 'expdel' %}" hx-targe="#requestcontent" hx-swap="outerHTML" method="POST">
            {% csrf_token %} 
            <input type="hidden" name="tranID" value="{{ bill.transactionID}}">
            <div class="row">
                <div class="col-2">
                    <strong>Vendor</strong>
                </div> 
                <div class="col-5">
                    {{ bill.vendor.name }}
                </div>
            </div>
            <div class="row">
                <div class="col-2">
                    <strong>Date</strong>
                </div>
                <div class="col-2">
                    {{ bill.date }}
                </div>
            </div>
            <div class="row">
                <div class="col-2">
                    <strong>Due Date</strong>
                </div>
                <div class="col-2">
                    {{ bill.due_date }}
                </div>
            </div>
            <div class="row">
                <div class="col-2">
                    <strong>Description</strong>
                </div>
                <div class="col-5">
                    {{ bill.description }}
                </div>
            </div>
            <div class="row">
                <div class="col-2">
                    <strong>Amount</strong>
                </div>
                <div class="col-2">
                    ${{ bill.amount | floatformat:2 }}
                </div>
            </div>
            <div class="row">
                <div class="col-5">
                </div>

                <div class="col-1">
                    <input class="form-control btn btn-secondary" type="submit" name="action"  value="Close">
                </div>
                <div class="col-1">    
                    <input class="form-control btn btn-primary" type="submit"  name="action"  value="Delete">
                </div>               

            </div>
        </form>    
 
</div>

Базовый шаблон содержит определение страницы, которая содержит div id=requestcontent.

base.html

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