I have a dynamically list of records created like this:
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>
and the Remodal window (the source for more information is here 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>
All works ok if I push on delete, the modal Window opens but... how I know that I clicked on a record with ID 3 or... ID 2... so I can send it to my jQuery ajax and delete it in my database if finally I press OK button in modal window? Thanks!
Just listen for click
events on your delete anchor tags. Get the data-id
attribute value of the clicked link and use the confirmation
event on your modal to add the current id as custom data bound to the event.
Here is some information on how this works.
Description: An optional object of data passed to an event method when the current executing handler is bound.
Now you just have to make sure that the added listener for confirmation
event on the modal gets removed, because the modal may be closed via cancellation and not by confirmation. You can use the closed
event on the modal to do that.
Here is an example.
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>