Sweet alert no works with cancel button - javascript

I'm using the sweet alert library and I have a problem with the cancel button. This is my code for the sweet alert:
sweetAlert({
title: title,
text: text + ' ' + courseList,
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: confirmButtonText,
cancelButtonText: "Continue with purchase",
closeOnConfirm: false,
closeOnCancel: false,
html: true
},
function(isConfirm) {
if (isConfirm) {
angular.forEach(repeatedCourses, function(repeatedCourse) {
$rootScope.$apply(function() {
this.removeCoursePurchase(repeatedCourse);
}.bind(this));
}.bind(this));
$rootScope.$broadcast('uncheckCheckboxes');
swal("Deleted!", "Your purchase has been refreshed.", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
}.bind(this));
When the user click on the confirm button, works fine, but If the cancel button is clicked doesn't do anything, it doesn't appear the "Cancelled" box and I don't know why!

Remove the .bind(this) attached to the callback function and it will work.

Related

how to stay on the same page when the confirm button of a sweet alert is clicked?

This is the sweet-alert I am using and I am changing the color of a button from red to green when it is clicked.but I don't want the page to reload when the confirm button is clicked.The issue is that the sweet alert is not closing when I click the confirm button.any help would be appreciated greatly
function UpdateChildStatus(id,status)
{
$.ajax({
method:'get',
url:'updateChildrenStatus',
data:{id:id,status:status},
success:function(result){
if (status===1)
{
swal({
title: "Successfully Enabled!",
type: "success",
showCancelButton: false,
confirmButtonColor: "#2ECC71",
confirmButtonText: "Ok",
closeOnConfirm: true },
function (confirm) {
location.reload();
});
}
else
{
swal({
title: "Successfully Disabled!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#E74C3C",
confirmButtonText: "Ok",
closeOnConfirm: true },
function (confirm) {
$("#'id'").attr('class', 'btn btn-block btn-success');
event.preventDefault();
});
}
},
error:function(x, y, thrownError){
console.log(thrownError);
}
});
}
if you are calling the function from your html like this:
<button onclick="someFunc()">,
You need to change that to
<button onclick="return someFunc()">
also, at the end of your function in javascript, add:
return false;
That should be enough to prevent the page from reloading on click. If you could provide your code a little bit in detail, I can modify it for you. :)

Laravel 5.2 - Sweet Alert confirmation box

I have Categories listed in a view. A delete category button is also there in the view which does work and deletes the category when clicked.
What I want to do is before deleting a category, a sweet alert dialog to pop up and ask for confirmation. If confirmed, it should go to the defined route and delete the category.
The delete link is defined like this:
<a id="delete-btn" href="{{ route('admin.categories.destroy', $category->id) }}" class="btn btn-danger">Delete</a>
and the script is defined like this:
<script>
$(document).on('click', '#delete-btn', function(e) {
e.preventDefault();
var link = $(this);
swal({
title: "Confirm Delete",
text: "Are you sure to delete this category?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: true
},
function(isConfirm){
if(isConfirm){
window.location = link.attr('href');
}
else{
swal("cancelled","Category deletion Cancelled", "error");
}
});
});
</script>
However, when I click the delete button it deletes the category, but the sweet alert message doesn't show up.
The route is defined as following:
Route::get('/categories/destroy/{category}', [
'uses' => 'CategoriesController#destroy',
'as' => 'admin.categories.destroy',
]);
and the controller function is defined as:
public function destroy(Category $category)
{
$category->delete();
//this alert is working fine. however, the confirmation alert should appear
//before this one, which doesn't
Alert::success('Category deleted successfully', 'Success')->persistent("Close");
return redirect()->back();
}
Any help would be appreciated. Thanks.
Try this:
<script>
var deleter = {
linkSelector : "a#delete-btn",
init: function() {
$(this.linkSelector).on('click', {self:this}, this.handleClick);
},
handleClick: function(event) {
event.preventDefault();
var self = event.data.self;
var link = $(this);
swal({
title: "Confirm Delete",
text: "Are you sure to delete this category?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: true
},
function(isConfirm){
if(isConfirm){
window.location = link.attr('href');
}
else{
swal("cancelled", "Category deletion Cancelled", "error");
}
});
},
};
deleter.init();
</script>
EDIT: From your comment at #kalyan-singh-rathore's answer, I think you're not properly injecting the script in your blade template. If you're extending a base layout, make sure you've included the script or yielded it from a child layout.
Write anchor in below way.
Delete
Now in URL select change href to customParam.
function (isConfirm) {
if (isConfirm) {
window.location = link.attr('customParam');
} else {
swal("cancelled", "Category deletion Cancelled", "error");
}
}
Basically in your case both href and event lisner are on click.
Try this one it worked out for me :)
document.querySelector('#promote').addEventListener('submit', function (e) {
let form = this;
e.preventDefault(); // <--- prevent form from submitting
swal({
title: "Promote Students",
text: "Are you sure you want to proceed!",
type: "warning",
showCancelButton: true,
// confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, I am sure!',
cancelButtonText: "No, cancel it!",
closeOnConfirm: false,
closeOnCancel: false,
dangerMode: true,
}).then((willPromote) => {
e.preventDefault();
if (willPromote.value) {
form.submit(); // <--- submit form programmatically
} else {
swal("Cancelled", "No students have been promoted :)", "error");
e.preventDefault();
return false;
}
});
});

