How to active a Toast without button

I work with material desing and i'm working on a form. I want when the form was send in the database display a pop-up with a toast.

Documentation: Toast Material Desing

I have try to create a fonction like this:

 <script>
        function test() {
            var notification = document.querySelector('.mdl-js-snackbar');
            console.log(notification);
            notification.MaterialSnackbar.showSnackbar(
                {
                    message: 'Image Uploaded'
                }
            );
        }

        test();
 </script>

and I have define my snackbar:

    <button id="demo-show-toast" class="mdl-button mdl-js-button mdl-button--raised " type="button" onclick="test()">Show Toast</button>
<div id="demo-toast-example" class="mdl-js-snackbar mdl-snackbar">
    <div class="mdl-snackbar__text"></div>
    <button class="mdl-snackbar__action" type="button" ></button>
</div>

I want display the toast on the loading of the page but i catch an error:

Uncaught TypeError: Cannot read property 'showSnackbar' of undefined
at test

But on the same time i can call the function with the console and it work perfectly.

How can i do for call the toast on the loading of the page and what i have missed? Thanks

Solution

the problem is material is not loaded when the function runs,

look this example:

<html>
<head>
  <!-- Material Design Lite -->
  <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  <!-- Material Design icon font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
  <button id="demo-show-snackbar" class="mdl-button mdl-js-button mdl-button--raised" type="button">Show Snackbar</button>
  <div id="demo-snackbar-example" class="mdl-js-snackbar mdl-snackbar">
    <div class="mdl-snackbar__text"></div>
    <button class="mdl-snackbar__action" type="button"></button>
  </div>
</body>
<script>
    r(function(){
        var notification = document.querySelector('.mdl-js-snackbar');
        notification.MaterialSnackbar.showSnackbar(
          {
            message: 'and..working!!'
          }
        );
    });

    function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}


</script>