[Answered ]-Passing data to bootstrap modal Django template

1👍

You have two choices

  1. You can use Javascript to change the contents of the modal when the button is clicked.

  2. Instead of one modal, you create one modal for each movie with its hours. Depending on which button you click, a different modal gets opened.

1👍

As @jastr has told, there are two solutions. One of them is doing something like this:

  • Wrap your <li> elements with a <ul>
  • Add a class to your button, e.g. open-modal
  • Add a click listener to your button, and when the user clicks on the
    button, you add the list into your modal

First, some changes on your html:

<table>
  <thead>
    <tr>
       <td>title</td>
       <td>description</td>
       <td>hours</td>
    </tr>
  </thead>
  <tbody>
    {% for key in movies %}
     <tr>
       <td>{{ key.title }}</td>
       <td>{{ key.description }}</td>
       <td>
          <!-- You may want to put this whole list into your modal body -->
          <ul>
          {% for hour in key.hours %}
             <li>{{ hour }}</li>
          {% endfor %}
          </ul>
          <button type="button" class="btn btn-default open-modal" data-toggle="modal" data-target="#myModal"></button>
       </td>
     </tr>
    {% endfor %}
  </tbody>
</table>

Then, you can add a click listener like this to insert the list into your modal:

<script type="text/javascript">
    $('.open-modal').click(function (e) {
        $('#myModal .modal-body').html($(this).prev().clone());
    });
</script>

Leave a comment