I have a problem with Sweet Aler confirm dialog. When I click the delete icon, the Sweet Alert dialog shows for less then a second and then disappears and delete the element. With other words I don't have the chance to click "Delete" or "Cancel". How to stop this dialog to let me choose an option?
<i class="fa fa-trash-o fa-2x pull-right trashbin"></i>
---
<script type="text/javascript">
document.querySelector('i.trashbin').onclick = function(event){
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Yes, delete it!',
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm){
if (isConfirm){
swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
};
</script>
Try adding event.preventDefault(); after:
document.querySelector('i.trashbin').onclick = function(event) {
You must replace the 'src' value from the 'a' tag with '#' and pass the 'delete=20' to the function. Then in that function if user clicks 'yes', redirect to the page specified with parameter that you passed to it. This solved my problem. I hope helps you too.
** Edited **
<i class="fa fa-trash-o fa-2x pull-right trashbin"></i>
---
<script type="text/javascript">
document.querySelector('i.trashbin').onclick = function () {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Yes, delete it!',
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
}).then(function () {
swal({timer: 1000, title: "Deleted!", type: "success"});
setTimeout(function goAndDel() {
window.location.assign("insert.php?delete=20");
}, 1000);
});
}
</script>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 13 days ago.
Improve this question
so this is my highschool project,
This is the Button
<button onclick="btncncl(); location.href='hapus.php?id=<?= $dp["ID"]; ?>'" class="button-64" role="button"><span class="text">Delete</span></button>
this is the javascript (swal)
function btncncl() {
Swal.fire({
title: "Are you sure?",
text: "You won't be able to revert this!",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "Yes, delete it!",
}).then((result) => {
if (result.isConfirmed) {
Swal.fire("Deleted!", "Your file has been deleted.", "success");
}
});
}
the button works, but the swal function doesn't appear, and this code is inside php file
Because you are not passing the parameter ID into your function.
<button onclick="btncncl(<?= $dp["ID"]; ?>)" class="button-64" role="button">Delete</button>
function btncncl(id = null) {
if(id){
$.ajax({
url: "yourCancelPHPFile.php",
type: 'POST',
data: {id: id},
dataType: 'json',
success:function(response) {
if(response.success == true) {
Swal.fire({
toast: true,
icon: response.icon,
title: response.title,
position: 'top',
showConfirmButton: false,
timer: 2000,
timerProgressBar: true,
});
} else {
Swal.fire({
toast: true,
icon: response.icon,
title: response.title,
position: 'top',
showConfirmButton: false,
timer: 2000,
timerProgressBar: true,
});
}
}
});
}
}
Here is the solution,
I test it. you also can run and check the code.
Note: this is sweetalert2. You need to link js of it. (external or internal)
check the full code below.
document.getElementById("deleteBtn").addEventListener("click", function () {
Swal.fire({
title: "Are you sure?",
text: "You won't be able to revert this!",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "Yes, delete it!",
}).then((result) => {
if (result.isConfirmed) {
location.href='hapus.php?id=<?= $dp["ID"]; ?>';
Swal.fire("Deleted!", "Your file has been deleted.", "success");
}
});
});
<button id="deleteBtn" class="button-64" role="button"><span class="text">Delete</span></button>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#10"></script>
<script src="btncncl.js"></script>
Hope you will fix it : )
function btncncl() {
Swal.fire({
title: "Are you sure?",
text: "You won't be able to revert this!",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "Yes, delete it!",
}).then((result) => {
if (result.isConfirmed) {
Swal.fire("Deleted!", "Your file has been deleted.", "success");
}
});
}
<button onclick=btncncl() location.href='hapus.php?id=<?= $dp["ID"]; ?>' class="button-64" role="button"><span class="text">Delete</span></button>
Hey... Look at this part
onclick="btncncl();
The following example ONE is from https://lipis.github.io/bootstrap-sweetalert/. While clicking anywhere outside of the alert box, the alert box won't go away. That's what I expected.
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
Another example TWO is from https://sweetalert2.github.io/. It behaved in another way. While clicking anywhere outside of the alert box, the alert box is gone.
Swal.fire({
title: '<strong>HTML <u>example</u></strong>',
type: 'info',
html:
'You can use <b>bold text</b>, ' +
'links ' +
'and other HTML tags',
showCloseButton: true,
showCancelButton: true,
focusConfirm: false,
confirmButtonText:
'<i class="fa fa-thumbs-up"></i> Great!',
confirmButtonAriaLabel: 'Thumbs up, great!',
cancelButtonText:
'<i class="fa fa-thumbs-down"></i>',
cancelButtonAriaLabel: 'Thumbs down'
})
In my code base as the follows, it behaved the same way as the example TWO. While clicking anywhere outside of the alert box, the alert box is gone.
How to fix it so that the alert box won't be gone while clicking anywhere outside of the alert box? What could be the version of my sweetalert ?
swal({
title: "Message:",
text: "Here is some detailed message",
type: "warning",
buttons: {
to_refresh: {
text: "Refresh the current view",
visible: true,
closeModal: true
},
to_close: {
text: "Back to Main Menu!",
visible: true,
closeModal: true
},
},
}).then(value => {
if (value === 'to_refresh') {
// window.location.href = window.location.href;
location.reload(true);
} else {
window.location.href = "to some other link"
}
});
depending on which Swal version you are using.
For SweetAlert 2:
allowOutsideClick: false
for SweetAlert (version 1):
closeOnClickOutside: false
How to open a url in new window in sweet alert
you can use "window.open(URL,name,specs,replace)" for open in other window. Example:
swal({
title: "Are you sure?",
text: "You redirect in the new window in other page!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
window.open("https://www.google.com");
} else {
window.open("https://www.yahoo.com");
}
});
Se quiser abrir em _blank use:
window.open("https://www.google.com", '_blank');
I've got this function to reset the game after the user presses delete and then presses ok again.
function confirmReset() {
swal({
title: "Are you sure you want to reset your game?", text: "You will not be able to recover your game!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}, function(){
swal("Deleted!", "Your imaginary file has been deleted.", "success"),
function(){
window.location.href = "includes/php/reset.php?naam=<?php echo $naam ?>";
}
});
}
it works if i do the window.location.href at the place were the second swal('deleted'... etc) is at , but if i use a second function after the user preses OK aswell it wont fire the window.location.href
Try this code :-
function confirmReset() {
swal({
title: "Are you sure you want to reset your game?", text: "You will not be able to recover your game!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}, function(){
swal({
title: "Deleted!",
text: "Your imaginary file has been deleted.",
type: "success",
//timer: 3000
},
function(){
window.location.href = "/";
})
});
}
By adding a conditional statement & .then, you can redirect on the "OK" Button, and no need to implement the timer. I use this particular method for API calls.
function confirmReset() {
swal({
title: "Are you sure you want to reset your game?",
text: "You will not be able to recover your game!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}).then((result) => {
if (result.isConfirmed) {
Swal.fire(
'Deleted!',
'Continue to .....',
'success'
).then(function() {
window.location = "/";
})
}
}
Im using sweet alerts for my web application. I have come across posts with the similar problem how ever they where never answered accordingly. i want to know how would i go about posting to an action result method once the user confirms. supporting code is below . help please.
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: " warning ",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
cancelButtonText: " No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
}, function(isConfirm) {
if (isConfirm) {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
swal("Cancelled", "Your imaginary file is safe: ) ", " error ");
}
});
I am not sure where you form is, but assuming it's id is form, then something like below may get you started:
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: " warning ",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
cancelButtonText: " No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
}, function(isConfirm) {
if (isConfirm) {
// once confirm, post your form
$("#form").submit();
} else {
swal("Cancelled", "Your imaginary file is safe: ) ", " error ");
}
});