How do I implement Toastr JS?
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>
Answer
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>