We Keep Coding

Sweet Alert 2 Yes/No - How to integrate a function for PHP?

I use Sweet Alert 2 for nice dialogs.
Now I want to use it for a security question if an database entry should be delete or not.
It's no problem to show the dialog, but I can't find a way to integrate a function if the delete is confimred. Could anyone please help me?
Thats the code for now:
<script>
Swal.fire({
title: '',
text: "Diesen Eintrag wirklich löschen?",
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Ja',
cancelButtonText: 'Nein',
reverseButtons: true
}).then((result) => {
if (result.isConfirmed) {
Swal.fire(
'<Here a function if delete is confirmed>'
)
} else {
Swal.fire(
'<Here a function to go back>'
)
}
})
</script>
<?php
public function deleteConfimred(){
// Delete the entry
}

You could submit a form using JS which submits to the PHP file where your function is.
HTML:
<form id="yourFormId" action="yourphpfile.php" method="post">
<input type="hidden" name="delete" value="">
</form>
<button type="button" onclick="confirmDelete()">Delete</button>
<script>
function confirmDelete() {
Swal.fire({
title: '',
text: "Diesen Eintrag wirklich löschen?",
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Ja',
cancelButtonText: 'Nein',
reverseButtons: true
}).then((result) => {
if (result.isConfirmed) {
document.getElementById("yourFormId").submit();
}
})
}
</script>
yourphpfile.php:
<?php
if(isset($_POST['delete'])) {
deleteConfirmed();
}
public function deleteConfirmed(){
// Delete the entry
}
?>

Bootstrap 5 Modal & jQuery - centered spinner take time to show up before content loading

I have a bootstrap 5 modal with some specific functionality in jQuery a centered spinner shows up in the modal before loading the content here is a live example from here.
the issue that I have is the spinner take time when the modal opened to show up before loading content to know more about what I'm talking about trying to view the example link
while I click to button the spinner does not show up fast it displays the content first and secondly the spinner and this it's not correct.
Live Example: https://codepen.io/themes4all/pen/vYmeXpy
jQuery Code:
(function ($) {
"use strict";
$(window).on("load", function () {
if ($(".modal").length) {
$(".modal").modal("show");
$(".modal").on("shown.bs.modal", function (e) {
e.preventDefault();
$(".spinner")
.removeClass("d-none")
.delay(3000)
.fadeOut(500, function () {
$(this).addClass("d-none");
});
return false;
});
$(".btn-close").on("click", function (e) {
e.preventDefault();
var swalWithBootstrapButtons = Swal.mixin({
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-danger me-3",
},
buttonsStyling: false,
});
swalWithBootstrapButtons
.fire({
title: "Are you sure?",
text: "You won't be able to revert this!",
icon: "warning",
confirmButtonText: "<i class='fas fa-check-circle me-1'></i> Yes, I am!",
cancelButtonText: "<i class='fas fa-times-circle me-1'></i> No, I'm Not",
showCancelButton: true,
reverseButtons: true,
focusConfirm: false,
})
.then((result) => {
if (result.isConfirmed) {
$(".modal").modal("hide");
}
});
return false;
});
}
});
})(window.jQuery);

Live example
What you are doing right now is trying to remove class .d-none (display: none!important) on the spinner, which is working slower than content loading. What you should do is the opposite thing: the spinner should be shown by default and you need to hide it when content loads. So, you need to remove all classes with the display !important (d-flex, d-none), need to hide spinner on content load and need to show it back on modal close.
Added CSS:
.spinner {
display: flex;
}
jQuery:
(function ($) {
"use strict";
$(window).on("load", function () {
if ($(".modal").length) {
$(".modal").modal("show");
$(".modal").on("shown.bs.modal", function (e) {
e.preventDefault();
$(".spinner")
.delay(3000)
.fadeOut(500);
return false;
});
$(".btn-close").on("click", function (e) {
e.preventDefault();
var swalWithBootstrapButtons = Swal.mixin({
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-danger me-3",
},
buttonsStyling: false,
});
swalWithBootstrapButtons
.fire({
title: "Are you sure?",
text: "You won't be able to revert this!",
icon: "warning",
confirmButtonText: "<i class='fas fa-check-circle me-1'></i> Yes, I am!",
cancelButtonText: "<i class='fas fa-times-circle me-1'></i> No, I'm Not",
showCancelButton: true,
reverseButtons: true,
focusConfirm: false,
})
.then((result) => {
if (result.isConfirmed) {
$(".modal").modal("hide");
$(".spinner").delay(1000).show(100);
}
});
return false;
});
}
});
})(window.jQuery);

