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'
)
}
})};
Related
i have a form and a complex validation Javascript which part of it is the following simplified code:
if (Condition1 Meets criteria){
Swal.fire({ //Cancel if Condition 1 Meets Criteria
title: 'Validation Problem',
icon: 'error',
html: 'Form wont be submited because <b>Condition 1 met criteria</b>',
showCloseButton: false,
focusConfirm: false,
confirmButtonText: 'Return'
})
return false; //Prevent submit form
}else if (Condition2 Meets criteria){
Swal.fire({ //Warning msg if Condition 2 Meets Criteria
title: 'Warning msg..',
icon: 'warning',
html: 'Condition 2 meets criteria </br>'+
'Are you sure you want to continue ?',
showCloseButton: false,
focusConfirm: false,
reverseButtons: true,
cancelButtonText: 'Cancel',
confirmButtonText: 'Continue'
}).then((result) => {
if (result.isConfirmed) {
alert ("Continue to next Rule!");
return true; //User confirmed to continue, Procceed to Validation 3 Rule...
}else{
alert ("Stop Submit Form!");
return false; //Dont submit Form
}
})
}else if (Condition3 Meets criteria){
...........
}
Condition 1 works good, Condition 2 ignores the msg the user will press . What am I doing wrong ?
Simple alerts do show up so condition is met, but if I will comment the Alerts, system doesnt go on to return functionalities...
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>
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();
}
})
})
I'm trying to replace the JS box dialog with sweet alert dialog box.
At normal cases, it works perfectly.
But, at the time of navigating the page on confirmation. It didn't work.
JS box :
var confirm = window.confirm("Warning! You may have unsaved data,it will be lost..!" + "\n" + "Are you sure want to leave this page ?");
if (confirm) {
$scope.$eval(event); //It prevents the page to nav ,until i confirm it.
} else {
event.preventDefault();
}
It works.
In case of sweetalert, I'm using the same scenario
$scope.validation = function(event) {
//....
sweetAlert({
title: "Are you sure?", //Bold text
text: "Your will not be able to recover this imaginary file!", //light text
type: "warning", //type -- adds appropiriate icon
showCancelButton: true, // displays cancel btton
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
//Function that triggers on user action.
if (isConfirm) {
$scope.$eval(event); //????
/* sweetAlert(
'Deleted!',
'Your file has been deleted.',
'success'
)*/
} else {
event.preventDefault();
}
}
For state change ,
.state('ModuleName',{
url : '/ModuleName',
templateUrl : 'ModuleMenu/ModuleName.html',
controller : 'modulectrl',
resolve : {
loadPlugin : function($ocLazyLoad) {
return $ocLazyLoad
.load([
{
name : 'css',
insertBefore : '#app-level',
files : [
'../static/vendors/bower_components/nouislider/jquery.nouislider.css',
]
},
{
name : 'vendors',
files : [
'../static/vendors/bower_components/angular-farbtastic/angular-farbtastic.js' ]
},
{
name : 'ComliveApp',
files : [ '../static/scripts/controller/modulectrl.js' ]
} ])
}
}
})
On href,the respective view is loaded. My point is that page should not be loaded until sweetAlert confirms it.
Suggestions/answers are appreciated.
Thanks.
Having some issues with the plugin Bootstrap File Input and SweetAlert2
This is for showing a dialog box to confirm if the user really wants to proceed with deleting the file.
I need to return a boolean for filepredelete event if I'm going to abort the deletion of the file. The function is synchronous but I'm using an asynchronous plugin SweetAlert2 with promises.
Here's my code:
$("#gallery-images").fileinput({
...
}).on("filepredelete", function(event, key, jqXHR, data) {
swal({
title: 'Are you sure you want to delete this image?',
showCancelButton: true,
confirmButtonText: 'Confirm',
cancelButtonText: 'Cancel',
type: 'warning',
}).then((result) => {
if(result.value){
return false;
}
return true;
});
});
I can't find a way to wait for the confirmation. I'm thinking of just always abort the deletion and just manually delete the file when the user confirmed. I need to refactor my code.
Try the promises, I've been struggling the same problem for 3 days and figured out, hope this help for some one.
$("#gallery-images").fileinput({
...
}).on("filepredelete", function(event, key, jqXHR, data) {
return new Promise(function(resolve, reject) {
swal.fire({
title: 'Are you sure?',
text: 'You will not be able to recover this file!',
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, keep it'
}).then((result) => {
if (result.value) {
resolve();
}
});
});
});
Enjoy!