Comment activer un Toast sans bouton

Je travaille avec desing et je travaille sur un formulaire. Je veux quand le formulaire a été envoyé dans la base de données afficher une pop-up avec un toast.Comment activer un Toast sans bouton

Documentation: Toast Material Desing

j'essayer de créer une fonction comme ceci:

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

     test(); 
</script>

et je définir mon snack:

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

Je veux afficher le pain grillé sur le chargement de la page mais j'attrape une erreur:

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

Mais en même temps, je peux appeler la fonction avec la console et cela fonctionne parfaitement.

Comment puis-je faire pour appeler le toast sur le chargement de la page et ce que j'ai manqué? Merci

Source

2017-08-15 Franckentien

trouvé ce [lien] (https://github.com/ google/material-design-lite/issues/1995). Si vous utilisez Material Design Lite v1.0.6, SnackBar n'est pas dans cette version. L'autre problème pourrait être "le matériel n'est pas encore chargé ou lié aux éléments.Si vous mettez le délai d'attente alors cela fonctionnera." – ertdiddy

le problème est matériel n'est pas chargé lorsque la fonction est exécutée,

regard cet exemple:

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

Source

2017-08-15 21:28:31 Abiezer

Comment activer un Toast sans bouton

Répondre

Questions connexes