Получить модальные начальные данные Bootstrap- * при закрытии - PullRequest
Новая
       8

Получить модальные начальные данные Bootstrap- * при закрытии

0 голосов
/ 08 апреля 2019

Когда показывает мод начальной загрузки, можно легко получить связанные данные, используя код, такой как 

$('#myModal').on('show.bs.modal', function (e) {
   var id = $(e.relatedTarget).data('id'); 
   alert(id);
}

Возможно ли то же самое, когда закрывает мод начальной загрузки?
Особенно при закрытии определенной кнопкой (т. Е. Кнопкой подтверждения, а не любой из кнопок отмены)?relatedTarget, по-видимому, недоступен ни из button внутри модального события, ни из события hidden.bs.modal.
На следующей площадке data-id Значение атрибута должно отображаться под кнопками удаления, когда modal "да" нажимается аналогичным образом data-id отображается модальное тело: 

$(document).ready(function () {
  $('#deleteModal').on('show.bs.modal', function (e) {
      $('#testOutput,#testOutput2').text('');
       var id = $(e.relatedTarget).data('id'); 
    $('#deleteId').text(id || 'id retrieval failed');
  });
  
  $('#deleteModal').on('hidden.bs.modal', function (e) {
      var id = $(e.relatedTarget).data('id'); //does not work
      $('#testOutput2').text(id || '"hidden.bs.modal" id retrieval failed');
  });  
  
  $('#confirmDeleteBtn').click(function (e) {
    var id = $(e.relatedTarget).data('id');  //does not work
    //var id = $(this).closest('.modal').data('id'); //doesnt work neither
    $('#testOutput').text(id || '"btn.close .modal" id retrieval failed');
  });
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 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>
<div class="col offset-3">
  <div class="d-flex">
    <button class="mt-4 btn btn-primary" data-toggle="modal" data-target="#deleteModal" data-id="42">delete record 1</button>
    <button class="mt-4 btn btn-primary" data-toggle="modal" data-target="#deleteModal" data-id="123">delete record 2</button>
  </div>
  <h5 class="mt-4 text-danger" id="testOutput"></h5>
  <h5 class="text-danger" id="testOutput2"></h5>
</div>
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalTitle" 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="deleteModalTitle">Confirm delete</h5>
            <button type="button" class="close" data-dismiss="modal">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>Delete record <span class="font-weight-bold text-danger" id='deleteId'></span>?</p>
          </div>
          <div class="modal-footer">
            <button class="btn btn-primary" type="button" id="confirmDeleteBtn" data-dismiss="modal">Yes</button>
            <button class="btn btn-outline-secondary" id="cancelDeleteBtn"type="button" data-dismiss="modal">Cancel</button>
          </div>
        </div>
    </div>
</div>

обратите внимание, что id открытия button не является константой, т. Е. Существует множество delete button, способных открыть один диалог.

Ответы [ 2 ]

1 голос
/ 08 апреля 2019

Вы можете установить атрибут data-id для скрытого input внутри вашего modal и взять только id оттуда. Попробуйте ниже код- 

$(document).ready(function () {
  $('#deleteModal').on('show.bs.modal', function (e) {
      $('#testOutput,#testOutput2').text('');
       var id = $(e.relatedTarget).data('id'); 
       $('input.delete-btn-id').val(id);
    $('#deleteId').text(id || 'id retrieval failed');
  });
  
  $('#deleteModal').on('hidden.bs.modal', function (e) {
      var id = $('input.delete-btn-id').val(); //it's working now
      $('#testOutput2').text(id || '"hidden.bs.modal" id retrieval failed');
  });  
  
  $('#confirmDeleteBtn').click(function (e) {
    var id = $('input.delete-btn-id').val();  //it's working now
    $('#testOutput').text(id || '"btn.close .modal" id retrieval failed');
  });
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 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>
<div class="col offset-3">
  <div class="d-flex">
    <button class="mt-4 btn btn-primary" data-toggle="modal" data-target="#deleteModal" data-id="42">delete record 1</button>
    <button class="mt-4 btn btn-primary" data-toggle="modal" data-target="#deleteModal" data-id="123">delete record 2</button>
  </div>
  <h5 class="mt-4 text-danger" id="testOutput"></h5>
  <h5 class="text-danger" id="testOutput2"></h5>
</div>
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalTitle" 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="deleteModalTitle">Confirm delete</h5>
            <button type="button" class="close" data-dismiss="modal">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>Delete record <span class="font-weight-bold text-danger" id='deleteId'></span>?</p>
            <input type="hidden" val="" class="delete-btn-id"/>
          </div>
          <div class="modal-footer">
            <button class="btn btn-primary" type="button" id="confirmDeleteBtn" data-dismiss="modal">Yes</button>
            <button class="btn btn-outline-secondary" id="cancelDeleteBtn"type="button" data-dismiss="modal">Cancel</button>
          </div>
        </div>
    </div>
</div>
0 голосов
/ 08 апреля 2019

Вы можете сохранить значение идентификатора во входе, скрытом, когда модальное шоу 

...
<div class="modal-body">
   <p>Delete record <span class="font-weight-bold text-danger" id='deleteId'></span>?</p>
   <input type='hidden' id='deleteIdInput' />
</div>
...

$('#deleteModal').on('show.bs.modal', function (e) {
  $('#testOutput,#testOutput2').text('');
  var id = $(e.relatedTarget).data('id'); 
  $('#deleteId').text(id || 'id retrieval failed');
  $('#deleteIdInput').val(id);
});

$('#deleteModal').on('hide.bs.modal', function (e) {
  var id = $('#deleteIdInput').val(); //does not work
  $('#testOutput2').text(id || '"hidden.bs.modal" id retrieval failed');
});

Это демо: https://jsbin.com/caqubagobu/

...