django 在弹出窗口中传递 id

django passing id in popup

在我的 Django 项目中,我想从弹出的用户列表中编辑用户

{%for data in data%}
      
      <tr>
        <td>{{data.firstname}}</td>
        <td>{{data.phonenumber}}</td>
      
        <td>
          <button type="button" class="btn btn-success"  data-bs-toggle="modal" data-bs-target="#staticBackdrop">
           view Savings
         </button>
         </td>
         </tr>
{%endfor%}

弹出窗口

  <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header" style="background-color:#136de4;color:white" >       
    <h5 class="modal-title" id="staticBackdropLabel">Edit Profile</h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  </div>
  <div class="modal-body">
    
    <div class="card-body">
     <form method="post" id="formOne">
       {% csrf_token %}
       {{form.as_p}}
    <div class="modal-footer">
    <a href="{%url 'customer:savingsprofile' data.id%}"><button type="submit" class=" btn bg-gradient-info text-white btn-sm m-1" data-bs-dismiss="modal">Save Changes</button></a>
    </div>
    </form>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  </div>
</div>
</div>
</div>

但在弹出窗口中它仅显示 table

的第一个(同时单击另一行)数据

我认为您需要将数据从列表传递到弹出窗口。

您可以尝试类似的方法:

按钮

<a data-license-pk="{{ license.pk }}" data-license-title="{{ license.title }}" class="btn btn-danger btn-sm" href="#" data-toggle="modal" data-target="#deleteLicense">
    <i class="fas fa-trash"></i>
</a>

模态内容

<!-- Modal -->
<div class="modal fade" id="deleteLicense" tabindex="-1" role="dialog" aria-labelledby="deleteLicenseLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="deleteLicenseLabel">Delete License</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <a  id="delete_link" class="btn btn-danger">Delete</a>
        </div>
      </div>
    </div>
</div>

还有魔法

$("#deleteLicense").on("show.bs.modal", function (event) {
  var button = $(event.relatedTarget); // Button that triggered the modal
  var pk = button.data("license-pk"); // Extract info from data-* attributes
  var title = button.data("license-title"); // Extract info from data-* attributes
  var modal = $(this);
  modal.find(".modal-title").text("Delete #" + pk);
  modal.find("#delete_link").attr("href", "/licenses/delete/" + pk);
  modal
    .find(".modal-body")
    .html(
      `Are you sure to delete license?: <br><br><b>${title}</b>` +
        "<br>" +
        "<br>All docs will be deleted. <br><br>" +
        '<span class="text text-danger">Are you sure? </span>'
    );
});