Dynamically Loading Data Into Django Modal-CodePudding

I've been trying to implement a way to dynamically load information into a modal in order to do a quick preview for my ecommerce site. Any help would be appreciated, I'm not sure which direction I should head in. I tried to play with Javascript and creating an onclick function to refresh the div, but I have had no success so far. Please comment if any part of my question is unclear.

attached is a screenshot as to what is rendering on my end to get an idea of what I am trying to do.

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  style="
    background-image: url('{% static 'images/ship.jpg' %}');
    background-size: auto;
    height: 400px;
    box-shadow: 1px 2px 2px;
    ">
    <div  style="background-color: rgba(0, 0, 0, 0.6);">
        <div >
            <div >
                <h1  style="color: white;">Store</h1>
                <h2  style="color: white;">
                Welcome to our online shop, where our shipping quotes are listed below</h1>
                <h3  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 >
        {% for product in products %}
        <div >
            <img  src="{{product.imageURL}}">
            <div >
                <h6><strong>{{product.name}}</strong></h6>
                <hr>
                <button type="button"  data-toggle="modal" data-target="#myModal">View Details</button>

                <!-- Modal -->
                <div  id="myModal" role="dialog">
                    <div >
                    
                    <!-- Modal content-->
                    <div >
                        <div >
                            <h4  id="modal-title">{{product.name}}</h4>
                        <button type="button"  data-dismiss="modal">&times;</button>
                        </div>
                        <div >
                            <img  src="{{product.imageURL}}">
                        </div>
                        <div >
                        <button type="button"  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" >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

CodePudding user response：

You could assign an id to the h6, img and button tags respectively then use javascript to update the modal by retrieving the necessary ids.

For example:

{% for product in products %}
     ...
     # Here you can use the product id to mark each tags within the iteration
     <img id="image-url-{{ product.id }}"  src="{{ product.imageURL }}">
     
     # Applying the same concept as above to the h6 and button tags
     <div >
          <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"  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  id="modal-title"></h4>  # Leave here blank...
      ...
         <img  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>