0

I am doing a modal in Django for person detail and is all in a loop, but I am getting only the first person from the list in modal even if I click on a different person. It could be my loops but can't think clearly. Example:

<tbody>
      {% if orders %}
      {% for order in orders %}
        <tr>
          <th scope="row">{{order.order_id}}</th>
          <td>{{ order.product |capfirst }}</td>        
          <td>{{ order.units}}</td>   
          <td>{{ order.quantity}}</td>
          <td>{{ order.date}}</td>
          <td>{{ order.supplier}}</td>
          <td><button type="button" class="btn btn-link" data-toggle="modal" data-target="#exampleModal">{{order.user}}</button></td>         
        </tr>
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">{{ order.user }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <p><em>{{ order.user.position }}</em></p>
                <p><em>{{ order.user.email }}</em></p>
                <p><em>{{ order.user.dob }}</em></p>
                <p><em>{{ order.user.phone }}</em></p>
              </div>
              <div class="modal-footer">          
                <button type="button" class="btn btn-dark" data-dismiss="modal">Ok</button>
              </div>
            </div>
          </div>      
        </div>
      {% endfor %}
      {% else %}
      <div class="col-md-12">
        <h2>There are no orders.</h2>
      </div>
      {% endif %}
    </tbody>

Example: I have clicked on Dan Jink but I got Martin Lawrence enter image description here

Thanks in advance!

1 Answer 1

1

You have the same id exampleModal for each order. Try to generate some unique modal id for each order. In this example I modified your code to use exampleModal + order.user.id as a unique identifier:

  <td><button type="button" class="btn btn-link" data-toggle="modal" data-target="#exampleModal{{order.user.id}}">{{order.user}}</button></td>         
  </tr>
  <div class="modal fade" id="exampleModal{{order.user.id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel{{order.user.id}}" aria-hidden="true">

And do the same for exampleModalLabel.

Sign up to request clarification or add additional context in comments.

1 Comment

you are legend! great eye!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.