reset/refresh modal data on each click event

Question

Okay so I am trying to have a table displaying results from a query. I want the data in the table to be truncated and the user to be able to see the full data in a modal.

I have tried implementing this as seen below. However, the modal is displaying the same result in every column for the first row. It seems as though once the modal takes data it won't change dynamically on iteration to load new data.

So my question is what is the best way to handle this type of dynamic request and how would I implement it? Should I try to dynamically load the data with an ajax request or is there a way to reset that modal on each click to load new data?

Please see the code below and thanks!

Template:

<td class='test'>{{ value.4 }}<a href='#' id="trigger_{{ forloop.counter }}"><img src='{% static "img/expand-icon2.png" %}' id="expand"></a>
    {% if methods %}
    {% for key2, value in methods %}{% ifequal key2 key %}
    <div id="classModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="classInfo" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            ×
            </button>
            <h4 class="modal-title" id="classModalLabel">
                Triples:
                </h4>
        </div>
        <div class="modal-body">
            <table id="classTable" class="table table-bordered">
            <thead>
                <tr>
                <th style="width: 4%">#</th>
                <th>Subject</th>
                <th>Predicate</th>
                <th>Object</th>
                <tr>
            </thead>
            <tbody>
                {% for item in value %}
                    <tr>
                    <td scope="row">{{ forloop.counter }}.</td>
                    <td>{{ item }}</td>
                    <td>{{ item }}</td>
                    <td>{{ item }}</td>
                    </tr>

                {% endfor %}
            </tbody>
            </table>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">
            Close
            </button>
        </div>
        </div>
    </div>
    </div>
    {% endifequal %}
    {% endfor %}
    {% endif %}
</td>
{% else %}
<td>No Provenance Terms Found</td>
{% endif %}

Javascript:

<script type="text/javascript">

    $('.test').each(function(){
      var trig = '[id^="trigger_"]';
      $(trig).click(function(){
        $('#classModal').modal('show');
        return false;
      })

    });
  </script>

Answer 1

you can use this jquery for reloading the modal. here you can use .modal-body1 class to reset the exact data field. you can use any class names.

insert this code on your click function.

$(document).ready(function() {
   $(".modal").on("hidden.bs.modal", function() {
   $(".modal-body1").html("");
   });
 });