Скрытие и отображение элементов внутри HTML-шаблона Django

У меня есть 2 кнопки orders, и suppliers, и я хочу отображать данные в веб-приложении Django при нажатии на соответствующую кнопку. Для этого my home.html выглядит как

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $(".button_order").click(function(){
          $(".myorders").show();
          $(".mysupplier").hide();
        });
        $(".button_supplier").click(function(){
            $(".myorders").hide();
            $(".mysupplier").show();
        });
      });
</script>

syle.css выглядит как; 

.myorders,
.mysupplier{
font-size: 25px;
display: none;
}

Это работает совершенно нормально, пока я не использую обычные данные, например;

<body>
    {%block content %}
    <button class="button_order" >ORDERS</button>
    <button class="button_supplier" >SUPPLIER</button>
    <p class="myorders" >
       This is my order
    </p>
    <p class="mysupplier">
       my supplier is cool
    </p>
</body>

Но когда я пытаюсь использовать данные в <p class="mysupplier"> или <p class="myorders" > из моих баз данных, свойство hide больше не работает, как показано ниже.

<p class="myorders">
    {% for element in orders  %}
    {% for key,val in element.items %}
    <ul><li>{{key}}:{{val}}</li></ul>
    {% endfor %}
    <hr class="new1">
    {% endfor %}
</p>

Я должен получать данные о заказе из базы данных только при нажатии на кнопку ORDER, но мой сервер показывает все данные до этого, даже не нажимая на кнопку. Как сохранить свойство скрывать и показывать мои данные.

мой views.py выглядит как

from django.shortcuts import render
client = MongoClient("mongodb://localhost:27017/")
db=client.inventory_data
def home(request):
    collection_data_1 = db['orders']
    orders = list(collection_data_1.find())
    collection_data_2= db['suppliers']
    suppliers = list(collection_data_2.find())
    return render(request,'home.html',{'orders': orders,'suppliers':suppliers})

Цикл в шаблоне выполняется при рендеринге шаблона. Вы передаете все ваши данные из представления в шаблон. если вы просто хотите скрыть их от отображения, добавьте в ваш js:

<script>
    $(document).ready(function(){
        $(".mysupplier").hide();
        $(".myorders").hide();
        $(".button_order").click(function(){
          $(".myorders").show();
          $(".mysupplier").hide();
        });
        $(".button_supplier").click(function(){
            $(".myorders").hide();
            $(".mysupplier").show();
        });
      });
</script>

но если вы хотите динамически получать текущие данные из базы данных по нажатию кнопки, я рекомендую использовать htmx (htmx.org)

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