how to have dynamic modal in datatable

Question

{% for key,value in config.items %}
     <button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-id={{ key }} data-target="#myModal"><i class="glyphicon glyphicon-pencil" aria-hidden="true"></i></button>{{key}}

            </td>

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
      <div class="modal-dialog" id=  {{ forloop.counter }>
    <div class="modal-content">
          <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title custom_align" id="Heading">Edit Your Version for <strong>{{key}}</strong></h4>
      </div>
          <div class="modal-body">
          <div class="form-group">
        <input class="form-control " type="text" placeholder={{key}} {{ forloop.counter }}>
            {{ forloop.counter }}
                </div>
      </div>
          <div class="modal-footer ">
        <button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-ok-sign"></span> Accept</button>
         <button type="button" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove-circle"></span> Reject</button>
    </div>
      </div>
        </div>
    <!-- /.modal-content -->
  </div>
      <!-- /.modal-dialog -->
    </div>

{% endfor %}

//I have a datatable where the rows are getting populated based on the loop values. Now inside the datatable in one particular row I have a button upon clicking it I should display the values of the particular row.

But the problem I am facing is only the first value is getting displayed in the modal.

when I am trying to check through {{ forloop.counter }} The value is always 1 inside the modal.But if i check outside the modal it is incrementing. Can anyone guide me

You are using the same `id` (`myModal`) for multiple `div`s which is not correct. You should also be modifying the modal's `id` and `button`'s `data-target`. — Selcuk, May 23 '18 at 05:39
If items is the foreignkey from config to some other model, you should change {% for key,value in config.items %} to {% for key,value in config.items.all %} — DisneylandSC, May 23 '18 at 06:08
how to change data-target ..i tried doing data-target=#{{key}} and modal id by {{key}} — Nikhilsome, May 23 '18 at 06:11
check this [answer](https://stackoverflow.com/a/50196505/5644965) — Lemayzeur, May 23 '18 at 06:28
if i try to do the above way the modal itself is not opening @ Lemayzeur — Nikhilsome, May 23 '18 at 09:24

how to have dynamic modal in datatable

0 Answers0