So aktivieren Sie einen Toast ohne Knopf

Ich arbeite mit Material Design und ich arbeite an einem Formular. Ich möchte, wenn das Formular in der Datenbank gesendet wurde, ein Pop-up mit einem Toast anzeigen.So aktivieren Sie einen Toast ohne Knopf

Dokumentation: Toast Material Desing

Ich habe versuchen, eine fonction wie diese zu erstellen:

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

     test(); 
</script>

und ich habe meine snackbar definieren:

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

Ich möchte auf der Lade den Toast anzuzeigen der Seite aber ich erhalte einen Fehler:

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

Aber zur gleichen Zeit kann ich die Funktion mit der Konsole aufrufen und es funktioniert perfekt.

Wie kann ich tun, um den Toast beim Laden der Seite anzurufen und was habe ich verpasst? Dank

Quelle

2017-08-15 Franckentien

Fand dieses [link] (https://github.com/ google/material-design-lite/issues/1995). Wenn Sie Material Design Lite v1.0.6 verwenden, ist SnackBar nicht in dieser Version. Anderes Problem könnte sein "Material ist noch nicht geladen oder an die Elemente gebunden. Wenn Sie Timeout setzen, dann wird es funktionieren." – ertdiddy

das Problem Material ist nicht geladen, wenn die Funktion ausgeführt wird,

Look dieses Beispiel:

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

Quelle

2017-08-15 21:28:31 Abiezer

So aktivieren Sie einen Toast ohne Knopf

Antwort

Verwandte Themen