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">×</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>'
);
});
在我的 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">×</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>'
);
});