How to Pass Data to a Modal

$("#deleteTaskModal").on('show.bs.modal', function(event) {
  var button = $(event.relatedTarget) //Button that triggered the modal
  var id = button.find('button').data('id') //need to find the button and get id
  var url = '/delete/' + id; //url

  console.log('data-id= ' + id) //15

  //Click delete task in modal
  $(document).on('click', '.delete_task', function() {
    if (confirm('Delete task')) {
      $.ajax({
        url: url,
        type: "DELETE",
        success: function(result) {
          $('#deleteTaskModal').modal('hide') //hide modal on success
          console.log("Deleting task...");
          window.location.href = '/';
        },
        error: function(err) {
          console.log(err);
        }
      })
    }
  })
})

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

<span data-toggle="tooltip" data-placement="bottom" title="Delete task">
    <a data-toggle="modal" data-target="#deleteTaskModal">
        <button class="deleteTask fas fa-trash-alt" data-id='15'></button>
    </a>
</span>

<div class="modal fade" id="deleteTaskModal" tabindex="-1" aria-labelledby="exampleformModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form class="" action="" method="">
        <div class="modal-header">
        </div>
        <div class="modal-body">
          <h3>Do you want to delete this task?</h3>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary delete_task">Delete Task</button>
        </div>
      </form>
    </div>
  </div>
</div>
</div>

How to pass data to normal CSS/JS modal

You can just add data-* attributes to your modal's main container and use it later.

<div id="myModal" class="modal" data-foo="bar"> <!-- ... --> </div>

// Get the modal
var modal = document.getElementById("myModal");

/*...*/

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";

    // append data-foo value to the modal's content
    modal.querySelector('.modal-content p').innerText = modal.dataset.foo;
}

Here's an example of how datasets work: https://codepen.io/kmsdevnet/pen/ExggvyP

dataset documentation:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/dataset

---

Related Topics