I would like to be able to have 2 functions, run 1 of them, then inside it, run another and wait for its response before continuing in an if statement. The response is manual, (yes/no).
Basically something like this
function function1(){
if(function2("Delete", "are you sure", "warning") == true){ //stop here and wait for function2 to return true or false
console.log("yes");
} else {
console.log("no");
}
}
function function2($title, $text, $type){
swal({
title: $title,
text: $text,
type: $type,
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes',
cancelButtonText: 'No, cancel!',
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
buttonsStyling: false,
reverseButtons: true
}).then((result) => {
if (result.value) {
return true;
} else if (
// Read more about handling dismissals
result.dismiss === swal.DismissReason.cancel
) {
return false;
}
})
}
What is the cleanest and easiest way to achieve this, in Javascript or JQuery? It can't be instant, as I need the first function to pause and wait for the user response before continuing the function.
This might be what you looking for, not sure.
function1 is waiting the promise to be resolve to console.log.
function function1(){
function2().then(res => console.log(res ? "yes" : "no"));
}
function function2($id){
return new Promise(resolve => resolve);
}
Answer resolved through comments of the original post.
function function2($title, $text, $type){
return swal({
title: $title,
text: $text,
type: $type,
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes',
cancelButtonText: 'No, cancel!',
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
buttonsStyling: false,
reverseButtons: true
}).then((result) => {
if (result.value) {
return true;
} else if (
// Read more about handling dismissals
result.dismiss === swal.DismissReason.cancel
) {
return false;
}
})
}
function function1(){
function2("Discard", "are you sure?", "warning").then(function(response){
if(response == true){
} else {
}
});
}
Related
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'
)
}
});
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.
So i have to try to create an async function that waits for a user input before returning, however, I am not quite sure how to do it:
async createAlert() {
return await swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, cancel!',
reverseButtons: true
}).then(function (result) {
//user has answered we want to return the result
})
}
this jquery creates the following popup:
When the user presses either button the (then) part of the code is executed and here i want to return that result
Can anyone point me in the right direction?
Try it like that:
async createAlert() {
try{
let result = await swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, cancel!',
reverseButtons: true
});
// SUCCESS
return result;
}catch(e){
// Fail!
console.error(e);
}
}
I'm trying to make a sweetalert when the user clicks the delete button it will trigger a sweetalert and when the user clicks Yes, Delete it! it should make an axois request to delete the status. When the user clicks on Yes, Delete it! the sweetalert closes but the request is never made. If I remove the sweetalert and just leave the request it will delete the record.
Delete button
<button #click="destroy(statuses.id)" class="btn btn-danger btn-flat btn-sm"> <i class="fa fa-remove"></i> </button>
Delete method
methods: {
destroy(id) {
swal({
title: "Delete this order status?",
text: "Are you sure? You won't be able to revert this!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
confirmButtonText: "Yes, Delete it!",
}, () => {
del('status-delete/' + id)
})
}
}
Based from the documentation, you can do this.
swal({
title: "Delete this order status?",
text: "Are you sure? You won't be able to revert this!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
confirmButtonText: "Yes, Delete it!"
}).then((result) => { // <--
if (result.value) { // <-- if confirmed
del('status-delete/' + id);
}
});
Reference: https://sweetalert2.github.io/
Try this:
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: 'No, cancel!',
buttonsStyling: true
}).then(function (isConfirm) {
if(isConfirm.value === true) {
axios.post('status-delete/'+id, {
data: {
id: id
}
}).then(function (response) {
console.log('success')
})
}
});
I have a comment delete button in vue components.
<button class="button" style="background-color: grey;" #click="destroy">Delete</button>
When the button clicked will call the method "destroy"
destroy(){
swal({
title: "Delete this comment?",
text: "Are you sure? You won't be able to revert this!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
confirmButtonText: "Yes, Delete it!",
closeOnConfirm: true
},
function(){
axios.delete('/comment/' + this.comment.id + '/delete');
$(this.$el).fadeOut(300, () => {
return toastr.success('Comment deleted.');
});
});
},
i expect when alert come out, if users clicked confirm button then process to delete, but seem like when user clicked the delete function are not executed. What is the problems here?
The this context inside SWAL's callback function is the SWAL instance and not the Vue instance! This means that this.comment.id and this.$el are probably undefined and, thus, the function don't execute and would result in a TypeError.
To resolve this,
Use Arrow Functions
swal({
title: "Delete this comment?",
text: "Are you sure? You won't be able to revert this!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
confirmButtonText: "Yes, Delete it!",
closeOnConfirm: true
}, () => {
axios.delete('/comment/' + this.comment.id + '/delete');
$(this.$el).fadeOut(300, () => toastr.success('Comment deleted.'));
})
Capture this
let inst = this;
swal({
title: "Delete this comment?",
text: "Are you sure? You won't be able to revert this!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
confirmButtonText: "Yes, Delete it!",
closeOnConfirm: true
}, function onDelete(){
axios.delete('/comment/' + inst.comment.id + '/delete');
$(inst.$el).fadeOut(300, () => toastr.success('Comment deleted.'));
})
This is not only a this context error.
SweetAlert is promise-based, so you need to call your axios request, in a Promise.prototype.then() method.
swal({
title: "Delete this comment?",
text: "Are you sure? You won't be able to revert this!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
confirmButtonText: "Yes, Delete it!",
closeOnConfirm: true
})
.then( () => {
axios.delete('/comment/' + this.comment.id + '/delete');
$(this.$el).fadeOut(300, () => toastr.success('Comment deleted.'));
})