We Keep Coding

sweetalert 2 confirm cant cancel

i need help to fix my problem, i got problem after click cancel button on sweetalert its keep success, i want if i click cancel its not success and cancel function, this is my code on a href
<i class="fa fa-trash"></i>
this is code on javascript
<script type="text/javascript">
jQuery(document).ready(function($){
$('.delete-link').on('click',function(){
var getLink = $(this).attr('href');
swal({
title: 'Apakah kamu yakin? ',
text: "Anda tidak dapat mengembalikan ini!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#4fa7f3',
cancelButtonColor: '#d57171',
confirmButtonText: 'Iya, hapus!',
}).then(function () {
swal(
'Terhapus!',
'Data telah dihapus.',
'success',
window.location.href = getLink
)
});
return false;
});
});
</script>
hope you guys can help me :)

I fix my problem
Swal.fire({
title: 'Apakah kamu yakin? ',
text: "Anda tidak dapat mengembalikan ini!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#4fa7f3',
cancelButtonColor: '#d57171',
confirmButtonText: 'Iya, hapus!',
cancelButtonText: 'Batal'
}).then(function (result) {
if (result.isConfirmed) {
Swal.fire(
'Terhapus!',
'Data berhasil terhapus.',
'success',
window.location.href = getLink
)
} else if (
result.dismiss === Swal.DismissReason.cancel
) {
Swal.fire(
'Batal',
'Data tidak terhapus.',
'error'
)
}
});

How to Delete After Confirmation by Sweet-alert in Laravel...?

I have linked sweetalert plugin for my confirmation message. But it's not getting the confirmation command (onclick yes/confirm button).
This is my delete button:
<a id="demoSwal" href="{{ route('setting.website_type.destroy', ['id' => $websiteType->id]) }}" class="btn btn-light btn-sm btn-delete demoSwal" data-toggle="tooltip" data-placement="top" title="Delete This Type"><i class="far fa-trash-alt"></i></a>
This is My JS Code:
$(document).ready(function(){
$('.demoSwal').click(function(){
swal({
title: "Are you sure?",
text: "You will not be able to recover this file!",
type: "warning",
showCancelButton: true,
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
swal("Deleted!", "Your Data file has been deleted.", "success");
} else {
swal("Cancelled", "Your Data file is safe :)", "error");
}
});
});
});
This is my Controller Code:
public function destroy($id)
{
$delete_website_type = WebsiteType::find($id);
$delete_website_type->delete();
return redirect()->back();
}
Please Give me the solution...

you have to put .then()
let id = $("#your_id").val();
swal({
title: "Are you sure?",
text: "You will not be able to recover this file!",
type: "warning",
showCancelButton: true,
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
}).then((isConfirm) => {
if(isConfirm) {
//you can just use fetchAPI
fetch(`route_to_your_destroy_method/${id}`)
.then(response => response.json()
.then(result => {
//your result
if (result == 'success') {
//alert success
}else {
//alert fail
}
}).catch(err => {console.log(err)});
}
});
and in your destroy method
$delete_website_type = WebsiteType::find($id)->delete();
if(delete_website_type) {
$message = 'success';
}else {
$message = 'fail';
}
return json_encode($message);

Give it a try
for delete button:---
<i class="far fa-trash-alt"></i>
in Jquery
$(document).on('click', '.button', function (e) {
e.preventDefault();
var id = $(this).data('id');
swal({
title: "Are you sure!",
type: "error",
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes!",
showCancelButton: true,
},
function() {
$.ajax({
type: "POST",
url: "{{url('/setting/website_type/destroy')}}",
data: {id:id},
success: function (data) {
//
}
});
});
});
and
public function destroy(Request $request)
{
$delete_website_type = WebsiteType::find($request->id)->delete();
return redirect()->route('website.index')
->with('success','Website deleted successfully');
}
i have updated my answer try this one.

after clicking a button of sweet alert call php file

I am trying to call a php file after clicking a button in the sweet alert. This function is the confirmation of Logging the account. Sample process is when you log out the active account, there will be a pop-up message that was the sweet alert, and if you click OK button, then it should have destroyed the session of the user. Can someone help me with this?
Here is my code:
<a href="javascript:swal({title:'Logout',
text:'Do you want to logout this Account?'
, icon:'warning',
buttons: true,
dangerMode: true}).then((willOUT) => {
if (willOUT) {
url: 'page_logout.php', {
icon: 'success',
});
}
});"
class="nav-item dropdown-item">
Log out
</a>
see the console

This would help you. It can take you to page_logout.php
And there is also some error in your swal code which you have written in
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="#" id="a_id">Logout</p>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#a_id").click(function(){
swal({title:'Logout',
text:'Do you want to logout this Account?',
icon:'warning',
buttons: true,
dangerMode: true
})
.then((willOUT) => {
if (willOUT) {
window.location.href = 'page_logout.php', {
icon: 'success',
}
}
});
});
});
</script>
</body>
</html>
or if you want to show message in the same page in which there is logout button, then instead of url in your question do ajax request to page_logout.php. Hope it will help you.

try js:
<button type="button" onclick="logout('<?php echo $SESSION['user']['userId'] ?> ')" class="btn-danger">logout</button>
function logout(id) {
swal({
title: "Do you want to logout this Account?",
type: "error",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes!",
cancelButtonText: "No",
closeOnConfirm: true,
closeOnCancel: true
},
function (isConfirm) {
if (isConfirm) {
userLogout(id);
}
});
}
function userLogout(id) {
$.post(base_url + "fileName/method_name", {id: id}, function (data) {
if (data === "1") {
}
else if (data === "0") {
swal("", "Error to logout user.", "warning");
} else {
swal("", data[0], "error");
}
});
}

