Modal删除表中的第一行错误.如何获得与DELETE按钮相关联的正确ID ?

Question

我一整天都在忙这个。我查过了，医生有点少。我确实认识到我正在获得表顶部的第一个ID，因为这些ID都是相同的。我不知道怎么把"正确"写出来。删除行时的ID。模态弹出了，删除成功了。这只是错误的记录被删除…

HTML

{% for notify in notify_list %}
<tr style="vertical-align:top">
<td class="hide">
<div id="myModaldelete" class="modaldelete">
<div class="modal-content-delete">
<span class="closedelete"></span>
<img class="logo4" src="/static/images/threecircles.svg">
<p>Delete Request?</p>
<button type="button" class="button165" id="yesBtndelete" value="{{ notify.id }}">Yes</button>
<button type="button" class="button160" id="noBtndelete">No</button>
</div>
</div>
<button type="button" class="button114">
<div class="txtalgn114"><h2 class="txtalgn114a">Delete</h2></div></button>
</td>
</tr>
{% endfor %}

我的Javascript…

// Get the modal
var modaldelete = document.getElementById("myModaldelete");
// Get the button that opens the modal
var btndelete = document.getElementById("myBtndelete");
// Get the button that opens the modal
var nobtndelete = document.getElementById("noBtndelete");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("closedelete")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function(e) {
e.preventDefault();
modaldelete.style.display = "none";
}
// When the user clicks on the No button, close the modal
nobtndelete.onclick = function(e) {
e.preventDefault();
modaldelete.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modaldelete ) {
modaldelete.style.display = "none";
}
}
$(document).on('click', '.button114', function(e) { // note the e, thats the event
modaldelete.style.display = "block";
});
$(document).on('click', '.button165', function(e) { // note the e, thats the event
var id = $(this).val();          
document.location.href = "/url/" + id;
});

我读过关于可能将ID添加到ID名称，以便它是唯一的可能的解决方案…我只是想不出如何让它工作……提前感谢任何想法....我不是故意使用BootStrap…只是为了记录…

Answer 1

您可能只是打开了错误的模态，因为您使用:

modaldelete = document.getElementById("myModaldelete");

但是不会有不止一个这样的，因为你在循环并创建情态动词:

{% for notify in notify_list %}

您可能想要这样做:

{% set index = 0 %}
{% for notify in notify_list %}
<tr style="vertical-align:top">
<td class="hide">
<div id="myModaldelete{{index}}" class="modaldelete">
...
{% index++ %}
{% endfor %}

这将给模态不同的id，然后你需要引用哪个模态打开按钮，如:

<button type="button" class="button114" onclick="openModal({{index}})">
<div class="txtalgn114"><h2 class="txtalgn114a">Delete</h2></div></button>

和内部openModal():

function openModal(index) {
var modaldelete = document.getElementById("myModaldelete" + index);
modaldelete.style.display = "block";
}

希望这有效!

Answer 2

首先，您将id赋予重复的HTML元素是错误的。您可以通过将id值改为class来避免这种情况。然后，您可以在data属性中提供行ID:

<button type="button" class="myBtndelete" data-id="{{ notify.id }}">Yes</button>
<button type="button" class="noBtndelete">No</button>

现在，你可以用getElementByClassName代替myBtndelete按钮。

同样，你也可以在点击时使用:

获取ID值

$(document).on('click', '.myBtndelete', function(e) { 
var id = $(this).data('id')
document.location.href = "/url/" + id; 
});

的另一种方式:您可以将button元素替换为a元素，以便在不使用JavaScript显式处理点击的情况下动态地赋予它们href属性，但是您必须处理锚定a元素的样式，以使按钮看起来像给它们一些Bootstrap类:

<a href="/some-url/{{notify.id}}" class="btn btn-primary myBtndelete">Yes</a> 

Answer 3

Ok…在玩了一两天这个概念后……我想明白了…我遗漏了一些东西……最重要的是Javascript和ID值之间的来回…我必须添加以下Javascript逻辑…我将模态移出循环，并添加了一个隐藏输入来获取ID值。感谢所有帮助我拼凑这个的人。事情很复杂。至少对我来说是这样。

$('.button114').on('click', function (event) {
modaldelete[0].style.display = "block";
var id = $(this).data('id');
document.getElementById("modal-input-value").value = id;
});
$('.button165').on('click', function (event) {
// Get the hidden input element
var hiddenInput = document.getElementById("modal-input-value");
// Get the value of the hidden input
var id = hiddenInput.value;
document.location.href = "/url/" + id;
});
<div id="myModaldelete{{ notify.id }}" class="modaldelete">
<div class="modal-content-delete">
<span class="closedelete"></span>
<img class="logo4" src="/static/images/threecircles.svg">
<p>Delete Request?</p>
<input type="hidden" id="modal-input-value">
<button type="button" class="button165">Yes</button>
<button type="button" class="button160" id="noBtndelete">No</button>
</div>
</div>
{% for notify in notify_list %}
<tr style="vertical-align:top">
{% if user.userprofile.eDirector_queue_delete_confirm == "Yes" %}
<td class="hide">
<button type="button" class="button114" data-id="{{ notify.id }}">
<div class="txtalgn114"><h2 class="txtalgn114a">Delete</h2></div></button>
</td>
{% endif &}
{% endfor %}