Use dangerMode and input in same time - sweetalert - javascript

I using Sweet Alert, so before perform a dangerous action I popup the dialog box. Example.
swal({
title: "Are you sure?",
text: "Once deleted, you will not be able to recover this imaginary file!",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
swal("Poof! Your imaginary file has been deleted!", {
icon: "success",
});
} else {
swal("Your imaginary file is safe!");
}
});
But user can enter any remarks if they want, is optional and not required. So it will become like this
So I modified the code like this
function RequestUpload(value) {
swal({
title: "Are you sure?",
text: "Are you sure want to request to upload?",
icon: "warning",
buttons: true,
dangerMode: true,
content: {
element: "input",
attributes: {
placeholder: "Any remarks?",
type: "text",
},
},
})
.then((willDelete,input) => {
if (willDelete) {
swal(`You typed: ${input}`);
//Call ajax here
}
else {
swal(`Is not delete`);
}
});
}
But I can't get the value from the input, it keep show undefined.
Any idea how to fix this?

The input value is provided as the first argument. When you click cancel, click outside of the popup or press ESC, you'll get null for the value which will close the alert (ie: trigger your else). Otherwise, if you click "Ok" it will hold your input value:
.then((input) => {
if (input !== null) {
swal(`You typed: ${input}`);
//Call ajax here
} else {
swal(`Is not delete`);
}
});
function RequestUpload(value) {
swal({
title: "Are you sure?",
text: "Are you sure want to request to upload?",
icon: "warning",
buttons: true,
dangerMode: true,
content: {
element: "input",
attributes: {
placeholder: "Any remarks?",
type: "text",
},
},
})
.then((input) => {
if (input !== null) {
swal(`You typed: ${input}`);
//Call ajax here
} else {
swal(`Is not delete`);
}
});
}
RequestUpload();
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

Related

Sweetalert getting closed automatically

I'm using sweet alert in my project but it's getting closed within seconds
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
function deleteContact(cid){
swal({
title: "Are you sure?",
text: "You want to delete this contact?",
icon: "warning",
buttons: true,
dangerMode: true,
timer: 5000,
})
.then((willDelete) => {
if (willDelete) {
/* swal("Poof! Your imaginary file has been deleted!", {
icon: "success",
}); */
window.location="/user/delete/"+cid;
} else {
swal("Your contact is safe!");
}
});
}
</script>
---------------------------------------------------------------------------------------
deleteContact() function is being called here in below delete button-
<i class="fa-solid fa-trash text-danger" title="Delete"></i>
remove the "timer: 5000," from your swal config

Using sweet alert instead of custom js confirms, but ending with errors

I am trying to use sweetalert.js instead of custom JS confirms. I was modifiying following code..
clear.addEventListener("click", (e) => {
if(confirm("Warning, this action will remove all the text data as well as your saved starting
and ending time")){
localStorage.removeItem('startTime');
localStorage.removeItem('endTime');
window.location.reload();
} else {
e.preventDefault();
}
})
})
code I replaced with
function clearConfirm(message){
var t=false;
swal({
title: "Are you sure?",
text: message,
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
swal("file has been deleted!", {
icon: "success",});
t=true;
} else {
swal("Your data is safe!");
t=false;
}
});
if(t==true){
swal("Your file is safe!");
return true;
}else{
return false;
}
}
clear.addEventListener("click", (e) => {
if(clearConfirm("all the data will get removed")==true){
localStorage.removeItem('startTime');
localStorage.removeItem('endTime');
window.location.reload();
} else {
e.preventDefault();
}
})
As custom js returns value 'true' upon pressing 'OK' button and 'false' upon 'Cancel' button, so I tried to put the sweetalert confirm in a function and then return a true or false in above 'if' statement
.....But when I run it the function gets executed but it doesn't return value and the if condition doesnt move forward...it just pops up the confirm and after pressing OK button the desired action isn't completed(here i want to clear some data in a page)...
Please help through it.
You have return Promise from your clearConfirm function and use as shown below
function clearConfirm(message) {
return swal({
title: "Are you sure?",
text: message,
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
swal("file has been deleted!", {
icon: "success",
});
return true;
} else {
swal("Your data is safe!");
return false;
}
});
}
clear.addEventListener("click", (e) => {
clearConfirm("all the data will get removed").then((deleted) => {
if (deleted) {
localStorage.removeItem('startTime');
localStorage.removeItem('endTime');
window.location.reload();
} else {
e.preventDefault();
}
})
})

How to use sweet alert to cofirm image delete for dropify.js?

