如何讓按鈕/鏈接可以像某個帖子一樣使用 {{obj.pk}} 來定位物件 pk 然后打開一個模態編輯模態并洗掉 modal。
然后模態可以使用AJAX（Fetch API或Jquery）在不重繪 的情況下成功編輯和洗掉。我有問題以模式為目標以打開具有某些 PK 的帖子。我不能使用 id="editPost{{obj.id}}" 或 id="deletePost{{obj.id}}" 來定位模態，因為那樣我需要將模態放在 forloop 中，然后模態將針對每個重復郵政。
這里有一些代碼：
{% for obj in page_obj %}
<li>
<a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#editPost" href="{% url 'post-update' obj.pk %}">Edit Post</a>
</li>
<li>
<a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#deletePost" href="{% url 'post-delete' obj.pk %}">Delete Post</a>
</li>
<div id="post{{obj.id}}" class="box-content">
<p class="box-text mb-2">{{ obj.content }}</p>
<span class="username">{{ obj.username }}</span>
</div>
{% endfor %}
<div class="modal fade" id="deletePost" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Delete Post?</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete your post?</p>
</div>
<div class="modal-footer">
<button type="button" class="rvg-button-small" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="rvg-button-small">Delete</button>
</div>
</div>
</div>
</div>
我實作 AJAX 的方式是使用
<a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#editPost" onclick="EditPost('{{ obj.id }}')">
<a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#deletePost" onclick="DeletePost('{{ obj.id }}')">
const DeletePost = (post_id) => {
fetch("/" post_id "/delete/", {
method: "POST",
credentials: 'same-origin',
headers: { "X-CSRFToken": getCookie("csrftoken") },
})
.then((res) => res.json())
.then((data) => {
document.getElementById(`post${post_id}`).remove()
console.log("successfully deleted")
}).catch((e) => alert("Error deleting post."));
}
uj5u.com熱心網友回復：
您可以通過使用data-<something>以及引導程式使用 將引數傳遞給您的模態data-bs-<something>。
<a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#deletePost" data-object-id="{{ obj.id }}" onclick="DeletePost()">
然后使用 js，在里面DeletePost你需要提取pk你傳遞給它的引數或任何其他引數。dataset 在這里閱讀更多資訊。
另一種選擇是用匿名函式包裝您的函式，以將引數傳遞給內部函式，最后呼叫外部（匿名）函式。
在這種情況下，我使用箭頭函式語法，但等效于函式定義的常規語法：
<a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#deletePost" onclick="(() => { DeletePost({{ obj.id }}) })()">
我會推薦第一個選項，因為（我認為）當您需要將多個引數傳遞給函式但它們中的任何一個都應該作業時，它對未來的使用更加靈活。
編輯：我之前忘了提到這一點。如果您使用第一個選項，請確保在 html 元素中呼叫您的函式時傳遞該事件，以獲得點擊目標元素和附加到它的資料集。
你的元素應該是這樣的：
<a ... onclick="DeletePost(event)">。
您的 js 函式將接收事件作為引數：
const DeletePost = (event) => {
const btn = event.target; // the clicked button.
const object_id = btn.dataset.objectId;
console.log(object_id); // should display the right id.
}
編輯2：
為了能夠在模態中呼叫您的 Django URL：
洗掉for 回圈內元素中的
href屬性<a>或替換標簽<a>以<button>保留引導程式需要顯示您的模式的屬性。這將防止在沒有首先顯示模態的情況下過早呼叫您的 Django 視圖。也保留data-object-id屬性。在模態代碼中，將
<button>頁腳中的元素替換為以下內容：
<a id="delete-post-btn" class="rvg-button-small" href="{% 'DeletePost' %}">Delete</a>
請記住，在此階段，href由于缺少object-id.
- 為modal創建一個事件監聽器，監聽事件'shown.bs.modal'就知道modal何時打開，提取物件id完成
href屬性：
document
.getElementById('deletePost')
.addEventListener('shown.bs.modal', (event) => {
// The modal is open and the object-id can be extracted.
event.preventDefault(); // this step may not be needed.
const btn = event.relatedTarget; // this is the button that contains the data-<something> attrs
const objectId = btn.dataset.objectId;
// Now we add the object-id value to the href.
const modal_btn = document.getElementById('delete-post-btn');
modal_btn.href = String(objectId);
})
現在href應該是完整的，按鈕應該能夠使用正確的物件 ID 呼叫 Django 視圖 URL。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/370788.html
標籤：javascript Python html 姜戈 阿贾克斯