Как передать идентификатор записи, которую я хочу удалить, в окно Remodal

Question 1

У меня есть динамический список записей, созданных следующим образом:

Option 1 <a href="#modal" data-id="1">delete</a>
Option 2 <a href="#modal" data-id="2">delete</a>
Option 3 <a href="#modal" data-id="3">delete</a>
Option 4 <a href="#modal" data-id="4">delete</a>

И окно Remodal (источник дополнительной информации находится здесь https://github.com/VodkaBears/Remodal# remodal):

<div class="remodal-bg">
<div class="remodal" data-remodal-id="modal">
    <button data-remodal-action="close" class="remodal-close"></button>
    <h1>Deleting record</h1>
    <p>
        Are sou sure?
    </p>
    <br>
    <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
    <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

Все работает нормально, если я нажимаю на удаление, открывается модальное окно, но ... откуда я знаю, что я щелкнул запись с ID 3 или ... ID 2 ... так что я могу отправить ее на свой jQuery ajax и удалить в моей базе данных, если я наконец нажму кнопку ОК в модальном окне? Спасибо!

javascript jquery modal-dialog remodal

1

Jesus BC 18 Дек 2016 в 22:45

Answer

Просто слушайте события click в своих тегах привязки удаления. Получите значение атрибута data-id нажатой ссылки и используйте событие confirmation в модальном окне, чтобы добавить текущий идентификатор в качестве пользовательских данных, привязанных к событию.

Вот некоторая информация о том, как это работает.

event.data

Описание: необязательный объект данных, передаваемых методу события при привязке текущего выполняющегося обработчика.

Теперь вам просто нужно убедиться, что добавленный прослушиватель для события confirmation в модальном окне будет удален, потому что модальное окно может быть закрыто путем отмены, а не путем подтверждения. Для этого вы можете использовать событие closed в модальном окне.

Вот пример.

var $delBtns = $('a[data-id]');
var idToDel = 0;

function deleteRecord ( e ) {
  console.log("Delete record with ID:", e.data.relatedId);
}

$delBtns.on('click', function() {
  idToDel = this.dataset.id;
  $(document).one('confirmation', '.remodal', { relatedId: idToDel }, deleteRecord);
})

$(document).on('closed', '.remodal', function (e) {
  $(document).off('confirmation', '.remodal', deleteRecord);
});

@import url('https://cdnjs.cloudflare.com/ajax/libs/remodal/1.1.0/remodal.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/remodal/1.1.0/remodal-default-theme.min.css');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.1.0/remodal.min.js"></script>

Option 1 <a href="#modal" data-id="1">delete</a><br>
Option 2 <a href="#modal" data-id="2">delete</a><br>
Option 3 <a href="#modal" data-id="3">delete</a><br>
Option 4 <a href="#modal" data-id="4">delete</a>

<div class="remodal" data-remodal-id="modal">
  <button data-remodal-action="close" class="remodal-close"></button>
  <h1>Deleting record</h1>
  <p>
    Are sou sure?
  </p>
  <br>
  <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
  <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

1

Community 20 Июн 2020 в 12:12

Question 2

Просто слушайте события click в своих тегах привязки удаления. Получите значение атрибута data-id нажатой ссылки и используйте событие confirmation в модальном окне, чтобы добавить текущий идентификатор в качестве пользовательских данных, привязанных к событию.

Вот некоторая информация о том, как это работает.

event.data

Описание: необязательный объект данных, передаваемых методу события при привязке текущего выполняющегося обработчика.

Теперь вам просто нужно убедиться, что добавленный прослушиватель для события confirmation в модальном окне будет удален, потому что модальное окно может быть закрыто путем отмены, а не путем подтверждения. Для этого вы можете использовать событие closed в модальном окне.

Вот пример.

var $delBtns = $('a[data-id]');
var idToDel = 0;

function deleteRecord ( e ) {
  console.log("Delete record with ID:", e.data.relatedId);
}

$delBtns.on('click', function() {
  idToDel = this.dataset.id;
  $(document).one('confirmation', '.remodal', { relatedId: idToDel }, deleteRecord);
})

$(document).on('closed', '.remodal', function (e) {
  $(document).off('confirmation', '.remodal', deleteRecord);
});

@import url('https://cdnjs.cloudflare.com/ajax/libs/remodal/1.1.0/remodal.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/remodal/1.1.0/remodal-default-theme.min.css');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.1.0/remodal.min.js"></script>

Option 1 <a href="#modal" data-id="1">delete</a><br>
Option 2 <a href="#modal" data-id="2">delete</a><br>
Option 3 <a href="#modal" data-id="3">delete</a><br>
Option 4 <a href="#modal" data-id="4">delete</a>

<div class="remodal" data-remodal-id="modal">
  <button data-remodal-action="close" class="remodal-close"></button>
  <h1>Deleting record</h1>
  <p>
    Are sou sure?
  </p>
  <br>
  <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
  <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

1

Community 20 Июн 2020 в 12:12

Как передать идентификатор записи, которую я хочу удалить, в окно Remodal

1 ответ

Похожие вопросы

Новые вопросы

javascript