Удалить строки, используя модальное подтверждение - PullRequest
Новая
       20

Удалить строки, используя модальное подтверждение

0 голосов
/ 10 ноября 2019

Я создал простую таблицу данных , которая включает следующие действия ( Редактировать, Удалить ).

Я добавил к кнопке Удалить подтверждение удаления в модальном .

Проблема заключается в том, что пользователь нажимает "Да" , что означает удалить , строкупродолжает показывать и не удаляется. Вот HTML-код модального сообщения: 

<div id="myModal" class="modal fade">
  <div class="modal-dialog modal-confirm">
    <div class="modal-content">
      <div class="modal-header">
        <div class="icon-box">
          <i class="material-icons">&#xE5CD;</i>
        </div>
        <h4 class="modal-title">Are you sure?</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body">
        <p>Do you really want to delete these records? This process cannot be undone.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger" id="btnDelteYes">Delete</button>
      </div>
    </div>
  </div>
</div>

Вот код jQuery Кнопка удаления : 

$(document).ready(function() {
  $("form").submit(function(e) {
    e.preventDefault();
    var name = $("input[name='name']").val();
    var email = $("input[name='email']").val();

    $(".data-table tbody").append("<tr data-name='" + name + "' data-email='" + email + "'><td>" + name + "</td><td>" + email + "</td><td><button id='test5' class='btn btn-info btn-xs btn-edit'>Edit</button><button class='btn btn-danger btn-xs btnDelete' id='test6'>Delete</button></td></tr>");

    $("input[name='name']").val('');
    $("input[name='email']").val('');
  });
  $("body").on('click', '.btn.btnDelete', function() {
    var id = $(this).closest('tr').data('id');
    $('#myModal').data('id', id).modal('show');
  });


  $("body").on("click", function() {
    $("#btnDelteYes").parents("tr").remove();
    $('#myModal').modal('hide');
  });
});

Мне нужна помощь, чтобы справиться с этимвыпустить и узнать, что я делаю не так. Любая помощь будет оценена.

Спасибо!

1 Ответ

0 голосов
/ 10 ноября 2019

Я внес следующие изменения в вашу базу код (удалите код, не связанный с вопросом): 

$(document).ready(function() {
  $("form").submit(function(e) {
    e.preventDefault();
    var name = $("input[name='name']").val();
    var email = $("input[name='email']").val();

    var trLen = $(".data-table").find("tr").length;

    $(".data-table tbody").append("<tr data-name='" + name + "' data-email='" + email + "'><td>" + name + "</td><td>" + email + "</td><td><button id='edit" + trLen + "' class='btn btn-info btn-xs btn-edit'>Edit</button><button class='btn btn-danger btn-xs btnDelete' id='delete" + trLen + "'>Delete</button></td></tr>");

    $("input[name='name']").val('');
    $("input[name='email']").val('');
  });
  
  $("body").on('click', '.btn.btnDelete', function() {
    var id = $(this).attr('id');
    $('#myModal').data('id', id).modal('show');
  });


  $("body").on('click', '#btnDelteYes', function() {
    var id = $('#myModal').data('id');
    $('#' + id).parents("tr").remove();
    $('#myModal').modal('hide');
  });
});
.navbar-nav>li {
  padding-left: 30px;
  padding-right: 30px;
}

.navbar-nav>li {
  margin-left: 30px;
  margin-right: 30px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<body>
  <div id="myModal" class="modal fade">
    <div class="modal-dialog modal-confirm">
      <div class="modal-content">
        <div class="modal-header">
          <div class="icon-box">
            <i class="material-icons">&#xE5CD;</i>
          </div>
          <h4 class="modal-title">Are you sure?</h4>
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        </div>
        <div class="modal-body">
          <p>Do you really want to delete these records? This process cannot be undone.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-danger" id="btnDelteYes">Delete</button>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <form>
      <div class="form-group">
        <div class="form-group">
          <h2><span class="badge badge-secondary">Full Name*</span></h2>
          <input type="text" name="name" class="form-control" value="Julien" required="">
          <div class="alert alert-warning alert-dismissible fade show">
            <strong>Warning!</strong> Please the Fullname field is required.
            <button type="button" class="close" data-dismiss="alert">&times;</button>
          </div>
        </div>

        <div class="form-group">
          <h2><span class="badge badge-dark">Email*</span></h2>
          <input type="text" name="email" class="form-control" value="julien@gmail" required="">
        </div>
        <div class="alert alert-warning alert-dismissible fade show">
          <strong>Warning!</strong> Please the Email field is required.
          <button type="button" class="close" data-dismiss="alert">&times;</button>
        </div>
      </div>

      <button type="submit" class="btn float-right mb-3 mr-2">
	<i class="text-success fas fa-plus fa-2x"></i>
  </button>

    </form>
    <br/>
    <table class="table table-bordered data-table">
      <thead>
        <th>Name</th>
        <th>Email</th>
        <th>Options</th>
      </thead>
      <tbody>

      </tbody>
    </table>
  </div>
</body>

Во-первых, все ваши идентификаторы кнопок одинаковы, они должны быть уникальными.

Во-вторых, когда вы нажимаете кнопку удаления, цель id неверна. поэтому измените var id = $(this).closest('tr').data('id') на var id = $(this).attr('id');

В-третьих, когда вы нажимаете кнопку подтверждения удаления, хотя вы правильно получили id, вы не использовали его. поэтому измените $('#btnDelteYes').parents("tr").remove(); на $('#' + id).parents("tr").remove();.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...