Parse id into bootstrap modal

Question

I have a bootstrap modal that contains a bunch of strings. I also have a loop of cards that each has a different 'id'. When I open the modal I want id to be displayed inside the modal (I will use it to get more info later, like name, description and deadline).

This is my loop of JSON objects:

<div class="card-list-body">
            {% for assignment in förseningar %}
                <div class="card card-kanban" data-toggle="modal" data-target="#task-modal" id="{{assignment.id}}">

                   <script>
                     $('#task-modal').on('show.bs.modal', function(event) {
                     var Id = $(event.relatedTarget).data('id');
                     console.log("aaa")
                     $(event.currentTarget).find('input[name="modal-title"]').val(Id);
                    });
                   </script>


                  <div class="card-body">
                    <div class="dropdown card-options">
                      <button class="btn-options" type="button" id="kanban-dropdown-button-16" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="material-icons">more_vert</i>
                      </button>
                      <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#">Edit</a>
                        <a class="dropdown-item text-danger" href="#">Archive Card</a>
                      </div>
                    </div>

                    <div class="card-title" style="white-space: initial; ">
                        <a href="#" data-toggle="modal" data-target="#task-modal">
                          <h6 style="font-weight: 400">
                            {{assignment.type_of_assignment}} i {{assignment.course}}                              </h6>
                        </a>
                      </div>


                    <div class="card-title" style="white-space: initial; ">
                      <a href="" data-toggle="modal" data-target="#task-modal">
                        <h6 style="font-weight: 600">
                          {{assignment.name}} 
                        </h6>
                      </a>
                    </div>

                    <div class="card-title" style="white-space: initial; ">
                        <a href="#" data-toggle="modal" data-target="#task-modal">
                          <h6 style="font-weight: 600; color: #d21b1b">
                            Försenad
                          </h6>
                        </a>
                      </div>

                      <style>
                        .hor-list {
                          list-style-type: none;
                          overflow: hidden;
                          display: block;
                          text-decoration: none;
                          padding: 0px;
                          margin-right: 5px;
                        }
                        .circle {
                          border-radius: 50%;
                          height: 30px;
                          text-align: center;
                          width: 30px;
                        }
                        .list-item {
                          float: left;
                          margin-right: 1px
                        }
                        .initials {
                        font-size: 15px;
                        font-weight: 800;
                        line-height: 1;
                        position: relative;
                        top: 3px;
                        /* 25% of parent */
                        }
                      </style>
                       <ul class="hor-list2">
                        {% for teacher in assignment.teachers.all %}
                        <li class = "list-item2">
                          <span class="step" style="background: {{teacher.userColor}};">{{teacher.user.username|first|capfirst}}</span>
                        </li>
                      {% endfor %}

                        <li class = "list-item2">
                          <p style="margin-left: 10px; font-size: 15px">
                            {{assignment.teachers.count}} Lärare:
                            {% for teacher in assignment.teachers.all %}
                            {{teacher.user.username|capfirst}}
                            {% endfor %}
                          </p>
                        </li> 
                      </ul>

                      <hr>

                      <div class="card-title" style="white-space: initial; ">
                          <a href="#" data-toggle="modal" data-target="#task-modal">
                            <h6 style="font-weight: 600; color: rgb(82, 130, 202)">
                              Börja Plugga. Skapa en studieplan
                            </h6>
                          </a>
                        </div>




                  </div>
                </div>

                {% endfor %}
              </div>

This is a piece of the modal:

 <div class="modal modal-task" id="task-modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="modal-title">Create Brand Mood Boards</h5>
              <button type="button" class="close btn btn-round" data-dismiss="modal" aria-label="Close">
                <i class="material-icons">close</i>
              </button>
            </div>
            <!--end of modal head-->
            <div class="modal-body">
              <div class="page-header">

                <p class="lead">Assemble three distinct mood boards for client consideration</p>
                <div class="d-flex align-items-center">

                  <button class="btn btn-round" data-toggle="modal" data-target="#user-manage-modal">
                    <i class="material-icons">add</i>
                  </button>
                </div>
                <div>
                  <div class="progress">
                    <div class="progress-bar bg-success" style="width:42%;"></div>
                  </div>
                  <div class="d-flex justify-content-between text-small">
                    <div class="d-flex align-items-center">
                      <i class="material-icons">playlist_add_check</i>
                      <span>3/7</span>
                    </div>
                    <span>Due 14 days</span>
                  </div>
                </div>
              </div>
              <ul class="nav nav-tabs nav-fill" role="tablist">
                <li class="nav-item">
                  <a class="nav-link active" data-toggle="tab" href="#task" role="tab" aria-controls="task" aria-selected="true">Task</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" data-toggle="tab" href="#files" role="tab" aria-controls="files" aria-selected="false">Files</a>
                </li>

              </ul>
              <div class="tab-content">
                <div class="tab-pane fade show active" id="task" role="tabpanel">
                  <div class="content-list" data-filter-list="checklist">

the javascript:

<script>
                 $('#task-modal').on('show.bs.modal', function(event) {
                 var Id = $(event.relatedTarget).data('id');
                 console.log("aaa")
                 $(event.currentTarget).find('input[name="modal-title"]').val(Id);
                });
               </script>

As I said. I want a detail page of a card. So when I press the card I get a popup. I want that popup to contain a more detailed page of the card. I can't figure out how to get the data into the popup modal tho (task-modal) I think this is close but if anyone could help it would be greatly appreciated!

Answer 1

Three issues:

• Your javascript is inside the for loop ({% for assignment in förseningar %}), it should be outside. Otherwise it's repeated x times.
• var Id = $(event.relatedTarget).data('id') means that the button triggering the modal has a data-id attribute. But yours doesn't, it has an id attribute. So either set data-id="{{ assignment.id }}" in the <div class="card card-kanban" ...> or change to var Id = $(event.relatedTarget).attr('id').
• $(event.currentTarget).find('input[name="modal-title"]') means you're looking for an <input name="modal-title"> element in your modal, but I don't see that anywhere. Maybe it got cut-off in which case no issue. But if you're trying to change the modal-title div of your modal, then the selector should be: $(this).find('.modal-title').

Note: I use $(this) instead of $(event.currentTarget). Shouldn't make any difference as the currentTarget is the modal and so is this.