Django: Offcanvas pdf preview iteration issue

Question

Hy guys

i'm setting up a page where there is a table which contains some meta data about a pdf file.

Ofcourse for user friendliness i want to give the user a preview of a stored file and i'd like to do that in an off-canvas.

my html file

 <h5>Add a document </h5>
  <div class="addition">
    <form method="POST" action="" enctype='multipart/form-data' autocomplete="off">
      {% csrf_token %}                


        <div>

            <input type="text" class="form-control form-control-sm" aria-describedby="emailHelp" placeholder="name" name="name" maxlength="50" autocomplete="off">
          </div>
          <div>
              <label for="myfile">Select a file:</label>
            <input type="file" id="myfile" name="pdf">
          </div>
        <div>
            <button type="submit" class="btn btn-sm btn-primary">Submit</button>
           </div>
         </form>
        </div>




       <h4>Overview documents</h4>
       <div class="table-responsive">
    <table class="table table-striped table-sm">
      <thead>
        <tr>
          <th>#</th>
          <th>Name</th>
          <th>Descritpion</th>
          <th></th>
          <th></th>

        </tr>
      </thead>
      <tbody>
        {% for item in all_pdfs %}   
            <tr>                    
            <td>{{ forloop.counter }}</td>
                <td>{{ item.name }}</td>
                <td><a href="{{item.pdf.url}}">{{ item.name }}</a></td>
                <td>
              <div>
                    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>

                        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
                          <div class="offcanvas-header">
                            <h5 id="offcanvasRightLabel">Offcanvas right</h5>
                            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                          </div>
                          <div class="offcanvas-body">
                             <embed src="{{ item.pdf.url }}" type="application/pdf" height="700px" width="350">
                          </div>
                        </div>
              </div>
                </td>
          </tr>

            {% endfor %}
        </tbody>
    </table>
</div>

This html page contains 2 sections: the actual form and below the table that represents all the records in my database

models.py

class TestPDF(models.Model):
name = models.CharField(max_length=50, default=None, null=True, blank=True)
pdf = models.FileField(upload_to='test')

views.py

def test(request):
all_pdfs = TestPDF.objects.all()
    if request.method == "POST":
        settings_form = TestPDFForm(request.POST or None, request.FILES or None)

        if settings_form.is_valid():
            settings_form.save()

        return render(request, 'test.html', {"all_pdfs": all_pdfs})
    else:
        return render(request, 'test.html', {"all_pdfs": all_pdfs})
return render(request, 'test.html', {"all_pdfs": all_pdfs})

and finally my

forms.py

class TestPDFForm(forms.ModelForm):
class Meta:
    model = TestPDF
    fields = ['name', 'pdf']

Normal Behavior I want to click on a random button and see the corresponding pdf document in an offcanvas

Problem: When i click the button on anything i get the wrong preview in my offcanvas. I always get the first pdf while the link that is in the table correctly corresponds to the correct PDF. So for some reason the offcanvas doesn't correctly iterates in that last table. This issue has bugging me out for quite a while and I can't find any solution yet.

Thanks a lot for the ideas!

Answer 1

The id attribute is supposed to be unique in the html document. Refer https://www.w3.org/TR/2011/WD-html5-20110525/...:

The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character.

What should we do when we need multiple id's in a loop? Use forloop.counter (Reference for template tag [Django docs]) to make unique id's.

{% for item in all_pdfs %}
    <tr>
        <td>{{ forloop.counter }}</td>
        <td>{{ item.name }}</td>
        <td><a href="{{item.pdf.url}}">{{ item.name }}</a></td>
        <td>
            <div>
                <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight-{{ forloop.counter }}" aria-controls="offcanvasRight">Toggle right offcanvas</button>
                <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight-{{ forloop.counter }}" aria-labelledby="offcanvasRightLabel-{{ forloop.counter }}">
                    <div class="offcanvas-header">
                        <h5 id="offcanvasRightLabel-{{ forloop.counter }}">Offcanvas right</h5>
                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                    </div>
                    <div class="offcanvas-body">
                        <embed src="{{ item.pdf.url }}" type="application/pdf" height="700px" width="350"> </div>
                    </div>
                </div>
        </td>
    </tr>
{% endfor %}