Django，使用javascript打开带有值的模态表单

Question

我是 django 和 javascript 的新手，我尝试使用 rowid 的值打开模式，最后我可以传递值但无法在下面的代码中打开表单；

HTML 内部：

<thead>
      {% for customer in object_list %}
      <tr>
        <td>{{ customer.id }}</td>
        <td>{{ customer.name }}</td>
        <td>{{ customer.surname }}</td>
        <td>{{ customer.gender }}</td>
        <td>{{ customer.email }}</td>
        <td>{{ customer.phone }}</td>
        <td>{{ customer.bloodtype }}</td>
        <td><a href=# data-target="#my_modal" data-toggle="modal" class="identifyingClass" data-id="{{ customer.id }}">Open Modal</a> </td>
      </tr>
      {% endfor %}
    </thead>

我的模态

<h2>Modal</h2>
<div class="modal fade" id="my_modal" tabindex="-1" role="dialog" aria-labelledby="my_modalLabel">
<div class="modal-dialog" role="dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
        </div>
        <div class="modal-body">

          <form method="post">
            {% csrf_token %}
              {{ form.as_p }}
              <input type="submit" value="Update">
          </form>

            <input type="hidden" name="hiddenValue" id="hiddenValue" value="{{ customer.id }} />
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            <button type="button" class="btn btn-primary">Yes</button>
        </div>
    </div>
</div>

Javascript

<script type="text/javascript">
$(function () {
 $(".identifyingClass").click(function () {
     var my_id_value = $(this).data('id');
     $(".modal-body #hiddenValue").val(my_id_value);
 })
});
</script>

Answer 1

只是为了显示模式，这段代码有效。还添加了按钮“否”的功能，关闭模态表单。 您需要其他方面的帮助吗？

$(function () {
 $(".identifyingClass").click(function () {
     $('.main-modal').show();
     var my_id_value = $(this).data('id');
     $(".modal-body #hiddenValue").val(my_id_value);
 })
});

$(function () {
 $("#close-modal").click(function () {
     $('.main-modal').hide();
     
 })
});

.main-modal{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<thead>
      <tr>
        <td>1</td>
        <td>a</td>
        <td>as</td>
        <td>male</td>
        <td>email@asdasd.com</td>
        <td>asdasd</td>
        <td>A</td>
        <td><a href=# data-target="#my_modal" data-toggle="modal" class="identifyingClass" data-id="1">Open Modal</a> </td>
      </tr>
    </thead>
    
<div class="main-modal">
<h2>Modal</h2>
<div class="modal fade" id="my_modal" tabindex="-1" role="dialog" aria-labelledby="my_modalLabel">
<div class="modal-dialog" role="dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
        </div>
        <div class="modal-body">

          <form method="post">
            {% csrf_token %}
              {{ form.as_p }}
              <input type="submit" value="Update">
          </form>

            <input type="hidden" name="hiddenValue" id="hiddenValue" value="{{ customer.id }} />
        </div>
        <div class="modal-footer">
            <button id="close-modal" type="button" class="btn btn-default" data-dismiss="modal">No</button>
            <button type="button" class="btn btn-primary">Yes</button>
        </div>
    </div>
</div>
</div>