Anyone ever using sweet alert js? I have a question.
this is my code to delete a post by id_event:
<i class="glyphicon glyphicon-trash" onClick="return(confirm('Are you sure?'));"></i>
i want to using sweet alert js for delete confirmation. this is the code :
swal({
title: "Are you sure?",
text: "Your will not be able to recover this post!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function(){
swal("Deleted!", "Your post has been deleted.", "success");
});
i want to delete the post when i click the confirmButton.
how do i implementation the code? thanks for helping :)
You need use JS to prevent default action on this link and send AJAX request to server.
Something like this:
$('a[title=delete]').on('click', function(e) {
e.preventDefault();
$.ajax({
url: 'admin/event/delete_event/'+$(#).attr('data-id'),
method: "POST",
success: function() {
//code when success
},
error: function() {
//code when error
}
});
Unfortunately sweetAlert not have its own methods for closing modal. So I'm just returning closeModal method in the closure sweetAlert.
If you don't want to use ajax, you can't understand when delete is success or fail
Related
Details: How do I use sweetalert2 with PHP form in CodeIgniter?
Actually, I want to show sweetalert2 on submitting PHP form and then show sweetalert2 to confirm data, if the user confirms data should be submitted and then redirect to next page.
Problem: But in my case, it directly redirects to next page without my pressing confirm button on sweetalert.
PHP:
echo form_open( '/redirect to',['onsubmit'=>'return submitForm(this);']);
JavaScript:
function submitForm(){
swal({
title: "Are you Sure!",
text: "Data is Correct?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#cc3f44",
confirmButtonText: "Yes!",
closeOnConfirm: false
}).then(okay => {
if(okay)
{
alert("check");
}
else
{
alert("not sure");
}
});
}
PHP
echo form_submit(['name'=>'submit','id'=>'submit','value'=>'Submit', 'class'=>'btn btn-primary btn_size' ]);
Please help me regarding this problem. thanks in advance.
I am posting my working code here.I deleted event by sweet alert It was mapped on button by giving a class name 'demo' to button hope it will help
$('.demo').click(function () {
//e.preventDefault();
var id= document.getElementById('id').value;
swal({
title: "Are you sure?",
text: "Your will not be able to recover this Event!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plz!",
closeOnConfirm: false,
closeOnCancel: false },
function (isConfirm) {
if (isConfirm) {
location.href='<?php echo site_url('calendarController/delete_Event/'); ?>'+'/'+id;
} else {
swal("Cancelled", "Your event is safe :)", "error");
}
});
});
I'm trying to implement Sweet Alert to Node.js delete form, but unfortunately the alert doesn't work properly. It only pops up for a second and without clicking on delete button on the alert window, it deletes file from DB.
Here is my code:
<form action="/comicbooks/<%= comicbook._id %>/?_method=DELETE"
method="POST" class="deleteForm" onsubmit='swal({
title: "Are you sure?",
text: "Your will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false,
showLoaderOnConfirm: true,
},
function (isConfirm) {
location.reload();
});'>
<button class="btn btn-xs btn-danger">Delete</button>
</form>
Coul you please assist?
Many thanks in advance,
Szymon
You have two problems.
When the submit button is clicked, you want to display the alert, but you don't want the form to submit. You've done nothing to prevent the form from submitting.
When the alert has the OK button clicked, you want to submit the form, but you are reloading the current page instead.
So, sort out the submit button first.
Don't use the onsubmit attribute. It is more trouble than it is worth.
document.querySelector("form").addEventListener("submit", function (event) {
event.preventDefault(); // Stop normal form submitting
// Then include your code for showing the alert
});
Then make the alert do what you want when the OK button is selected.
function (isConfirm) {
document.querySelector("form").submit();
})
I finally found a bug in above code and now it is working perfectly in EJS file. There should be:
function archiveFunction(event) {
event.preventDefault(); // prevent form submit
var form = event.target.form; // storing the form
swal({
title: "Are you sure you want to delete the comicbook?",
text: "You will not be able to undo this action.",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Delete",
cancelButtonText: "Cancel",
closeOnConfirm: false,
closeOnCancel: false
},
function (isConfirm) {
if (isConfirm) {
form.submit(); // submitting the form when user press yes
} else {
swal("Cancelled", "Your comicbook has not been deleted.", "error");
}
});
}
Cheers,
Szymon
I'm trying to show a swal success message when data is passed. even though the data is passed i do not get the swal, and this shows up in the chrome console
Uncaught ReferenceError: swal is not defined
success # CustomerLoyalty:40
(anonymous function) # CustomerLoyalty:217
Line 40 :
<script>
function alerts() {
swal({ title: "Are you sure you want to delete?", text: "You will not be able to recover this record!", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Delete", closeOnConfirm: false }, function(){ swal("Deleted!", "Employee Record has been deleted", "success"); });
}
function success() {
swal("Warning!","Failed to record leave!", "success")
}
</script>
above is my swal functions and the "swal("Warning!","Failed to record leave!", "success")" is underlined in red when i click on the error in the console . (see screenshot)
Line 217:
<form role="form" method="POST" action="http://localhost:8000/CustomerLoyalty">
<script type="text/javascript">success();</script>
can anyone tell me whats wrong here ? i have pasted the swal links as well in my header.screenshot:
If swal itself showing as undefined then the swal script dint load at all. Check your network tab while loading and see whether the swal js is loaded.
SOLVEDIT
<script>
function alerts() {
swal({ title: "Are you sure you want to delete?", text: "You will not be able to recover this record!", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Delete", closeOnConfirm: false }, function(){ swal("Deleted!", "Employee Record has been deleted", "success"); });
}
<script>
function success() {
swal("Warning!","Failed to record leave!", "success");
}
I am using an onclick on a delete call
<input type='button' value='Delete' class='btn btn-danger btn-sm'
id='btn_Delete6' profile-id='#= ProfileID#'>
and this is the script that it runs
$(document).ready(function () {
$('body').on('click', 'td input', function () {
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) {
swal("Deleted!", "Your imaginary file has been deleted!", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
});
})
The issue is that I don't know how to get the url to run during the isConfirm function. I pass the profileID of the row into the url with profile-id. How can I call the /OBProfile/Delete/"profileid" that I need? This is done using SweetAlert
What do you mean by "Call an url", you mean going to it?
That would be done like this:
window.location.href = '/OBProfile/Delete/whatevertheprofileisis';
UPDATE AFTER COMMENT
I think this will come in handy.
AngularJS. How to call controller function from outside of controller component
profile-id is in ID property of td table??
you can use jquery closest to get id from td near to your input was clicked.
by example
$("input").closest(td).attr("id") = your id
I am trying to upgrade my JavaScript confirm() action to use SweetAlert. Currently my code is something like this:
<a href="/delete.php?id=100" onClick="return confirm('Are you sure ?');" >Delete</a>
This waits for the user to confirm before navigating to the delete page. I would like to use this example from SweetAlert to ask the user to confirm before deleting:
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
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");
}
});
Everything I have tried has failed. When the first alert is displayed, the page has gone ahead and deleted the item and refreshed before the user has even clicked on the alert buttons. How do I make the page wait for the users input?
Any help would be greatly appreciated.
You cannot use this as a drop-in replacement for confirm. confirm blocks the single thread of execution until the dialog has been acknowledged, you cannot produce the same behavior with a JavaScript/DOM-based dialog.
You need to issue a request to /delete.php?id=100 in the success callback for your alert box.
Instead of...
swal("Deleted!", "Your imaginary file has been deleted.", "success");
You need
<a href="#">Delete<a>
...
$.post('/delete.php?id=100').then(function () {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
You also must fix your delete.php to only accept POST requests. It's a huge problem to allow GET requests to delete resources. The first time Google or any other crawler finds your page, it will look at the href of every link in your document and follow each link, deleting all of your content. They will not be stopped by the confirm box, as they probably (with the exception of Google) won't be evaluating any JavaScript.
You can do it this way.
HTML:
<a href="/delete.php?id=100" class="confirmation" >Delete</a>
JS:
$('.confirmation').click(function (e) {
var href = $(this).attr('href');
swal({
title: "Are you sure?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: true,
closeOnCancel: true
},
function (isConfirm) {
if (isConfirm) {
window.location.href = href;
}
});
return false;
});
Seems a hack but it's working for me.
$('.delete').click(function () {
var id = this.id;
swal({
title: "Are you sure?",
text: "Your will not be able to recover this post!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function(){
alert(id);
});
});
<a id="<?php echo $row->id_portfolio ?>" class=" delete">
Here's an example in an Angular directive (since SweetAlert is offered through an angular directive wrapper). This is one 'elegant' method for doing this in JavaScript. On a click event, there is an e.stopImmediatePropagation(), then if the user confirms, it evaluates the "ng-click" function. (Note scope.$eval is not a JavaScript eval()).
Markup:
<i class="fa fa-times" ng-click="removeSubstep(step, substep)" confirm-click="Are you sure you want to delete a widget?"></i>
Simple "confirm click" directive:
/**
* Confirm click, e.g. <a ng-click="someAction()" confirm-click="Are you sure you want to do some action?">
*/
angular.module('myApp.directives').directive('confirmClick', [
'SweetAlert',
function (SweetAlert) {
return {
priority: -1,
restrict: 'A',
link: function (scope, element, attrs) {
element.bind('click', function (e) {
e.stopImmediatePropagation();
e.preventDefault();
var message = attrs.confirmClick || 'Are you sure you want to continue?';
SweetAlert.swal({
title: message,
type: 'warning',
showCancelButton: true,
closeOnConfirm: true,
closeOnCancel: true
}, function (isConfirm) {
if (isConfirm) {
if(attrs.ngClick) {
scope.$eval(attrs.ngClick);
}
} else {
// Cancelled
}
});
});
}
}
}
]);