CODEWITHSUNDEEP
javascripthtmltoastr
lordterrin
lordterrin

Reputation: 171

How do I use toastr?

I like the idea of what I can do with toastr, but I can't seem to get it to work.

From the official page...

(1) Link to toastr.css
(2) Link to toastr.js
(3) Use toastr to display a toast for info, success, warning or error
To install toastr, run the following command in the Package Manager Console
Install-Package toastr

I downloaded the command-line version of NuGet and typed in install toastr and it successfully installed, (although I have no idea what it actually did.......) then, in my page, test.php, I have the following code:

<html>
<head>
<link rel="stylesheet" href="/toastr.css">
<script type="text/javascript" src="/toastr.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>

<body>
toastr.info('Hey - it works!');
</body>

The website itself says this is incredibly simple....

// Display an info toast with no title

toastr.info('Are you the 6 fingered man?')

but when I execute the page, all I see is literally:

toastr.info('Hey - it works!');

What am I doing wrong?

Upvotes: 0

Views: 10980

Answers (1)

Felipe Oriani
Felipe Oriani

Reputation: 38638

You could just add your script tag before your close body tag, and also, use it in a valida javascript scope.

.. all html page

<script>

    $(document).ready(function() {

        // show when page load
        toastr.info('Hey - it works!');

    });

</script>

</body>
</html>

You also have other methods, 

// 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');

Upvotes: 2

Related Questions