Stack Overflow
Stack Overflow

Questions tagged [sweetalert2]

A responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes with zero dependencies. Use this tag for questions that involve using this library.

A JavaScript library for generating popup windows. It can be combined with jQuery and it returns promises.

SweetAlert2 page

SweetAlert2 CDN

Stack Overflow Quick Start Snippet

html

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9.17.1/dist/sweetalert2.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@9.17.1/dist/sweetalert2.css">

javascript

Swal.fire({
  title: 'Success!',
  text: 'Swal ready',
  icon: 'success',
  confirmButtonText: 'Cool'
})
821 questions
41
votes
12 answers

Remove "OK" button from sweet alert dialog

I am using javascript sweetalert2 library. I want to remove the OK button from the alert box but I did not find any property for not to display this button. I am using the timer property timer:1000 for closing the alert in one second. So, I don't…
Ankush Rishi
  • 2,861
  • 8
  • 27
  • 59
35
votes
2 answers

Angular Material: How to close all mat-dialogs and sweet-alerts on logout

I wanted to close all my dialog's (mat-dialog, bootstrap modals & sweet alerts) on logout in Angular. This is how it was done in AngularJS (version 1.5): function logout() { //hide $mdDialog modal …
hakuna
  • 6,243
  • 10
  • 52
  • 77
22
votes
5 answers

Uncaught (in promise) cancel using SweetAlert2

how do I properly escape the cancel button without throwing an error when using promises? My code throws an alert confirmation with a required checkbox. the code executes as it should to the user, but it throws an error in the console…
Frankenmint
  • 1,570
  • 3
  • 18
  • 33
21
votes
9 answers

More than 2 buttons on sweetalert 2

I have a sweetalert with 2 buttons but I want to have one more button in it. For example, as of now, I have yes and no I want to add one more button say later. Please help. $("#close_account").on("click", function(e) { e.preventDefault(); …
Sukhwinder Sodhi
  • 455
  • 1
  • 4
  • 18
18
votes
6 answers

How to use sweetalert2 in angular2

Getting this error after npm start in angular project. app/app.component.ts(12,7): error TS2304: Cannot find name 'swal'. app/app.component.ts(21,7): error TS2304: Cannot find name 'swal'. I created an angular project. Inside app.component.ts I…
Akash Rao
  • 920
  • 3
  • 12
  • 25
16
votes
3 answers

How to listen for when sweet alert closes

I am currently working with sweetalert2 and I am trying to detect when the alert closes. However the DeleteUnsavedImages function is not firing. I thought that assigning the function to the onclose key would work but no luck. swal({ html:…
Hayden Passmore
  • 1,135
  • 2
  • 12
  • 34
16
votes
9 answers

How can i stop sweetalert scrolling to top after clicking ok?

I'm using sweetalert2 script for when a user posts a comment on my site, It scrolls down to their comment and sweet alert pops up but when they click ok on the sweet alert box it scrolls back upto the top. From what i've been reading i need some…
Exoon
  • 1,513
  • 4
  • 20
  • 35
15
votes
2 answers

Sweealert2 : Unknown parameter icon

I'm using sweealert2 on my project here's my code header include js via jsdeliver.net Jquery Version : jQuery v3.4.1 Script on…
jharrvis
  • 325
  • 1
  • 3
  • 7
13
votes
3 answers

Adding class to sweet alert

I am trying to add an extra class for my modal so I can select it from LESS and turn it's background to transparent. But customClass is not working. Is there any other way to do it. BTW I have already changed a lot with default classes so I need to…
nodeSpret
  • 49
  • 1
  • 1
  • 6
12
votes
1 answer

Sweetalert2 : correct way to completely disable animation with version >= 9.0.0

Before version 9.0.0 i used this code to completely disable animation on a toast alert. Swal.fire({ animation : false, toast: true, .... }); Now with version 9.* i tried with this code, and the result it looks the same Swal.fire({ …
WhiteLine
  • 1,919
  • 2
  • 25
  • 53
12
votes
8 answers

SweetAlert2 - Bind another event to cancel button?

I am using the latest version of the awesome SweetAlert2 jquery plugin. I have a simple SweetAlert with 2 buttons. 1 button is the confirm button, the other is the cancel button. I am using the html option to add a text input to the alert. When the…
Piet
  • 2,188
  • 5
  • 19
  • 30
9
votes
1 answer

How do I supress JSDOM errors in Jest?

I have an issue where a 3rd-party library is using some valid CSS parser features that are not available in JSDOM, and I'd just like to suppress those kinds of errors. But given that I'm using JSDOM through Jest, I'm not quite sure how to do that. I…
jktravis
  • 1,427
  • 4
  • 20
  • 36
9
votes
1 answer

Highlighting default text input in sweetAlert

I have a SweetAlert2 that allows text input, and I give it a default value. I'd like this default value to be highlighted when the alert pops up, so that the user can immediately overwrite it if needed. Here's an example: And here is the function…
Edmond
  • 615
  • 1
  • 5
  • 15
9
votes
3 answers

Show loading alert with SweetAlert2 without having to interact

Right now I have this code: swal({ title: 'Loading cars from data base', showLoaderOnConfirm: true, preConfirm: () => { return this.carsSvc.getCars().then((cars: ICar[]) => { this.setData(cars); …
user4878548
8
votes
1 answer

Uncaught TypeError: Cannot read property 'then' of undefined SweetAlert & jquery

Was working around 5 days ago, just went onto the website and it no longer works, checked Chrome console & found this error. Rest of the code works just fine, everything pops up as expected. the .then has just broken itself. not sure if due to an…
Mark Allen
  • 83
  • 1
  • 3
1
2 3
…
54 55