Admin dashboard – lesson 10


Step 1 - alerts

Alerts are feedback messages which are displayed after specific actions preceded by the user.

With the right use of colors, they add some emotional weight to our information, ranging from a simple warning to critical system failure or from an operation success to a neutral information.

Click on the buttons below to see examples.

Info message Warning message Success message Error message

The simplest way to create an alert is to place onclick method within a given element (for example button).


<a class="btn btn-info" onclick="toastr.info('Hi! I am info message.');">Info message</a>
    

Step 2 - alerts usage via jquery

We'll use the more advanced method. We'll write a simple jquery function which refers to the ID of accordion's cards. Then we'll set custom options to the alerts.

In the scripts section, below the scripts of the charts, open new <script>tags and place the following code:


<!-- Alerts -->
<script>
    $(function () {
        $('#folder-1').click(function () {
            
            
        });
        
    });
</script>
    

As you can see we write a jquery function that refers to the id="folder-1" which is a heading of the first card of our accordion.

Now we'll call the alert function:


<!-- Alerts -->
<script>
    $(function () {
        $('#folder-1').click(function () {
            toastr.error("Folder 1 has been clicked!", "Folder 1", {
                "positionClass": "toast-top-right",
            });
        });
    });
</script>
    

Save the file and click on the first folder of the accordion. You will see the red alert in the top right corner of the window.

You can easily change the position of the alert by modifying the value of the positionClass variable.

Available options:

  1. toast-top-right

  2. toast-bottom-right

  3. toast-top-left

  4. toast-bottom-left

There are plenty of other options available for alerts. To learn more about it have a look at our alert creator.

Step 3 - final adjustments

To finish the work with the alerts we need to write another two functions for each accordion folder.

Add this code to the alert function:


<!-- Alerts -->
<script>
    $(function () {
        $('#folder-1').click(function () {
            toastr.error("Folder 1 has been clicked!", "Folder 1", {
                "positionClass": "toast-top-right",
            });
        });
        $('#folder-2').click(function () {
            // make it not dissappear
            toastr.info("Folder 2 has been clicked!", "Folder 2", );
        });
        $('#folder-3').click(function () {
            // make it not dissappear
            toastr.info("Folder 3 has been clicked!", "Folder 3", );
        });
    });
</script>
    

After saving the file and refreshing the browser you will notice that each click on the any accordion folder triggers an alert.


Your first admin dashboard is ready. Congratulation!


Previous lesson Download Live preview Next lesson

Spread the word:
Do you need help?: Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst. Dancer & nerd.