Displaying simple JS notifications using Toastr

By Eugenia Pérez | 21 April, 2014

As we all know it is not always trivial to present information messages and notifications to your users after an operation is done. You have to handle a number of different outcomes, such as success, error, warning, info and so on. And these messages have to appear in an unobtrusive way, which means that the information has to be clear and simple to understand and gracefully displayed.

Until now I’ve been using Bootstrap alerts, which are obviously a good alternative in projects where Bootstrap is used. However, some days ago I’ve discovered Toastr, which claims to me a non-blocking messaging JS library. It’s really simple to configure, extendable and the results are really smooth and elegant.

You only need to include the Toastr Js file and then use it all over your JavaScript code where you want to display notifications to the user.

A simple example of how to print a message is:

$scope.saveEvent = function () {
                Event.saveEvent($scope.event,
                function success() {
                    toastr.success("Evento insertado correctamente");
                },
                function err() {
                    toastr.error("La operacion no se ha podido realizar. Vuelva a intentarlo más tarde", "Error");
                });
facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Leave a Reply

Your email address will not be published.