模态正在错误地删除表中的第一行。 如何获得与我的删除按钮关联的正确 ID？

Question

I've been at this all day. I've researched it and the docs are a bit scarce. I do recognize that I am getting the first ID at the top of the table because the IDs are all the same. I don't know how to get the "right" ID when I'm deleting the row. The modal is popping..and the delete works...it's just the wrong record gets deleted...

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 %}

My 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;

   });

I've read about maybe adding the ID to the ID name so that it's unique as a possible solution...I just can't figure out how to get it to work...Thanks in advance for any thoughts....I'm not using BootStrap on purpose...Just for the record...

Answer 1

You might just be opening the wrong modal, since you're opening the modal with:

modaldelete = document.getElementById("myModaldelete");

but wouldn't there be more than one of these, because you're looping through and creating the modals in the:

 {% for notify in notify_list %}

You'd probably want to do something like:

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

which would give the modals different ids, and then you'd need to reference which modal to open with the button like:

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

and inside openModal():

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

Hopefully that works!

Answer 2

First of all, you are doing a mistake by giving id to repeated HTML elements. You can avoid such by giving that id value as class instead. Then, you can give your row ID in a data attribute:

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

Now, you can get all your myBtndelete buttons by using getElementByClassName instead.

Also, you can get the ID value on click using:

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

Another way: You can replace your button elements with a elements in order to give them href attribute on the fly without having to handle the click explicitly using JavaScript, but you have to handle the styling of the anchor a elements to have the button look and feel like giving them some Bootstrap classes:

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

Answer 3

Ok...After about a day or two of playing with this concept...I figured it out...I was missing a few things...Most importantly the back and forth with the Javascript and the ID value...I had to add the following Javascript logic...I moved the modal out of my loop and added a hidden input to get the ID value. Thanks to all who helped me piece this one together. It was complicated. For me anyway.

   $('.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 %}