Как подсказать модал, который спросит пользователя, хочет ли он удалить выбранную строку или нет? (jQuery) - PullRequest
Новая
       7

Как подсказать модал, который спросит пользователя, хочет ли он удалить выбранную строку или нет? (jQuery)

0 голосов
/ 06 марта 2020

Мне необходимо создать программу, которая будет принимать входные данные из модального режима и помещать их в таблицу. Каждая строка должна иметь значок редактирования и удаления (используя FontAwesome). Для контекста этого вопроса я сосредотачиваюсь на значке / кнопке удаления. В настоящее время значок удаления должен представлять собой кнопку, которая после нажатия отображает модальный вопрос, спрашивающий пользователя, уверен ли он, что он хочет удалить информацию в строке. Модал будет содержать две кнопки, дающие пользователю возможность выполнить одно из двух действий (кнопка «Да» - удаляет строку и все ее содержимое; кнопка «Нет» - просто закрывает модал). Ниже я дал код jQuery (его нужно записать в jQuery), до сих пор мой код отображал значки в виде кнопок, и после нажатия на значок / кнопку удаления удаляется строка, но только тогда отображается модал. (в настоящее время модал не имеет функциональности, ie. Ни одна из кнопок ничего не делает).

jQuery: 

function deleteData(btnDelete) {
  $(btnDelete).parents("tr").remove();
}

function openModal() {
  $('#modalDelete').show();
}

//function that adds input values to the table
function addToTable() {
  //add tbody tag if one is not present
  if($("#inputTable tBody").length == 0) {
    $("#inputTable").append("<tbody></tbody>");
  }

  $(function() {
    $('#insertImage').on('change', function()
    {
      var filePath = $(this).val();
      console.log(filePath);
    });
  });

  //append inputs to the Table
  $("#inputTable tbody").append(
    "<tr>" +
      "<td>" +  + "</td>" +
      "<td>" + $("#addName").val() + "</td>" +
      "<td>" + $("#addSurname").val() + "</td>" +
      "<td>" +
        "<button type='button' " +
          "class='btn'><i class='fas fa-user-edit' id='pencilIcon'></i></button>" +
      "<td>" +
        "<button type='button' " +
          "onclick='deleteData(this); openModal();'" +
          "class='btn'><i class='fas fa-dumpster' id='dumpsterIcon'></i></button>" +
        "</button>" +
      "</td>" +
    "</tr>"
  );


}

//add the inputed content to the table
$("#addToTable").click(function(){
  addToTable();
});

HTML (таблица): 

  <div class="modal fade" id="addDataToTable" tabindex="-1" role="dialog" aria-labelledby="website" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Add Data to Table</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form class="" action="index.html" method="post">
            <form>
              <div class="form-group">
                <label for="insertImage">Insert Image</label>
                <input type="file" class="form-control-file" id="InsertImage" accept="image/x-png,image/gif,image/jpeg" aria-describedby="inputHelp">
              </div>
              <div class="form-group">
                <label for="addName">Name</label>
                <input type="text" class="form-control" id="addName">
              </div>
              <div class="form-group">
                <label for="addSurname">Surname</label>
                <input type="text" class="form-control" id="addSurname">
              </div>
            </form>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" id="addToTable">Add to Table</button>
        </div>
      </div>
    </div>
  </div>

HTML (Удалить модал): 

  <div class="modal" tabindex="-1" role="dialog" id="modalDelete">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Are you sure you want to delete?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Yes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
      </div>
    </div>
  </div>
</div>

Любая помощь будет принята с благодарностью !!

1 Ответ

1 голос
/ 06 марта 2020

вот чистое javascript решение: 

var delete = confirm("Are you sure you want to delete this row?");
if (delete ) { 
  //code to delete
}
...