CODEWITHSUNDEEP
pythondjango
web_crawler
web_crawler

Reputation: 11

How to use Django for loop twice on the same data

I'm attempting to use a for loop to iterate over the same data twice in the same Django template. However the second for loop only returns the first object in the database.

Basically I have an image of each job in the database on the homepage and when clicked on it should display a more detailed description of that job. All the jobs from the database display fine on the homepage but they all display the description of the first job when clicked on.

I think it's something to do with only being able to use an iterator once but I can't figure out what the solution is.

model.py

from django.db import models

class Job(models.Model):
    title = models.CharField(max_length=50, default="Example Work")
    image = models.ImageField(upload_to='images/')
    summary = models.TextField()

views.py

from django.shortcuts import render
from .models import Job

def get_index(request):
    jobs = Job.objects
    return render(request, 'index.html', {'jobs': jobs})

index.html

{% for job in jobs.all %}
  <div class="col-md-6 col-lg-4">
    <a class="portfolio-item d-block mx-auto" href="#portfolio-modal">
      <div class="portfolio-item-caption d-flex position-absolute h-100 w-100">
        <div class="portfolio-item-caption-content my-auto w-100 text-center text-white">
          <i class="fas fa-search-plus fa-3x"></i>
        </div>
      </div>
      <img class="img-fluid" src="{{ job.image.url }}" alt="">
    </a>
    <h3 class="text-center text-secondary">{{ job.title }}</h3>
  </div>
{% endfor %}
<!-- Portfolio Modal -->
{% for job in jobs.all %}
  <div class="portfolio-modal mfp-hide" id="portfolio-modal">
    <div class="portfolio-modal-dialog bg-white">
      <a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#">
        <i class="fa fa-3x fa-times"></i>
      </a>
      <div class="container text-center">
        <div class="row">
          <div class="col-lg-8 mx-auto">
            <h2 class="text-secondary text-uppercase mb-0">{{ job.title }}</h2>
            <hr class="star-dark mb-5">
            <img class="img-fluid mb-5" src="{{ job.image.url }}" alt="Image of website">
            <p class="mb-5">{{ job.summary }}</p>
            <a class="btn btn-primary btn-lg rounded-pill portfolio-modal-dismiss" href="#">
              <i class="fa fa-close"></i>Close Project</a>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endfor %}

Just for context, I've ripped out a lot of the html code from index.html because that all works fine and it probably isn't relevant. I've tried it in within one loop which doesn't work either. The description opens up within a new window on the same page. I've tried anything I can think of but not getting anywhere with it. Still getting to grips with Django and Python. Any help appreciated.

Upvotes: 1

Views: 722

Answers (1)

Daniel Roseman
Daniel Roseman

Reputation: 599450

This isn't anything to do with Django outputting the same data for each iteration. If you check the generated HTML via View Source in your browser, you'll definitely see the correct data.

The problem is with your HTML itself. You cannot have multiple elements with the same HTML id attribute; but you are using id="portfolio-modal" for each one. When your JS tries to pop up the modal, it will only ever find the first instance of this ID.

You need to use a different ID in each iteration - perhaps by appending a unique element, eg the Job pk - and/or use a class to trigger your modal.

Upvotes: 1

Related Questions