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
}
?>

Objects are not valid as a React child (found: [object Promise]) trying to return swal

I am trying to conditional rendering when state is undefined, and i would like to show a sweetalert to show the user that he has not selected a client. But i am receiving this error:
Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
Snippet:
const location = useLocation();
const ClientNotSelected = () => {
return (
<div>
{
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'
)
}
})
}
</div>
)
}
if (location.state === undefined) {
return <ClientNotSelected />;
}

There is no need to create and render a component to fire the alert.
You can move Swal.fire() to your if statement.
Like this:
if (location.state === undefined) {
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");
}
});
}

HOW I SOLVED IT:
I have created
const [clientSelected, setClientSelected] = useState(false);
and i checked it in the useEffect, with swal.fire inside here it doesnt give any problems/errors
useEffect(()=>{
if (location.state === undefined){
setClientSelected(false);
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
confirmButtonColor: '#3085d6',
confirmButtonText: 'Ok'
}).then((result) => {
if (result.isConfirmed) {
history.goBack();
}
})
}
else{
setClientSelected(true);
}
})
below i have continued with the same condition but checking the new var clientSelected
if (!clientSelected) {
return <h1>Select a client</h1>;
} else {
return <Component />;
}

Sweetalert 2 Issue on Icon

Anyone can help me?
I tried to used sweetalert2 on my app, but if used "question", "warning", and "info" it isn't correct.
Source from : https://sweetalert2.github.io/
enter image description here
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#10"></script>
<script>
function deleteConfirmation(id) {
var urlsite = "https://"+window.location.hostname+'/gudang/public/blok/d/'+id;
Swal.fire({
title: 'Peringatan',
text: "Anda yakin ingin menghapus data?",
icon: "question",
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Ya, Hapus!'
}).then((result) => {
if (result.isConfirmed) {
// redirect to delete data
location.replace(urlsite);
// notification
Swal.fire(
'Sukses!',
'Data Anda berhasil dihapus, mohon tunggu hingga proses selesai!',
'success'
)
} else {
// cancel to deleting data
Swal.fire(
'Batal Hapus!',
'Data Anda batal dihapus!',
'error'
)
}
})
}
</script>

try with options
Swal.fire({
title: 'Batal Hapus',
text: 'Data Anda batal dihapus!',
icon: 'error',
})
as per doc https://sweetalert2.github.io/

You can use a custom class to hide one of the icons. Some icons have content in a ::before pseudo-class which doubles up.
Create a custom class
.no-before-icon::before {
display: none !important;
}
Apply it to all icons - doesn't effect success or error icons
Swal.fire({
title: "No more double icons",
icon: "info",
customClass: {
icon: "no-before-icon",
},
});

Depending on your version of Sweetalert the property that sets the icon can be called either 'icon' or 'type', try both. Can't do much more without seeing your code.

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();
});

SweetAlert not working with single quotes

When using SweetAlert i'm having problems when using single quotes for example the code below works
<script>
function test()
{
Swal.fire({
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((result) => {
if (result.value) {
Swal.fire(
'Deleted!',
'Your file has been deleted.',
'success'
)
}
})
}
</script>
But when using this with single quotes (within php echo) - it will not work
text: "You won't be able to revert this!", = ok
text: 'You won't be able to revert this!', = not ok.
is there a answer to this puzzle.

You have an unescaped quote in the word won't. If you wish to use single quotes to define your string, you should escape it, like so: 'You won\'t be able to revert this!'