https://github.com/ondiekelijah/sweetalert-js-with-flask

A Simpler and easier way to use custom SweetAlert2 with Flask.
https://github.com/ondiekelijah/sweetalert-js-with-flask

bootstrap5 flask python sweetalert2

Last synced: about 2 months ago
JSON representation

A Simpler and easier way to use custom SweetAlert2 with Flask.

• Host: GitHub
• URL: https://github.com/ondiekelijah/sweetalert-js-with-flask
• Owner: ondiekelijah
• License: mit
• Created: 2021-08-26T07:18:50.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-09-24T01:19:14.000Z (over 3 years ago)
• Last Synced: 2023-03-10T18:33:09.872Z (almost 2 years ago)
• Topics: bootstrap5, flask, python, sweetalert2
• Language: Python
• Homepage:
• Size: 427 KB
• Stars: 4
• Watchers: 1
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
SweetAlert Js with Flask


![](https://github.com/Dev-Elie/SweetAlert-Js-with-Flask/blob/main/static/header_image.png)

## Usage :pushpin:

### Points to note:

   - You should be using Bootstrap 5.

   > Find it [here](https://getbootstrap.com/docs/5.0/getting-started/introduction/#starter-template)

   - Must include a link to sweetalert2 cdn.

   > Find it [here](https://sweetalert2.github.io/#download)

   - In your flask routes you must be using the message flashing method.

  

### 1. As a template :pushpin:

To use this custom alerts as a template;

- In your templates folder create a file `"sweetalerts.html"` then copy and paste the following lines of code.

```html

                   

   {% with messages = get_flashed_messages(with_categories=true) %}

   {% if messages %}

   {% for category, message in messages %}

   

      

   Swal.fire({

          title:"{{ category.title() }}!",

          // success , error , warning ,info

          text: "{{ message }}",

          // Custom message flashed from your flask routes

          icon: "{{ category }}" == "danger" ? "error" : "{{ category }}"

          // success , error , warning ,info

   })

   

   {% endfor %}

   {% endif %}

   {% endwith %}

   

```

- Then import the template in your html file as follows.

```

{% include "sweetalerts.html" %}

```

### 2. Inline :pushpin:  

Alternatively,you can just copy and paste the above code snippet inside your html file.

```html

    

    

    

    

    

    

    

    Hello, world!

    


                                

                {% with messages = get_flashed_messages(with_categories=true) %}

                {% if messages %}

                {% for category, message in messages %}

                


                    Swal.fire({

                        title:"{{ category.title() }}!",

                        // success , error , warning ,info

                        text: "{{ message }}",

                        // Custom message flashed from your flask routes

                        icon: "{{ category }}" == "danger" ? "error" : "{{ category }}"

                        // success , error , warning ,info

                    })

                

                {% endfor %}

                {% endif %}

                {% endwith %}

                

    

    

    {% block content%}

    {% content %}

   ...

    

    


```

### Sample snippets

Success             |  Information

:-------------------------:|:-------------------------:

![Sample](https://github.com/Dev-Elie/SweetAlert-Js-with-Flask/blob/main/static/success.png)  |  ![Sample](https://github.com/Dev-Elie/SweetAlert-Js-with-Flask/blob/main/static/info.png)

Danger           |  Warning

:-------------------------:|:-------------------------:

![Sample](https://github.com/Dev-Elie/SweetAlert-Js-with-Flask/blob/main/static/danger.png)  |  ![Sample](https://github.com/Dev-Elie/SweetAlert-Js-with-Flask/blob/main/static/warning.png)

Let's connect on Twitter