JS оповещение вызывается кнопкой «Да» из модема начальной загрузки - PullRequest
Новая
       14

JS оповещение вызывается кнопкой «Да» из модема начальной загрузки

0 голосов
/ 04 сентября 2018

Я уже задавал этот вопрос вчера, но думаю, что не объяснил свою проблему хорошо. Поэтому я пытался удалить строку таблицы, если нажата кнопка возврата, но я также хочу убедиться, что щелчок не был случайным, поэтому должно быть модальное всплывающее окно, которое снова спрашивает, и если вы нажмете «да», то модальное должно закрыться и ряд должен быть удален. Моя проблема в том, что функция второго щелчка, которая должна срабатывать в модальном режиме, если вы нажмете «да», не срабатывает.

Вот мой фрагмент кода: 

$(document).ready(function() {

  var rowToDelete;

  $('#myModal').on('shown.bs.modal', function() {
    $('#myInput').trigger('focus');
  });

  $('#booked').click(function() {

    $('.ret').click(function() {
      var id = $(this).val();
      alert(id); //to test if this function gets triggered
      $('#myModal .delBtn').data('row-id', id); //set data id
      rowToDelete = $(this).closest('tr'); //store row in variable
    })
  });

  $('#booked').addClass('active'); //not necessary
  $('#book').removeClass('active');
  $('#admin').removeClass('active');

});

$(document).on("click", '#myModal .delBtn', function() {

  var rowId = $(this).data('row-id');
  alert("you removed" + rowId); //this alert never appears so this function is not getting triggered

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

  <div id="booked">
    <div class="row scrollableBooked">
      <div class="table-responsive">
        <table class='table table-bordered' id='bookedtable'>
          <thead>
            <tr>
              <th colspan='6' class='bookedHeader'>Booking for: example booking</th>
            </tr>
            <tr>
              <th>Type</th>
              <th>Serial Number</th>
              <th>Info</th>
              <th>Return</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Device 1</td>
              <td>12345 </td>
              <td>lorem ipsum (id 12)</td>
              <td><button value='11' class='btn ret' data-toggle='modal' data-target='#deleteModal'>return</button></td>
            </tr>
            <tr>
              <td>Device 1</td>
              <td>12345 </td>
              <td>lorem ipsum (id 25)</td>
              <td><button value='25' class='btn ret' data-toggle='modal' data-target='#deleteModal'>return</button></td>
            </tr>
            <tr>
              <td>Device 1</td>
              <td>12345 </td>
              <td>lorem ipsum (id 64)</td>
              <td><button value='64' class='btn ret' data-toggle='modal' data-target='#deleteModal'>return</button></td>
            </tr>
            <tr>
              <td>Device 1</td>
              <td>12345 </td>
              <td>lorem ipsum (id 34)</td>
              <td><button value='34' class='btn ret' data-toggle='modal' data-target='#deleteModal'>return</button></td>
            </tr>
          </tbody>
        </table>

      </div>
    </div>

    <!--Delete Modal-->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h3 class="modal-title" id="exampleModalLabel">Return Device</h3>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
          </div>

          <div class="modal-body">
            <div class="container">
              <div class="row">
                <div class="col">
                  <p><b> Are you sure you want to return this device? </b></p>
                  This is a test.
                </div>
              </div>
            </div>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
            <button type="button" class="btn btn-primary delBtn">Yes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Ответы [ 3 ]

0 голосов
/ 04 сентября 2018

Хорошо. Вы выдаете #myModal. Модал, который вы пытаетесь выбрать, - #deleteModal. Есть 2 места, которые вы используете #myModal. Измените их на #deleteModal, и все готово.

0 голосов
/ 04 сентября 2018

Событие click не вызывается, поскольку идентификатор элемента «myModal» не существует. Если вы замените myModal на deleteModal, появится сообщение. 

$(document).on("click", '#deleteModal .delBtn', function () {...
0 голосов
/ 04 сентября 2018

Были две проблемы с вашим кодом:

  1. Модал, который вы вызывали, был myModal, тогда как он должен был быть deleteModal.

  2. Вы связывали функцию click с классом ret внутри click #booked div.

Ниже приведен фрагмент измененного кода: 

$(document).ready(function() {

  var rowToDelete;

  $('#deleteModal').on('shown.bs.modal', function() {
    $('#myInput').trigger('focus');
  });

  $('.ret').click(function() {
    var id = $(this).val();
    alert(id); //to test if this function gets triggered
    $('#deleteModal .delBtn').data('row-id', id); //set data id
    rowToDelete = $(this).closest('tr'); //store row in variable
  });

  $('#booked').addClass('active'); //not necessary
  $('#book').removeClass('active');
  $('#admin').removeClass('active');

});

$(document).on("click", '#deleteModal .delBtn', function() {

  var rowId = $(this).data('row-id');
  alert("you removed" + rowId); //this alert never appears so this function is not getting triggered

});
<body>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

  <div id="booked">
    <div class="row scrollableBooked">
      <div class="table-responsive">
        <table class='table table-bordered' id='bookedtable'>
          <thead>
            <tr>
              <th colspan='6' class='bookedHeader'>Booking for: example booking</th>
            </tr>
            <tr>
              <th>Type</th>
              <th>Serial Number</th>
              <th>Info</th>
              <th>Return</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Device 1</td>
              <td>12345 </td>
              <td>lorem ipsum (id 12)</td>
              <td><button value='11' class='btn ret' data-toggle='modal' data-target='#deleteModal'>return</button></td>
            </tr>
            <tr>
              <td>Device 1</td>
              <td>12345 </td>
              <td>lorem ipsum (id 25)</td>
              <td><button value='25' class='btn ret' data-toggle='modal' data-target='#deleteModal'>return</button></td>
            </tr>
            <tr>
              <td>Device 1</td>
              <td>12345 </td>
              <td>lorem ipsum (id 64)</td>
              <td><button value='64' class='btn ret' data-toggle='modal' data-target='#deleteModal'>return</button></td>
            </tr>
            <tr>
              <td>Device 1</td>
              <td>12345 </td>
              <td>lorem ipsum (id 34)</td>
              <td><button value='34' class='btn ret' data-toggle='modal' data-target='#deleteModal'>return</button></td>
            </tr>
          </tbody>
        </table>

      </div>
    </div>

    <!--Delete Modal-->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h3 class="modal-title" id="exampleModalLabel">Return Device</h3>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
          </div>

          <div class="modal-body">
            <div class="container">
              <div class="row">
                <div class="col">
                  <p><b> Are you sure you want to return this device? </b></p>
                  This is a test.
                </div>
              </div>
            </div>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
            <button type="button" class="btn btn-primary delBtn" data-dismiss="modal">Yes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
...