ボタンなしでトーストを有効にする方法

私はマテリアルデザイナーで作業しています。私はフォームで作業しています。フォームがデータベースに送信されたときに、トースト付きのポップアップが表示されます。ボタンなしでトーストを有効にする方法

私はこのようなfonctionを作成しようとしている：

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

     test(); 
</script>

と私は私のスナックバーを定義しています

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

私は負荷にトーストを表示したいです私はエラーをキャッチします：

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

しかし同時に私はコンソールで関数を呼び出すことができ、それは完全に動作します。

私はページの読み込み時にトーストに電話するために、どうすればよいですか？おかげ

出典

2017-08-15 Franckentien

（https://github.com/ google/material-design-lite/issues/1995）。 Material Design Lite v1.0.6を使用している場合、SnackBarはそのバージョンにはありません。他の問題は、「材料がまだロードされていないか、要素にバインドされていない可能性があります。タイムアウトを設定すると動作します。 – ertdiddy

問題は、材料の機能を実行すると、ロードされていない

見て、この例です。この[リンク]を見つけ

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

出典

2017-08-15 21:28:31 Abiezer

ボタンなしでトーストを有効にする方法

答えて

関連する問題