28

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>
3
  • 3
    I hope you've started with the documentation May 14, 2013 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, 2013 at 18:11
  • You need to remove Command: before toastr
    – Marc
    Jan 12, 2016 at 20:13

6 Answers 6

70

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>
7
  • Thanks. But my question is how to use them in my html to show those messages. Thanks!
    – starbucks
    May 14, 2013 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! May 14, 2013 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, 2013 at 18:16
  • can you give me a sample using my code in the question? I will really appreciate it. thanks!
    – starbucks
    May 14, 2013 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, 2013 at 18:20
11

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>

8

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

5

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>
0

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");
2
  • 2
    Is it necessary to put the options in a function? Feb 5, 2019 at 6:15
  • 1
    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, 2019 at 5:45
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.