Modal Is Deleting The First Row In The Table Incorrectly. How Do I get the right ID associated with-CodePudding

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 >
            <div id="myModaldelete" >
              <div >
                <span ></span>
                <img  src="/static/images/threecircles.svg">
                <p>Delete Request?</p>
                <button type="button"  id="yesBtndelete" value="{{ notify.id }}">Yes</button>
                <button type="button"  id="noBtndelete">No</button>
              </div>
            </div>
            <button type="button" >
            <div ><h2 >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...

CodePudding user response：

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 >
            <div id="myModaldelete{{index}}" >
...
  {% 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"  onclick="openModal({{index}})">
        <div ><h2 >Delete</h2></div></button>

and inside openModal():

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

Hopefully that works!

CodePudding user response：

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"  data-id="{{ notify.id }}">Yes</button>
<button type="button" >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}}" >Yes</a>