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();
});
Related
I'm using sweet alert in my project but it's getting closed within seconds
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
function deleteContact(cid){
swal({
title: "Are you sure?",
text: "You want to delete this contact?",
icon: "warning",
buttons: true,
dangerMode: true,
timer: 5000,
})
.then((willDelete) => {
if (willDelete) {
/* swal("Poof! Your imaginary file has been deleted!", {
icon: "success",
}); */
window.location="/user/delete/"+cid;
} else {
swal("Your contact is safe!");
}
});
}
</script>
---------------------------------------------------------------------------------------
deleteContact() function is being called here in below delete button-
<i class="fa-solid fa-trash text-danger" title="Delete"></i>
remove the "timer: 5000," from your swal config
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
}
?>
I created a DA using a SweetAlert js code but when i click in the cancel button the other actions in this DA dont stop.
This is the code that im using:
``
const swalWithBootstrapButtons = Swal.mixin({
customClass: {
confirmButton: 'btn btn-success',
cancelButton: 'btn btn-danger'
},
buttonsStyling: false
})
swalWithBootstrapButtons.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, cancel!',
reverseButtons: true
}).then((result) => {
if (result.isConfirmed) {
swalWithBootstrapButtons.fire(
'Deleted!',
'Your file has been deleted.',
'success'
)
} else if (
/* Read more about handling dismissals below */
result.dismiss === Swal.DismissReason.cancel
) {
swalWithBootstrapButtons.fire(
'Cancelled',
'Your imaginary file is safe :)',
'error'
)
}
})
``
What do i need to do to stop the actions when i push the cancel button?
Thanks in advance for all your help.
Try with apex.da.cancel.
Find out more on this link.
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);
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.