How to wait for user response on Meteor AutoForm submission?

I am using Meteor and Aldeed's Autoform. I want to check that the user is certain before submission takes place. I have tried many things but when I press the button, the form submits anyway. Here's what I have now, which produces a modal nicely (with SweetAlert) even though submission occurs in the background anyway:
AutoForm.hooks({
createEventForm: {
before: function() {
this.event.preventDefault();
},
beginSubmit: function() {
this.event.preventDefault();
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!",
closeOnConfirm: true },
function(){
swal("Deleted!", "Your imaginary file has been deleted.", "success"); });
},
How can I make the form wait for the user to confirm or cancel the operation?
Thanks!
The beginSubmit is called at the beginning of the form submission. As the documentation states, it can be used to disable/enable buttons or showing a wait message when submitting longer requests. If you want to display a confirmation message and submit the form depending on the user's decision, you need to use the before hook.
For example:
AutoForm.hooks({
createEventForm: hooksObject
});
var hooksObject = {
before: {
insert: function(doc) {
var self = this;
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!",
closeOnConfirm: true
}, function(isConfirm) {
if (isConfirm) {
/* Submit form: */
self.result(doc);
swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
/* Async cancel form submission: */
self.result(false);
}
});
}
}
}

Sweet Alert Yii

I am trying to use sweet alert in yii in place on the confirmation option.
I have an ajax button and I would like the sweet alert to pop up, once the user has chosen confirm or cancel I can then either continue with the ajax request or stop.
'ajax' => array(
'url'=>CController::createUrl('items/delete'),
'type'=>'POST',
'async'=>true,
'data'=>array('Item'=>$item['Item_id']),
'dataType'=>'json',
'enctype'=>'multipart/form-data',
'cache'=>false,
'beforeSend'=>'js:function(data)
{
var x = sweetalertDelete();
if(x){alert("aaaaaaa"); return true;}
else {alert("bbbbb"); return false;}
}',
'success'=>'function(data)
{
I am using beforesend in order to display the sweet alert box. The issue is that as soon as the the box appears, x is returned and the alerts seen later are then shown. Here is my sweet alert code:
function sweetalertDelete(){
swal({
title: "<?php echo Yii::t('app','misc.order_delete'); ?>",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false,
closeOnCancel: false
},
function (isConfirm) {
//swal("Deleted!", "Your imaginary file has been deleted.", "success");
if (isConfirm) {
alert("true");
return true;
}
else
{
alert("false");
return false;
}
});
}
My question is how I can make it so that the value of isconfirm is returned and until the confirm/cancel button is clicked, the ajax request will not be sent.

Onclick Delete not stopping before pressing Okay

I am using an onclick on a delete call
"<a href='" + Url.Action("Delete", "OBProfile", new { id = "#= ProfileID#" })
+ "' title='Delete' id='deleteButton' class='btn btn-danger btn-sm
deleteButton' onclick='return confirm_delete(#= ProfileID#)'>Delete</a>"
and this is the script that it runs
function confirm_delete() {
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!',
closeOnConfirm: false
},
function () {
swal("Deleted!", "Your imaginary file has been deleted!", "success");
});
};
The issue is that it doesn't stop and wait for the Delete button to be pressed. it calls the script, the box pops up, it deletes the record, and refreshes the page. I need it to process when I click the confirm button. This is done using SweetAlert
So, you anyway have to use jQuery for the swal to work. Therefore, do not use inline event handler like you did (onclick='return confirm_delete...). Use event binding the jQuery way, prevent the default behaviour, when delete is confirmed, set the location to go to the link URL as below.
$("#deleteButton").on("click", function(evt) {
evt.preventDefault();
var _this = this;
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!',
closeOnConfirm: false
}, function(isConfirm) {
if (isConfirm) {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
location.href = _this.href;
}
});
});
<link href="https://t4t5.github.io/sweetalert/dist/sweetalert.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://t4t5.github.io/sweetalert/dist/sweetalert-dev.js"></script>
<a href='http://www.aol.com' title='Delete' id='deleteButton' class='btn btn-danger btn-sm
deleteButton'>Delete</a>

Categories