Message (alert) asking for confirmation - php

Question

I'm beginner in JS.
I have this code:
var fileLimit = parseInt(1);
function refreshFileList() {
$(".dz-preview").remove();
$.ajax({
url: 'http://test/admin/showFilesDJS?type=SplashImage&id=1',
type: 'get',
dataType: 'json',
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
},
cache: false,
success: function (response) {
$.each(response, function (key, value) {
var mockFile = {
name: value.name,
size: value.size
};
dpzMultipleFiles.emit('addedfile', mockFile);
dpzMultipleFiles.emit('thumbnail', mockFile, value.path);
dpzMultipleFiles.emit('complete', mockFile)
})
},
error: function (response) {
alert('Nastąpił problem z JSON. Proszę o kontakt z administratorem serwisu.');
}
});
}
Dropzone.options.dpzMultipleFiles =
{
maxFiles: fileLimit,
clickable: true,
thumbnailWidth: 250,
thumbnailHeight: 250,
autoProcessQueue: true,
dictDefaultMessage: '',
uploadMultiple: true,
paramName: "myFile",
acceptedFiles: ".jpg,.jpeg",
addRemoveLinks: true,
timeout: 50000,
dictRemoveFile: 'Usuń plik',
init: function () {
dpzMultipleFiles = this;
refreshFileList();
this.on("thumbnail", function (file, dataUrl) {
$('.dz-image').last().find('img').attr({width: '100%', height: '100%'});
}),
this.on('completemultiple', function (file, json) {
//$('.sortable').sortable('enable');
});
this.on('success', function (file, json) {
//alert('aa');
});
this.on('addedfile', function (file) {
fileLimit = fileLimit - 1;
});
this.on('drop', function (file) {
fileLimit = fileLimit + 1;
});
this.on("maxfilesexceeded", function (file) {
alert('Plik ' + file.name + ' nie został wysłany na serwer. Limit plików został przekroczony!')
this.removeFile(file);
});
},
removedfile: function (file) {
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
},
cache: false,
type: 'POST',
url: 'http://test/admin/deleteDJS?id=' + file.name + 'type=SplashImage',
data: {filename: file.name, id: file.name, type: 'SplashImage'},
success: function (data) {
console.log("File has been successfully removed!!");
//refreshFileList();
},
error: function (e) {
console.log(e);
}
});
var fileRef;
return (fileRef = file.previewElement) != null ?
fileRef.parentNode.removeChild(file.previewElement) : void 0;
}
};
$(function () {
$(".dropzone").sortable({
items: '.dz-preview',
cursor: 'move',
opacity: 0.5,
containment: '.dropzone',
distance: 20,
tolerance: 'pointer',
update: function (event, ui) {
$(".dz-filename span").each(function (index) {
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
},
url: 'http://test/admin/changeOrderFilesDJS?type=SplashImage&id=1&index='+index+'&file='+ $(this).text(),
dataType: 'text',
type: 'post',
cache: false,
data: $(this).serialize(),
success: function (data, textStatus, jQxhr) {
},
error: function (jqXhr, textStatus, errorThrown) {
alert('Nastąpił problem z JSON. Proszę o kontakt z administratorem serwisu.');
}
});
});
}
});
});
This is Dropzone.JS. This code work fine.
I would like to add after clicking on the button remove (usuń plik) - the question: do you really want to delete this file? Only after clicking on YES the file would be deleted.
How to do it? I need a simple alert with a question in JS

Answer 1

You can add confirm in the remove function :
removedfile: function (file) {
if (!confirm('Are you sure?')) {
return;
}
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
},
cache: false,
type: 'POST',
url: 'http://test/admin/deleteDJS?id=' + file.name + 'type=SplashImage',
data: {filename: file.name, id: file.name, type: 'SplashImage'},
success: function (data) {
console.log("File has been successfully removed!!");
//refreshFileList();
},
error: function (e) {
console.log(e);
}
});
var fileRef;
return (fileRef = file.previewElement) != null ?
fileRef.parentNode.removeChild(file.previewElement) : void 0;
}

Answer 2

I think what you are looking for is a confirm().
if (confirm('Are you sure?')) {
console.log('confirmed');
} else {
console.log('declined');
}

Answer 3

You can use bootstrap modal for the confirmation that you want to ask.
the link is here