在 Django HTML 模板中隐藏和显示元素

Question

I have 2 buttons orders , and suppliers ., and want to show data in a Django web app when the corresponding button is clicked.我有 2 个按钮orders和suppliers .，并希望在单击相应按钮时在 Django Web 应用程序中显示数据。 To do this my home.html looks like为此， 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 looks like; syle.css看起来像；

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

This works perfectly fine until I use normal data like;在我使用普通数据之前，这非常有效；

<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>

But when I try to use data into <p class="mysupplier"> or <p class="myorders" > from my databases, the hide property no longer works, like below part.但是，当我尝试从我的数据库中将数据用于<p class="mysupplier">或<p class="myorders" >时，隐藏属性不再起作用，如下图所示。

<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>

I should get Order data from database only when ORDER button is clicked, but my server shows all data from before without even clicking the button.仅当单击ORDER按钮时，我才应该从数据库中获取订单数据，但我的服务器甚至无需单击按钮即可显示之前的所有数据。 How to maintain hide and show the property of my data.如何维护隐藏和显示我的数据的属性。

my views.py looks like我的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})

Answer 1

The loop in template is executed when rendering template.渲染模板时执行模板中的循环。 You pass all your data from view to template.您将所有数据从视图传递到模板。 if you just want to hide it from display add to your js:如果您只想将其从显示中隐藏，请添加到您的 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>

but if you would like to dynamicly fetch current data from db by pressing button i recommend use htmx ( htmx.org )但是如果您想通过按下按钮从 db 动态获取当前数据，我建议使用 htmx ( htmx.org )

在 Django HTML 模板中隐藏和显示元素

问题描述

1 个解决方案

解决方案1
0 2022-07-05 07:57:21

在 Django HTML 模板中隐藏和显示元素

问题描述

1 个解决方案

解决方案1 0 2022-07-05 07:57:21

解决方案1
0 2022-07-05 07:57:21