This is my code before add sweetalert2 to delete posts:
if (action == "delete") {
this.model.destroy({
beforeSend: function() {
target.addClass('loading');
view.blockUi.block(view.$el);
},
success: function(result, status, jqXHR) {
view.blockUi.unblock();
target.removeClass('loading');
if (status.success) {
if (result.get('post_type') == "post")
window.location.href = status.redirect;
else
view.$el.fadeOut();
} else {
// Error
}
}
});
return false;
}
this is my edit to make sweetalert2 compatible with the action:
if (action == "delete") {
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 post has been deleted.',
'success'
),
this.model.destroy({
beforeSend: function() {
target.addClass('loading');
view.blockUi.block(view.$el);
},
success: function(result, status, jqXHR) {
view.blockUi.unblock();
target.removeClass('loading');
if (status.success) {
if (result.get('post_type') == "post")
window.location.href = status.redirect;
else
view.$el.fadeOut();
} else {
// Error
}
}
})
});
return false;
}
I can't find the mistake the sweetalert2 dialog working right but the action of delete post not working, What can I do?
I can't find the mistake the sweetalert2 dialog working right but the action of delete post not working, What can I do?
When you initially call sweetalert it prompts for a response from the user.
The then() method returns a Promise. It takes up to two arguments: callback functions for the success and failure cases of the Promise.
If the user confirms, then you can execute the code. You already implemented a way to catch success and error, so when either of those happen, you just need to call sweetalert again to over ride the previous and display the correct alert to the user. You can do the same, optionally, for if the user decides to cancel to give them more feedback.
I believe that this would do the trick:
if (action == "delete") {
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 () {
this.model.destroy({
beforeSend: function() {
target.addClass('loading');
view.blockUi.block(view.$el);
},
success: function(result, status, jqXHR) {
view.blockUi.unblock();
target.removeClass('loading');
if (status.success) {
// Success
swal(
'Deleted!',
'Your file has been deleted.',
'success'
)
} else {
// Error
swal(
'Failed',
'Your file has not been deleted',
'error'
)
}
}
})
}, function () {
// Cancelled
swal(
'Cancelled',
'Your file has not been deleted',
'error'
)
});
return false;
}
Related
I have designed a simple ajax request for deleting a file from database in mvc. for that i am using javascritp ajax with swal prompt for delete. But it is not working. I am getting .then undefined error.
Here is the code--
$(".btnDel").click(function () {
var NewFileName = $(this).val();
var id =#Model.Pd.Id;
console.log(id);
console.log(NewFileName);
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
icon: "warning",
buttons: [
'No, cancel it!',
'Yes, I am sure!'
],
dangerMode: true,
})
.then(function (isConfirm) {
if (isConfirm) {
$.ajax({
type: "POST",
url: "#Url.Content("~/ManageProducts/DeleteExistingFile")/",
data: { 'id': id, 'fileName': NewFileName },
success: function (data) {
swal("Message.", data, "success");
location.reload();
},
error: function () {
swal("", "Something went wrong", "error");
}
});
}
else
{
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
});
Thanks for the edit. The snippet below defines id and NewFileName for testing and uses example.com for the POST - if you try to delete the file you get the "oops" message. In other respects it should be the same as the code in the post.
const id = "example_id";
const NewFileName = "example.pdf";
//**********************************
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
icon: "warning",
buttons: [
'No, cancel it!',
'Yes, I am sure!'
],
dangerMode: true,
})
.then(function (isConfirm) {
if (isConfirm) {
$.ajax({
type: "POST",
url: "https:www.example.com/delete",
data: { 'id': id, 'fileName': NewFileName },
success: function (data) {
swal("Message.", data, "success");
location.reload();
},
error: function () {
swal("", "Something went wrong", "error");
}
});
}
else
{
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
I am at a loss to explain why the snippet works but running it in VS says swal returns undefined. I would test the code in a browser first to see if it still errors.
Disclaimer: this is not the answer. . . yet. I am happy to delete it if anyone solves the mystery.
I want to display the message successfully deleting data with Sweetalert, and the beginning of the script:
Delete
Javascript :
jQuery(document).ready(function($) {
$('.delete-link').on('click', function() {
var getLink = $(this).attr('href');
swal({
title: 'Alert',
text: 'Delete?',
html: true,
confirmButtonColor: '#d9534f',
showCancelButton: true,
}, function() {
window.location.href = getLink
});
return false;
});
});
the data has been successfully deleted, but the way you want to display the data message has been deleted like this, where is it put in?
swal("Success!", "Successfully Deleted Data!", "success");
Please help.
Thanks.
Here is the code for the sweet alert.
jQuery(document).ready(function($){
$('.delete-link').on('click',function(){
var getLink = $(this).attr('href');
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
$.ajax({
url: getLink,
type: 'GET',
dataType: 'html'
})
.done(function(data){
console.log(data);
swal("Deleted!", "Your imaginary file has been deleted.", "success");
})
.fail(function(){
swal("Deleted_Error", "Error while deleting. :)", "error");
});
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
});
});
See here for the example for the Sweetalert
I am using sweet alerts 2 for my webpage and i am trying to trigger my php file when the user presses delete on the sweet alert, if they do not do nothing. For some odd reason it is not triggering the php file, the pop does not come up either, i ran a simple sweet alert in the console just to see if i have the correct scripts in and it works fine.
I have this code so far :
<form method="post" id="deleteF" name="delete">
<button type="submit" name="delete" class="btn btn-xl btn-mrg" id="delete" >Delete</button>
</form>
$(document).on('submit', 'deleteF', function (e) {
e.preventDefault();
swal({
title: "Are you sure?",
text: "You can not recover your account if you delete!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Delete",
cancelButtonText: "Cancel",
closeOnConfirm: false,
closeOnCancel: false
},
function (isConfirm) {
if (isConfirm) {
$.ajax({
type: 'POST',
url: 'lib/delete.php',
success: function (data) {
},
error: function (data) {
swal("NOT Deleted!", "Something happened!", "error");
}
});
} else {
swal("Cancelled", "Your account was not deleted", "error");
}
});
return false;
});
My php file only has a simple echo in it just to for testing, any help would be greatly appreciated, Note i only included the relevant parts, the sweet alert section is enclosed in script tags
<a data-id='" . $rows['id'] . "' id='delete_id' class='btn btn-danger btn-sm'<span class='glyphicon glyphicon-trash' href='javascript:void(0)'></span>delete</a>
<script>
$(document).ready(function() {
$(document).on('click', '#delete_id', function(e) {
var id = $(this).data('id');
SwalDelete(id);
e.preventDefault();
});
});
function SwalDelete(id) {
Swal.fire({
title: 'Are you sure?',
text: "It will be deleted permanently!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!',
showLoaderOnConfirm: true,
preConfirm: function() {
return new Promise(function(resolve) {
$.ajax({
url: 'office_info_delete.php',
type: 'POST',
data: 'id=' + id,
dataType: 'json'
})
.done(function(response) {
Swal.fire('Deleted!', 'Your file has been deleted.', 'success')
})
.fail(function() {
Swal.fire('Oops...', 'Something went wrong with ajax !', 'error')
});
});
},
});
}
</script>
I have an AJAX function (below). I am trying to pass an input from one page to another.
It redirects me to the other page but does not pass the required value.
I do not understand why it doesn't work as I expected.
I am looking for another way to do this. Any help will be appreciated.
//second page
<?php
$cuit = $_POST['cuit'];
?>
<input id="act" type="text" class="form-control" value="<?php echo $cuit ?>">
function mod(id, origen) {
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!',
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
buttonsStyling: false
}).then(function() {
if (origen == "perfiles") {
$.post("api/eliminar_perfil.php", {
id: id
}, function(mensaje) {
$("#tr_" + id).remove();
});
} else if (origen == "index") {
$.ajax({
type: "post",
url: "perfiles.php",
data: {
cuit: $("#cuit").val()
},
success: function(result) {
location.href = 'http://localhost/miramonteapp/perfiles.php';
}
});
}
swal('Deleted!', 'Your file has been deleted.', 'success')
}, function(dismiss) {
// dismiss can be 'cancel', 'overlay',
// 'close', and 'timer'
if (dismiss === 'cancel') {
swal('Cancelled', 'Your imaginary file is safe :)', 'error')
}
})
}
<input id="cuit" type="text" class="form-control" onkeyup="searchCliente();">
<button id="btnBuscar" onclick="mod($('#cuit'), 'index');" type="button" class="btn btn-default" name="button">Buscar</button>
Boy, I think your solution is simpler, you don't need the ajax call if you want to redirect with a param.
so replace this
$.ajax({
type : "post",
url : "perfiles.php",
data : {cuit: $("#cuit").val()},
success : function(result) {
location.href = 'http://localhost/miramonteapp/perfiles.php';
}
});
by this
location.href = 'http://localhost/miramonteapp/perfiles.php?cuit=' +
$("#cuit").val();
and in your destination page perfiles.php
just read the param and use it, you can read params in JS using this as a guide How to get the value from the GET parameters?
I am trying to override javascript confirm box with SweetAlert.
I have researched also about this but I can't found proper solution.
I am using confirm like this
if (confirm('Do you want to remove this assessment') == true) {
//something
}
else {
//something
}
And I am using this for overriding
window.confirm = function (data, title, okAction) {
swal({
title: "", text: data, type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Yes", cancelButtonText: "No", closeOnConfirm: true, closeOnCancel: true
}, function (isConfirm) {
if (isConfirm)
{
okAction();
}
});
// return proxied.apply(this, arguments);
};
Now confirm box is replaced with sweetalert.
When user click on Yes button then OK action of confirm box should be called. But this isn't calling
And In above code an error occurred Uncaught TypeError: okAction is not a function.
Please suggest me I should I do for override confirm box.
Since the custom implementation is not a blocking call, you need to call it like
confirm('Do you want to remove this assessment', function (result) {
if (result) {
//something
} else {
//something
}
})
window.confirm = function (data, title, callback) {
if (typeof title == 'function') {
callback = title;
title = '';
}
swal({
title: title,
text: data,
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes",
cancelButtonText: "No",
closeOnConfirm: true,
closeOnCancel: true
}, function (isConfirm) {
callback(isConfirm);
});
// return proxied.apply(this, arguments);
};