动态加载数据到 Django Modal

Question

我一直在尝试实现一种将信息动态加载到模式中的方法，以便快速预览我的电子商务网站。任何帮助将不胜感激，我不确定我应该朝哪个方向前进。我尝试使用 Javascript 并创建一个 onclick 函数来刷新 div，但到目前为止我没有成功.如果我的问题的任何部分不清楚，请发表评论。

附件是关于我端渲染内容的屏幕截图，以了解我正在尝试做什么。

https://gyazo.com/e0168c6d41a19071a95e8cecf84e37a9

store.html

    {% extends 'main.html' %}
    {% load static %}
    <!DOCTYPE html>
    <head>
        <link rel="stylesheet" href="{% static 'css/store.css' %}">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    {% block content %}
    <div class="p-5 text-center bg-image mt-4 mb-4" style="
    background-image: url('{% static 'images/ship.jpg' %}');
    background-size: auto;
    height: 400px;
    box-shadow: 1px 2px 2px;
    ">
    <div class="mask" style="background-color: rgba(0, 0, 0, 0.6);">
        <div class="d-flex justify-content-center align-items-center h-100">
            <div class="text-white">
                <h1 class="font-weight-bold mb-3" style="color: white;">Store</h1>
                <h2 class="font-weight-bold mb-3" style="color: white;">
                Welcome to our online shop, where our shipping quotes are listed below</h1>
                <h3 class="mb-3" style="color: white;">
                We ship a variety of items to fit your needs including cars, car parts, heavy duty boxes, clothes, canned goods and food, furniture, household items, freight containers and more.</h4>
                <a class= "btn btn-success mb-4" href="{% url 'about' %}" role="button">Click here to learn more</a>
            </div>
        </div>
    </div>
    </div>
    <div class="row mt-4 mb-4">
        {% for product in products %}
        <div class="col-lg-4">
            <img class="thumbnail" src="{{product.imageURL}}">
            <div class="box-element product">
                <h6><strong>{{product.name}}</strong></h6>
                <hr>
                <button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#myModal">View Details</button>

                <!-- Modal -->
                <div class="modal fade" id="myModal" role="dialog">
                    <div class="modal-dialog">
                    
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="modal-title">{{product.name}}</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                            <img class="thumbnail" src="{{product.imageURL}}">
                        </div>
                        <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                    
                    </div>
                </div>
                {% if user.is_authenticated %}
                {% if product.specialObject == 0 %}
                <button  data-product={{product.id}} data-action="add" class="btn btn-outline-secondary add-btn update-cart">Add to Cart</button>
                <h4 style="display: inline-block; float: right"><strong>${{product.price|floatformat:2}}</strong></h4>
                {% endif %}
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
    {% endblock content %}
    </body>
    </html>

models.py

class Product(models.Model):
    name = models.CharField(max_length=150, null=True)
    price = models.FloatField()
    image = models.ImageField(null=True, blank=True)
    specialObject = models.BooleanField(default=False)
    
    def __str__(self):
        return self.name

    @property
    def imageURL(self):
        try:
            url = self.image.url
        except:
            url = ''
        return url

Answer 1

您可以将 id 分别分配给 h6、img 和 button tags，然后使用 javascript 更新模态通过检索必要的 ID。

例如：

{% for product in products %}
     ...
     # Here you can use the product id to mark each tags within the iteration
     <img id="image-url-{{ product.id }}" class="thumbnail" src="{{ product.imageURL }}">
     
     # Applying the same concept as above to the h6 and button tags
     <div class="box-element product">
          <h6 id="product-name-{{ product.id }}"><strong>{{ product.name }}</strong></h6>
          <hr>

          # Can use the onclick event here on the button and pass the button's id which is the product's id itself to be dealt with in js.
          <button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#myModal" id="{{ product.id }}" onclick="updateModal(this.id)">View Details</button>
          ...
      </div>
     ...
{% endfor %}

# I'd suggest moving the modal outside of the forloop as well...
<!-- Modal -->
...
     <!-- Modal content-->
      ...     
         <h4 class="modal-title" id="modal-title"></h4>  # Leave here blank...
      ...
         <img class="thumbnail" src="..." id="modal-image">  # Assign an id here as well.
      ...
...

# Javascript
<script type='text/javascript'>
     function updateModal(id){
          let product_name = document.getElementById("product-name-" + id).textContent;
          let image_src = document.getElementById("image-url-" + id).src;
          
          # Now setting the modal title and image with the values above...
          document.getElementById("modal-title").innerHTML = product_name;
          document.getElementById("modal-image").src = image_src;
     }
</script>

动态加载数据到 Django Modal

Dynamically Loading Data Into Django Modal

javascript

html

django

ajax

django-models