How do I implement Toastr JS?

Question

I am new to JS and not sure how to make this work on my page. Below is what I have. How must I make this alert show?

I added the source correctly but not sure how to render the alert.

<!doctype html>
    <html>
    <head>
    <title>Toast</title>
    <link href="toastr.css" rel="stylesheet"/>
    <script src="toastr.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script>
    $(document).ready(function() {
    //toastr.info('Are you the 6 fingered man?')


    Command: toastr[success]("   ", "Settings Saved!")

    toastr.options: {
    "debug": false,
    "positionClass": "toast-top-right",
    "onclick": null,
    "fadeIn": 300,
    "fadeOut": 1000,
    "timeOut": 5000,
    "extendedTimeOut": 1000
    }
    });
    </script>
   </head>
    <body>
    </body>
    </html>

I hope you've started with the [documentation](https://github.com/CodeSeven/toastr) — Blazemonger, May 14 '13 at 18:10
I did but I am not clear as to how to call the alert? Do I use a click event? I am new to JS as well. — starbucks, May 14 '13 at 18:11

score 71 · Accepted Answer · edited Apr 22 '20 at 17:11

71

Toastr is a very nice component, and you can show messages with theses commands:

// for success - green box
toastr.success('Success messages');

// for errors - red box
toastr.error('errors messages');

// for warning - orange box
toastr.warning('warning messages');

// for info - blue box
toastr.info('info messages');

If you want to provide a title on the toastr message, just add a second argument:

// for info - blue box
toastr.success('The process has been saved.', 'Success');

you also can change the default behaviour using something like this:

toastr.options.timeOut = 3000; // 3s

See more on the github of the project.

Edits

A sample of use:

$(document).ready(function() {

    // show when page load
    toastr.info('Page Loaded!');

    $('#linkButton').click(function() {
       // show when the button is clicked
       toastr.success('Click Button');

    });

});

and a html:

<a id='linkButton'>Show Message</a>

edited Apr 22 '20 at 17:11

Vencovsky

28,550
17
109
176

answered May 14 '13 at 18:13

Felipe Oriani

37,948
19
131
194

Thanks. But my question is how to use them in my html to show those messages. Thanks! – starbucks May 14 '13 at 18:14
Well, you already have setup it on your page right? just call those methods where you need to show a message :).. for sample, on the `$(document).ready(function() {...});` or any other event handler! – Felipe Oriani May 14 '13 at 18:15
Thats what I mean. How do I call them? I am sorry if this is obvious but I am new to JS. – starbucks May 14 '13 at 18:16
can you give me a sample using my code in the question? I will really appreciate it. thanks! – starbucks May 14 '13 at 18:17
Somethoing like this? $('.show_hide').click(function () { // for success - green box toastr.success('Success messages'); toastr.options.timeOut = 3000; // 3s }); – starbucks May 14 '13 at 18:20
Thanks. after copying your code, i got this: ReferenceError: jQuery is not defined } (window, jQuery)); toastr.js (line 166) SyntaxError: invalid label toastr.options: { toast.html#toastr (line 28, col 7) – starbucks May 14 '13 at 18:25
How do i change the location of toastr ? I want it to shown in bottom center, i tried to put the options but they dont work it follows the default method options – Rajan Jun 23 '17 at 06:38

score 11 · Answer 2 · edited Feb 19 '22 at 12:30

You dont need jquery-migrate. Summarizing previous answers, here is a working html:

<html>
  <body>
    <a id='linkButton'>ClickMe</a>
      
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
      
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/css/toastr.css" rel="stylesheet"/>
      
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/js/toastr.js"></script>
      
    <script type="text/javascript">
      $(document).ready(function() {
        toastr.options.timeOut = 1500; // 1.5s
        toastr.info('Page Loaded!');
        $('#linkButton').click(function() {
           toastr.success('Click Button');
        });
      });
    </script>
  </body>
</html>

score 8 · Answer 3 · answered Jan 23 '14 at 11:31

I investigate i knew that the jquery script need to load in order that why it not worked in your case. Because $ symbol mentioned in code not understand unless you load Jquery 1.9.1 at first. Load like follows

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/css/toastr.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/js/toastr.js"></script>

Then it will work fine

score 5 · Answer 4 · answered May 20 '19 at 06:02

This is a simple way to do it!

<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/css/toastr.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/js/toastr.js"></script>
<script>
function notificationme(){
toastr.options = {
            "closeButton": false,
            "debug": false,
            "newestOnTop": false,
            "progressBar": true,
            "preventDuplicates": true,
            "onclick": null,
            "showDuration": "100",
            "hideDuration": "1000",
            "timeOut": "5000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "show",
            "hideMethod": "hide"
        };
toastr.info('MY MESSAGE!');
}
</script>

score 0 · Answer 5 · edited Apr 12 '18 at 10:50

Add CDN Files of toastr.css and toastr.js

<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/css/toastr.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/js/toastr.js"></script>

function toasterOptions() {
    toastr.options = {
        "closeButton": false,
        "debug": false,
        "newestOnTop": false,
        "progressBar": true,
        "positionClass": "toast-top-center",
        "preventDuplicates": true,
        "onclick": null,
        "showDuration": "100",
        "hideDuration": "1000",
        "timeOut": "5000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "show",
        "hideMethod": "hide"
    };
};


toasterOptions();
toastr.error("Error Message from toastr");

No, It is not necessary. Toastr will be applied with default Values. If you need any Customization on Toastr, then you can. If not, proceed to call Success, Error, Info,Warning Toastr's directly. — Meher, Apr 12 '19 at 05:45

score 0 · Answer 6 · answered Mar 24 '22 at 06:55

This is a simple way to do it!

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toaster Example</title>
    <!-- toastr -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/css/toastr.css" rel="stylesheet" />
</head>

<body>
    <button id="btnInfo">Info</button>
    <button id="btnSuccess">Success</button>
    <button id="btnError">Error</button>
    <button id="btnWarning">Warning</button>

    <!-- jquery -->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <!-- toastr -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/js/toastr.js"></script>

    <!-- core script  -->
    <script type="text/javascript">
        // consts 
        const btnInfo = document.getElementById('btnInfo');
        const btnSuccess = document.getElementById('btnSuccess');
        const btnError = document.getElementById('btnError');
        const btnWarning = document.getElementById('btnWarning');

        // Event Listeners
        btnInfo.addEventListener('click', displayInfoToaster);
        btnSuccess.addEventListener('click', displaySuccessToaster);
        btnError.addEventListener('click', displayErrorToaster);
        btnWarning.addEventListener('click', displayWarningToaster);

        // functions
        function displayInfoToaster() {
            toastr.options.timeOut = 1500; // 1.5s 
            toastr.info('info messages');
        }

        function displaySuccessToaster() {
            toastr.options.timeOut = 1500; // 1.5s 
            toastr.success('Success messages');
        }

        function displayErrorToaster() {
            toastr.options.timeOut = 1500; // 1.5s 
            toastr.error('errors messages');
        }

        function displayWarningToaster() {
            toastr.options.timeOut = 1500; // 1.5s 
            toastr.warning('warning messages');
        }
    </script>
</body>

</html>

How do I implement Toastr JS?

6 Answers6

Edits