Django - условный рендеринг в шаблонах

Question

Мне нужна помощь для условного отображения данных в модальном всплывающем окне на моем сайте.

Что я хочу сделать: когда пользователь нажимает кнопку «Зарезервировать», я хочу отобразить это вмодальное окно

<h3 style="margin-top:20px;">Choose dates</h3>
                    <div style="margin-top:20px;" class="pick-dates-div">
                        <form method="GET" class="post-form">{% csrf_token %}
                            {{ form.as_p }}
                            <button type="submit" class="form-btn save btn btn-default">Make A Reservation</button>
                        </form>
                        <button style="margin-top: 25px;" class="btn-primary btn-block btn-lg" data-toggle="modal"
                            data-target="#inquiryModal">More
                            Questions ?</button>
                    </div>

Затем пользователь может выбрать даты из средства выбора даты и нажать кнопку «зарезервировать» (что является запросом GET), страница обновляется, и я хочу отобразить только этов том же модальном окне:

<h1>Start Date: {{ date_start }}</h1>
    <h1>End Date: {{ date_end }}</h1>
    <h1>Price Per Day: ${{ price_per_day }}$</h1>
    <h1>Total: ${{ total_price }}$</h1>
    <form method="POST" class="post-form">{% csrf_token %}
        {{ form.as_p }}
       <a href=""> <button href="www.facebook.com" type="submit" class="form-btn save btn btn-default">Confirm Reservation</button></a>
    </form>

После этого пользователь отправляет форму (запрос POST), и я хочу отобразить текст:

<h3> Thank you for your reservation </3>

Что было бы идеальным способомдостичь этого? Стек благодарности

Answer 1

Идеальный способ добиться этого - использовать JavaScript.

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

Вы можете использовать element.style.display = 'none' , чтобы скрыть, и element.style.display = 'block' , чтобы показать содержимое внутриконтейнер элемента.

После того, как пользователь нажмет на кнопку «забронировать», скройте / покажите необходимые контейнеры для достижения желаемого результата.

Не забудьте защитить свой сайт с помощьюиспользуя правильную проверку на стороне сервера. Надеюсь, это поможет!