Develop Reference

Getting error `Uncaught TypeError: Cannot call a class as a function` while using sweet alerts 2

I am using Sweet alerts 2 in a delete function. The code is working fine, Getting the alert but when I am clicking on the delete button of the alert I am getting an error in the console. Not getting this error while clicking on the cancel button. I am using this for the first time so I don't know why I am getting this error.
Sweet Alerts 2 -> https://sweetalert2.github.io/
error ->
Uncaught TypeError: Cannot call a class as a function
My js function ->
function onDelete(){
swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.isConfirmed) {
jQuery.ajax({
url: "url",
type: "POST",
data: {
id: 2
},
success: function () {
swal.fire("Done!", "It was succesfully deleted!", "success");
},
error: function () {
swal.fire("Error deleting!", "Please try again", "error");
}
});
}
});
}

Just Make sure anywhere else in your code you dont have a sweet alert code, i.e. Mixing swal() for Sweetalert and swal.fire() for Sweetalert2.
it will return the error you have just described.

How do I use sweetalert2 with php form in CodeIgniter?

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");
}
});
});

sweetalert blocking like normal prompt

I am using swal (http://t4t5.github.io/sweetalert) to get some data from the user when they click on something. I want to then return that from the function I am calling swal in. In other words, for the example below, I want to set the text of the items in labels to the input value. The problem is it seems to return before swal has been closed/data has been entered:
.on('dblclick', function(l) {
labels.text(function (e) {
return swal({
title: "Edit label"
},
function(inputValue){
if(inputValue) {
return inputValue
}
});
})
});
A normal prompt alert is blocking so this can be done, can swal do this?
Thanks

While you can't have Sweet Alerts block, what you can do is use its callback functionality to fire any code that needs the alert to be dismissed first. The examples have a few instances of this. For example, assuming you have a yes/no style alert, there's the file deletion example.
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){
//The callback will only fire on cancel if the callback function accepts an
//argument. So, if the first line were 'function () {' with no argument, clicking
//cancel would not fire the callback.
if (isConfirm) {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
Or the AJAX example:
swal({
title: "Ajax request example",
text: "Submit to run ajax request",
type: "info",
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
},
function(){
setTimeout(function(){
swal("Ajax request finished!");
}, 2000);
});
In both of these, the callback isn't fired until the alert is interacted with, and the result of the call is passed in as an argument to the callback.
So say you need to wait until someone clicks okay.
swal({
title: "Delete your account?",
text: "Clicking on continue will permanently delete your account.",
type: "warning",
confirmButtonText: "Continue",
closeOnConfirm: false
}, function () {
swal("Deleted account", "We'll miss you!", "success");
});
Note: The closeOnConfirm/closeOnCancel only needs to be false if you're displaying a subsequent alert in the callback. If it's set to true, it will close the second alert before it's displayed to the user. However, if you're doing something non-swal related, and you don't have it close, it will remain open indefinitely.
swal({
title: "Delete your account?",
text: "Clicking on continue will permanently delete your account.",
type: "warning",
confirmButtonText: "Continue"
}, function () {
console.log("This still shows!")
});
If you want the alert to stay open while you're doing something non-swal related, you should call swal.close() at the end of your code.
swal({
title: "Delete your account?",
text: "Clicking on continue will permanently delete your account.",
type: "warning",
confirmButtonText: "Continue",
closeOnConfirm: false
}, function () {
console.log("This still shows!");
setTimeout(function () {
// This will close the alert 500ms after the callback fires.
swal.close();
}, 500);
});

No it can't, there is no way to create blocking code that waits for user input. Only ways are what JS already provides: prompt, alert, etc. Just run the code you need from the callback.

Page is not waiting for response from SweetAlert confirmation window

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
}
});
});
}
}
}
]);

How to use sweet alert with Ember.js and Rails

I'm an Ember noob and have been having some trouble getting sweet alert to work with an ember/rails application. I believe I have a scope issue that I'm not quite sure how to handle..
Inside my controller I have a delete action with the following code inside:
swal({
title: "Are you sure?"
text: "You will not be able to recover this post!"
type: "warning"
showCancelButton: true
confirmButtonColor: "#DD6B55"
confirmButtonText: "Yes, delete it!"
closeOnConfirm: false
}, ->
#get('model').destroyRecord().then =>
#transitionToRoute 'posts'
swal("Deleted!", "Your post has been deleted.", "success")
)
I trace the error to the '#get('model').destroyRecord().then' and I am pretty sure it is because I am calling 'this.get' inside a function that is inside of a controller action. However, I don't know how to fix that... How do I reference the controller within a function? Any suggestions on how to correct this or a better way to achieve the same functionality?

I dont know about coffescript, but maybe you can try assigning the controller to a variable?
controller = this; // or # ?
swal({
title: "Are you sure?"
text: "You will not be able to recover this post!"
type: "warning"
showCancelButton: true
confirmButtonColor: "#DD6B55"
confirmButtonText: "Yes, delete it!"
closeOnConfirm: false
}, ->
controller.get('model').destroyRecord().then =>
controller.transitionToRoute 'posts'
swal("Deleted!", "Your post has been deleted.", "success")
)

use behavior: in data as :
<%= link_to "Delete", s, :method => :delete, data: { behavior: 'delete' } %>
$("[data-behavior='delete']").on("click", function(e){
e.preventDefault();
swal({
title: "Are you sure you want to delete " ,
text: "You will not be able to recover this data!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}, function(isConfirm) {
if (isConfirm)
{
// here you can use ajax to delete
swal("Deleted!", "Ok , rooms will be delete after submit.", "success");
}
else
{
return false;
}
});
});