Delete dialog box with ajax - Symfony 3 - ajax

Question

I have a basket where I can have items that I can delete
When I click on the bin icon, it delete it straight from the page with this script
$('.delete').on('click', function (e) {
e.preventDefault();
var value = $(this).attr('data-value');
$.ajax({
url: '{{ path('ajax_app_basket_bill_delete_item') }}',
type: 'POST',
dataType: 'json',
data: {
'itemId': value
},
success: function (data) {
$('#item' + value).remove();
if (data['success'] == 1) {
$.ajax({
url: '{{ path('ajax_app_basket_bill_refresh_price') }}',
type: 'POST',
dataType: 'json',
data: {
'credit_box' : creditBox,
'code' : code
},
success: function (data) {
$('#t1').text(data['totalWithoutTax']);
$('#t2').text(data['tax']);
$('#t3').text(data['total']);
}
});
}
}
});
});
(here is the html in case you need to see this)
<a class="delete" data-value="{{ item.id }}" href="#"><i class="mdi mdi-delete"></i></a>
And my question is, how can I actually create a very simple dialog box to confirm deletion when I click on the bin icon without to remove it instantly.
thank you

Answer 1

The simpliest way would be with the javascript function confirm:
$('.delete').on('click', function (e) {
e.preventDefault();
if (confirm('Really delete this item?')){
var value = $(this).attr('data-value');
$.ajax({
url: '{{ path('ajax_app_basket_bill_delete_item') }}',
type: 'POST',
dataType: 'json',
data: {
'itemId': value
},
success: function (data) {
$('#item' + value).remove();
if (data['success'] == 1) {
$.ajax({
url: '{{ path('ajax_app_basket_bill_refresh_price') }}',
type: 'POST',
dataType: 'json',
data: {
'credit_box' : creditBox,
'code' : code
},
success: function (data) {
$('#t1').text(data['totalWithoutTax']);
$('#t2').text(data['tax']);
$('#t3').text(data['total']);
}
});
}
}
});
}
});
You can get more fancy with jQueryUI's .dialog() or other additional dialog box scripts easily foundable via Google or else.