I want to use sweet alert confirmation before removing image. But, it doesn't work. It works if I use javascript default confirm. I tried using async and await, but it didn't help. How can I fix/debug this?
var pathURL = "file_path/";
var dropifyElements = {};
$('.dropify').each(function() {
dropifyElements[this.id] = true;
});
var drEvent = $('.dropify').dropify();
drEvent.on('dropify.beforeClear', function(event, element) {
id = event.target.id;
if(dropifyElements[id]) {
var x = false;
return swal({
title: "Are you sure?",
text: "You will not be able undo this operation!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel please!",
closeOnConfirm: false,
closeOnCancel: false
}, function(isConfirm){
if (isConfirm) {
x = true;
} else {
swal({
title:"Cancelled",
text:"Delete Cancelled :)",
type:"error",
timer: 2000,
});
x = true;
}
});
return x;
//return confirm("Do you really want to delete this image?");
// return confirm("Do you really want to delete \"" + element.file.name + "\" ?");
}
});
Okay so the input element is passed through the event handler so if the user really wants to delete it all you have to do is return false on the handler by default, then if the user clicks the confirm on the swal instance you just nuke the value of the input element. I don't have your code, but this should work.
var pathURL = "file_path/";
var dropifyElements = {};
$('.dropify').each(function() {
dropifyElements[this.id] = true;
});
var drEvent = $('.dropify').dropify();
drEvent.on('dropify.beforeClear', function(event, element) {
id = event.target.id;
if(dropifyElements[id]) {
swal({
title: "Are you sure?",
text: "You will not be able undo this operation!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel please!",
closeOnConfirm: false,
closeOnCancel: false
}, isConfirm => {
if (isConfirm) {
element.value = "";
} else {
swal({
title:"Cancelled",
text:"Delete Cancelled :)",
type:"error",
timer: 2000,
});
}
});
return false;
}
});
I read the answer and don´t work for me, but i write a diferent idea
var dropifyElements = {};
$('.dropify').each(function () {
dropifyElements[this.id] = false;
});
dropElements.on('dropify.beforeClear', function (event, element) {
id = event.target.id;
if (!dropifyElements[id]) {
swal({
title: "¿Estás seguro?",
text: "¿Realmente deseas eliminar el archivo \"" + element.file.name + "\" ?",
icon: "warning",
buttons: {
cancel: "Cancelar",
acept: "Aceptar"
},
dangerMode: true
}).then((action) => {
if (action == "acept") {
dropifyElements[id] = true;
element.clearElement();
}
});
return false;
}
else
{
dropifyElements[id] = false;
return true;
}
});
This code will also solve the issue on clicking cancel button of sweet-alert pop-up
var drEvent = $('.dropify').dropify();
var hideConfirmBox = false;
drEvent.on('dropify.beforeClear', function(event, element){
if (hideConfirmBox == false) {
swal({
title: 'Do you want to remove?',
text: 'This will remove the selected image.',
buttons: {
cancel: true,
confirm: {
text: 'Yes, remove it!',
value: 'proceed'
}
},
dangerMode: true
}).then((value) => {
if (value == 'proceed') {
$("body").trigger("click")
hideConfirmBox = true;
$(this).next('button.dropify-clear').trigger('click');
}
});
}
return hideConfirmBox;
});
drEvent.on('dropify.afterClear', function(event, element){
hideConfirmBox = false;
// call ur ajax here for deleting on clicking yes in sweet alert pop-up
});
Maybe, this will work!
dropifyUpload.on('dropify.beforeClear', function (event, element) {
swal({
title: "¿Esta seguro que desea eliminarlo?",
text: "¡Una vez confirmado no habrá vuelta atrás!",
icon: 'warning',
buttons: {
cancel: 'Cancelar',
delete: 'OK'
}
}).then(function (result) {
if (result == "delete") {
element.input.trigger($.Event("dropify.afterClear"), [element]);
}
})
return false;
});

Angular SweetAlert2, alert closes after the ShowValidationError is displayed

I am using SweetAlert2 (https://sweetalert2.github.io/) to verify user's password before an action is taken. My promise works well, verifying the password in the server and returning true or false.
When password is correct, alert is displayed confirming the successful password verification.
However, when the password is incorrect, the sweetalert stops and closes without executing the action. Not executing the action is the expected behaivour, however I want it to stay displaying the message to alert the user about the incorrect password entered. The swal.showValidationError seems to work fine but the alert doesn't stay active for the user to reenter a password.
Can anybody take a look at the code below and point me in the right direction?. Thank you in advance
$scope.confirmPublish = function(newsFormEdit, publish, trigger, updateReason){
// Request password confirmation before Publishing a News.
// After password is successfully confirmed the event is triggered
swal({
title: $translate.instant("news_confirmPublish_title"),
text: $translate.instant("news_confirmPublish_text"),
type: 'warning',
showCancelButton: true,
confirmButtonText: $translate.instant("confirmPublish_confirmBtn"),
cancelButtonText: $translate.instant("confirmPublish_cancelBtn"),
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
buttonsStyling: true
}).then(function () {
swal({
title: 'Enter password to run ajax request',
input: 'password',
showCancelButton: true,
confirmButtonText: 'Submit',
showLoaderOnConfirm: true,
preConfirm: (pass) => {
return promisedPost('./service/verify_password.php', { pass })
.then(results => {
results = JSON.parse(results);
if (results.value === false) {
swal.showValidationError('Incorrect Password.');
} else {
return results;
}
});
},
allowOutsideClick: () => !swal.isLoading()
})
.then((result) => {
if (result.value) {
if (trigger === "create") {
$scope.createNews(newsFormEdit, publish);
} else {
$scope.updateNews(newsFormEdit, publish, updateReason);
}
swal({
type: 'success',
title: 'Ajax request finished!'
});
}
})
}, function (dismiss) {
if (dismiss === 'cancel') {
swal(
'Cancelled',
'Publish of news has been cancelled!',
'error'
)
}
})};

SweetAlert input validation

I want the alert to not disappear when the user is trying to submit an empty form,instead it should show some error in the same alert.I tried doing swal.showInputError("some error") but it gives an error that it is not
valid function.I tried looking at the documentation but cannot find any...
Here is my code-
swal({
title:"Enter a Username",
content: {
element: "input",
attributes: {
placeholder: "Type your username",
type: "text"
},
},
className: "mySwal"
}).then((username)=>{
//get the username
if(username){
}else{
}
});
You can use this function:
inputValidator: (value) => {
return !value && 'You need to write something!'
}
This will validates if the user is writing a value.
This will also Work
showCancelButton: true,
preConfirm: (value) => {
if (!value) {
Swal.showValidationMessage(
'You need to write something!'
)
}
}
This works to me
inputValidator: (value) => {
if (!value) return 'Your text here'
else return null
}

Categories