If I have a SweetAlert2 popup like this:
Swal.fire({
title: 'Warning',
icon: 'warning',
text: 'This is a warning',
confirmButtonText: 'Continue',
cancelButtonText: 'Back',
showCancelButton: true,
reverseButtons: true,
}).then((result) => {
if (result.value) {
// Do stuff
}
});
And instead of having it fire right away, I want to add it to a queue like this:
// Create array
swal_queue = [];
// Add popups to array
swal_queue.push({
title: 'Warning',
icon: 'warning',
text: 'This is a warning',
confirmButtonText: 'Continue',
cancelButtonText: 'Back',
showCancelButton: true,
reverseButtons: true,
});
p = Swal.queue(swal_queue);
p.then(function() {swal_queue = []});
How do I add the .then() code to the queue for that popup?
Related
I use the select2 plugin in my script. If you perform an alert when loading a page, you get this situation
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(function() {
Swal.fire(
'Deleted!',
'Your file has been deleted.',
'success'
);
})
At the same time, if you use the button to display a notification, there is no such problem. How can this be solved?
< button id = " button " >SHOWMODAL< / button >
<script>
$('#button').click(() => {
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(function() {
Swal.fire(
'Deleted!',
'Your file has been deleted.',
'success'
);
})
});
</script>
Solved by adding a class to the select2 handler
$('select.form-control').select 2();
How can I display a swal fire alert before redirecting?
<a :href="`/public/project/sendalert/${project.id}`">{project.first_name+' '+project.last_name}} #click="Alert"</a></strong></span>
alert() {
window.Swal.fire({
title: 'Are you sure?',
text: "Are you sure?"
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'YES!',
})
},
1.click event should be put into the properties.
<a #click="Alert">{project.first_name+' '+project.last_name}}</a></strong></span>
2.execute the redirect on the confirm action.
alert() {
window.Swal.fire({
title: 'Are you sure?',
text: "Are you sure?",
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'YES!',
}, function (isConfirm) {
if (isConfirm) {
location.href = "...";
}
});
}
I need your help because I can not retrieve the value and do a test and then prefill the following field.
Basically if we select in the morning, the proposed time will be 7am otherwise we can still modify this time.
Thanks for your help
progressSteps: ['1', '2', '3']
})
var test = 0;
var steps = [
{
title: ' Choose user?',
input: 'select',
type: 'question',
inputOptions: listeUser,
confirmButtonText: 'Next →',
showCancelButton: true,
},
{
title: ' Morning, AM or Night ?',
input: 'select',
type: 'question',
inputOptions: typequart,
confirmButtonText: 'Next →',
showCancelButton: true,
**inputValidator: (value) => {if(value === "'Morning'"){test = 1;}**
},
{
title: 'Hour',
input: 'text',
inputPlaceholder : 'HH-MM-SS',
**inputValue: if(test=1){input here this value (07-00-00)}**
type: 'info',
confirmButtonText: 'Next →',
showCancelButton: true,
}];
Brief
Hello everyone! I'm starter in javascript. I use Laravel + DataTables in my project. Now I use sweetalert2 instead of default confirms javascript.
Code
Here I call my javascript method:
<a href="#" onclick="deleteData('.$contact->id.')" class="btn btn-danger btn-xs">
<i class="fa fa-trash"></i>
<span>Delete</span>
</a>
Here my javascript function:
function deleteData(id){
var csrf_token = $('meta[name="csrf-token"]').attr('content');
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
cancelButtonColor: '#d33',
confirmButtonColor: '#3085d6',
confirmButtonText: 'Yes, delete it!'
}).then(function(){
$.ajax({
url: "{{url('contact')}}" + '/' + id,
type: "POST",
data: {'_method' : 'DELETE', '_token' : csrf_token},
success: function(data){
contacts.ajax.reload();
swal({
title: 'Success!',
text: 'Data has been deleted!',
type: 'success',
timer: '1500'
})
},
error: function(){
swal({
title: 'Oops...',
text: 'Something went wrong!',
type: 'error',
timer: '1500'
})
}
});
});
}
When I'll click to delete button:
Showing confirm model:
Then I'll click to cancel button. But after click to cancel button deleted data from database. And why are entries deleted in both cases?
You forgot to check the result of resolved promise:
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
cancelButtonColor: '#d33',
confirmButtonColor: '#3085d6',
confirmButtonText: 'Yes, delete it!'
}).then(function(result){
if (result.value) {
// perform the AJAX request
}
});
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#7"></script>
Related example from the official docs: https://sweetalert2.github.io/#dismiss-handle
I have a button for deleting one row
<button class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></button>
and using javascript dialog() for trigger link
<script>
function dialog() {
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>
the problem is SweetAlert closed and data in row deleted without confirm
function dialog() {
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!'
cancelButtonText: 'Cancel',
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");
}
});
}