You can use logout event with function
<script src="https://unpkg.com/sweetalert2#7.8.2/dist/sweetalert2.all.js"></script>
<a onClick="logout()">Logout</a>
<script>
function logout(){
swal({
title: 'Logout',
text: 'Do you want to logout this Account?',
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Yes!',
cancelButtonText: 'No.'
}).then(() => {
if (result.value) {
// Call ajax page_logout.php File
} else {
// Close alert
}
});
}
OR
functio logout() {
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then(function() {
swal(
'Deleted!',
'Your file has been deleted.',
'success'
)
})
}
</script>

How to run a SweetAlert instead of default javascript confirm method

Currently this is the code I use to run a normal confirm window based on the class "confirmation". This is all done with an href link and not on a button onClick event. As the result of the click is to run another code snipped placed in a different file (with the intention to delete a row in db).
$('.confirmation').on('click', function () {
return confirm('Er du sikker på at du vil slette?');
});
What I want is to replace the confirm method with this SweetAlert 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!",
closeOnConfirm: false
}, function(){
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
Anyone know how to do this, what happens when I try to place the sweetalert inside the onClick function is that the alert appears but it automatically delete the row without me having to confirm anything and the alert fades out.

I found the solution!
$('.confirmation').click(function(e) {
e.preventDefault(); // Prevent the href from redirecting directly
var linkURL = $(this).attr("href");
warnBeforeRedirect(linkURL);
});
function warnBeforeRedirect(linkURL) {
swal({
title: "Leave this site?",
text: "If you click 'OK', you will be redirected to " + linkURL,
type: "warning",
showCancelButton: true
}, function() {
// Redirect the user
window.location.href = linkURL;
});
}

I made this codepen in case anyone wants to debug. It appears this is working (check the browser console log for when 'done' is printed)
http://codepen.io/connorjsmith/pen/YXvJoE
$('.confirmation').on('click', 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
},
function(isConfirm){
if (isConfirm) {
console.log('done');
swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
})

Add event.preventDefault(); preventDefault();
$('.confirmation').on('click', function (event) {
event.preventDefault();
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!",
closeOnConfirm: false
}, function(){
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
});

Try this code which is mentioned as in docs:
$('.confirmation').on('click', 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!",
closeOnConfirm: false
}, function(isConfirm){
return isConfirm; //Will be either true or false
});
});

I wrote this function:
function sweetConfirm(title, text) {
event.preventDefault();
var target = $(event.target);
var href = null;
var form = null;
if (target.is("a")) href = target.attr("href");
else if (target.is("button:submit")) form = target.closest("form");
else if (target.is("button")) href = target.attr("href") || target.attr("value");
swal({
title: title,
text: text,
type: "warning",
allowOutsideClick: true,
showCancelButton: true
}, function () {
if (href) window.location.href = href;
else if (form) form.submit();
});
}
sweetConfirm function will accept a submit button, link button or a normal button and will ask before do the action.
You can use it in the following scenarios:
<a type="button" class="btn btn-default" href="/" onclick="return sweetConfirm('Are you sure?')">
Link Button 1
</a>
<button type="button" class="btn btn-default" href="/" onclick="return sweetConfirm('Are you sure?')">
Link Button 2
</button>
<form action="/" method="DELETE">
<input type="hidden" name="id" value="..">
<button type="submit" class="btn btn-danger" onclick="return sweetConfirm('Are you sure?')">
Delete
</button>
</form>

<!DOCTYPE html>
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/sweetalert2#7.32.4/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#7.32.4/dist/sweetalert2.all.min.js"></script>
</head>
<body>
<a id="confirmation" href="test">Test</a>
<script type="text/javascript">
$('#confirmation').click(function(e) {
e.preventDefault(); // Prevent the href from redirecting directly
var linkURL = $(this).attr("href");
console.log(linkURL)
warnBeforeRedirect(linkURL);
});
function warnBeforeRedirect(linkURL) {
Swal({
title: 'sAre you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.value) {
window.location.href = linkURL;
}
})
}
</script>
</body>
</html>

JavaScript Confirmation form Message

I have a confirmation message in my form with JS script but the value of "verif" always false or I do not know where is the problem; If I boot "verif" with false, it's still false
function valider() {
var verif = false;
swal({
title: "Are you sure?",
text: "You will not be able to recover this 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 file has been deleted.", "success");
verif = true;
alert("afficher");
} else {
swal("Cancelled", "Your file is safe :)", "error");
verif = false;
swal("afficher");
}
});
if (verif) {
$("#formulaire").submit();
}
return false;
}
$("#envoyer").click(function() {
valider();
return false;
});
and this is the HTML Code
<form action="archi.php" method="post" class="form-horizontal" id="formulaire">
<div class="form-actions">
<button type="submit" id="envoyer" class="btn blue envoyer"> <i class="icon-save"></i> Archiver</button>
<button type="button" class="btn">Cancel</button>
</div>
</form>

Why do you add another test for submitting? Add submit to the callback function and delete additional if:
function valider() {
var verif = false;
swal({
title: "Are you sure?",
text: "You will not be able to recover this file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
}, function(isConfirm) {
if (isConfirm) {
$("#formulaire").submit();
swal("Deleted!", "Your file has been deleted.", "success");
} else {
swal("Cancelled", "Your file is safe :)", "error");
swal("afficher");
}
});
return false;
}
$("#envoyer").click(function() {
valider();
return false;
});
P.S. Try adding a console.log() before the return from verif() function to check if the }, function(isConfirm) { is async (this would clarify all misunderstanding).