Use dangerMode and input in same time - sweetalert

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>

Cant confirm delete with swal on laravel

hey guys i have a little probleme with swal condition when the user confirm the delete nothing happen
(swal version 7.0.7)
there is the swal code
<form id="del_type" action="{{ route('admin.type.destroy', $type->id) }}" method="post"style="display: inline">
{!! method_field('delete') !!}
{{ csrf_field() }}
<button class="btn btn-danger delete_type" type="submit" >Supprimer</button>
</form>
$(".delete_type").click( function (e) {
e.preventDefault();
var _this = $(this)
//console.info(_this.parent().prop('action'))
swal({
title: "Attention",
text: "Veuillez confirmer la suppression",
type: "warning",
showCancelButton: true,
confirmButtonText: "Confirmer",
cancelButtonText: "Annuler",
}, function(result) {
if(result) {
$('#del_type').submit();
} else {
swal('cancelled');
}
});
});
when i click on the delete button it shows the swal with the confirm and cancel button but when you click on confirm nothing happens and there's no submit
(and sorry for my english)

According to official docs, you have to use promise and check result.value.
https://sweetalert2.github.io/v7.html
So, try to rewrite it a bit, like that:
Swal({
title: "Attention",
text: "Veuillez confirmer la suppression",
type: "warning",
showCancelButton: true,
confirmButtonText: "Confirmer",
cancelButtonText: "Annuler",
}).then((result) => {
if (result.value) {
$('#del_type').submit();
} else {
swal('cancelled');
}
})

You can do this without swal.
$(".delete_type").click( function (e) {
if(!confirm('Do you want to Delete ?')){
return false;
}
$('#del_type').submit();
});

Uncaught SweetAlert: Unexpected 2nd argument?

I have a problem with sweetalert, I would like to show the confirm box alert on button click but it's not working
This is my JS code:
$(document).ready(function(){
$('[data-confirm]').on('click', function(e){
e.preventDefault(); //cancel default action
//Recuperate href value
var href = $(this).attr('href');
var message = $(this).data('confirm');
//pop up
swal({
title: "Are you sure ??",
text: message,
type: "warning",
showCancelButton: true,
cancelButtonText: "Cancel",
confirmButtonText: "confirm",
confirmButtonColor: "#DD6B55"},
function(isConfirm){
if(isConfirm) {
//if user clicks on "confirm",
//redirect user on delete page
window.location.href = href;
}
});
});
});
HTML:
<a data-confirm='Are you sure you want to delete this post ?'
href="deletePost.php?id=<?= $Post->id ?>"><i class="fa fa-trash">
</i> Delete</a>
All required files are imported.

The code you are using is from prior the latest version 2. Please read up on Upgrading from 1.X.
You should use promise to keep track of user interaction.
Updated code
$(document).ready(function(){
$('[data-confirm]').on('click', function(e){
e.preventDefault(); //cancel default action
//Recuperate href value
var href = $(this).attr('href');
var message = $(this).data('confirm');
//pop up
swal({
title: "Are you sure ??",
text: message,
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
swal("Poof! Your imaginary file has been deleted!", {
icon: "success",
});
window.location.href = href;
} else {
swal("Your imaginary file is safe!");
}
});
});
});
Notes
type have been replaced with icon option.
Replaced showCancelButton, CancelbuttonText, confirmButtonText and confirmButtonColor with only buttons.
dangerMode: true to make the confirm button red.