Home » Javascript » how to have dynamic modal in datatable

how to have dynamic modal in datatable

Posted by: admin June 30, 2018 Leave a comment

Questions:
{% 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

Answers: