How do I implement Toastr JS?
Matthew Harrington 
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=""></script>
<script src=""></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>6 Answers
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; // 3sSee 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>You dont need jquery-migrate. Summarizing previous answers, here is a working html:
<html> <body> <a id='linkButton'>ClickMe</a> <script src=""></script> <link href="" rel="stylesheet"/> <script src=""></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>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=""></script>
<script src=""></script>
<link href="" rel="stylesheet"/>
<script src=""></script>Then it will work fine
This is a simple way to do it!
<link href="" rel="stylesheet"/>
<script src=""></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>Add CDN Files of toastr.css and toastr.js
<link href="" rel="stylesheet"/>
<script src=""></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");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="" rel="stylesheet" />
</head>
<body> <button>Info</button> <button>Success</button> <button>Error</button> <button>Warning</button> <!-- jquery --> <script src=""></script> <!-- toastr --> <script src=""></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>
