javascript – Toast materialize

Question:

I'm trying to implement a toast (code below) however there is no result when clicking the button. I don't know what I could be doing wrong.

  <div class="row">
      <button id="btn" class="waves-effect waves-light btn-small"><i class="material-icons left">access_alarm</i>Enviar</button>
   <script>
   $("#btn").click(function() {

   Materialize.toast('Item Inserido com sucesso', 4000)
   });

   </script>
  </div><!-- Close row -->

Full page code

 <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <?!= include("page-css"); ?>

  </head> 
  <body>

  <div class="container">
  <img src="https://www.exemplo.jus.br/site/porta/files/r/controle/banner-controle.jpg" style="width:100%">
  <h1><?= title; ?></h1>

   <div class="row">
      <div class="input-field col s6">
         <select id="app">          
          <option disabled selected>Auditor Responsável</option>
          <?!= list; ?>
         </select>
        <label>Auditor</label>
      </div>  
      <div class="input-field col s6">
      <input id="prefDate" type="text" class="datepicker">
      <label for="prefDate" class="active">Prazo(se houver)</label>
    </div>

  <div class="row">
        <div class="input-field col s6">
          <input placeholder="Ex.:Achado 1.1. Falhas nas contratações de TI" id="fn" type="text" class="validate"> 
          <label for="fn">Achado</label>
        </div>
        <div class="input-field col s6">
          <input placeholder="Ex.: Discorda-se da conclusão de auditoria pelas razões: " id="ln" type="text" class="validate">
          <label for="ln">Manifestação do Auditado</label>
        </div>

        <div class="input-field col s6">
          <input id="zip" type="text" class="validate"> 
          <label for="zip">Conclusão de Auditoria</label>
        </div>
        <div class="input-field col s6">
          <input disabled id="est" type="text" class="validate">
          <label for="est" class="active">Estimativa</label> 
        </div>
  </div>  <!-- Close row -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Compiled and minified CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>


      <div class="row">
          <button id="btn" class="waves-effect waves-light btn-small"><i class="material-icons left">access_alarm</i>Enviar</button>
      </div><!-- Close row -->
       <script>
       $("#btn").click(function() {

       M.toast({html: 'oi'}, 4000);
       });

       </script>


 <!-- <div class="container"> -->

  <div class="row">
      <table class = "highlight responsive-table"> <div class="card-panel teal lighten-2"><span class="white-text"><h5>DADOS CADASTRADOS</h5></span>
        <thead>

          <tr>

              <th>ACHADO</th>
              <th>MANIFESTAÇÃO</th>
              <th>AUDITOR</th>
              <th>CONCLUSÃO AUDITORIA</th>
              <th>PRAZO</th>

          </tr>
        </thead>

        <tbody><script><? var data = getData(); ?></script> 
        <? for (var i = 1; i < 100; i++) { ?>
          <tr>
          <td><?= data[i][0] ?></td>
            <td><?= data[i][1] ?></td>
            <td><?= data[i][2] ?></td>
            <td><?= data[i][3] ?></td>
            <td><?= data[i][4] ?></td>
          </tr><?}?>
        </tbody>
      </table></div>
 </div>

      </div>  <!-- Close row -->

   <?!= include("page-js"); ?>

  </body>

</html>

Answer:

Two things to fix:

  • the .toast API expects an options object as the first argument, passes {html: 'Item Inserido com sucesso'} instead of just the string 'Item Inserido com sucesso'
  • the global variable that Materialize exposes is M and not Materialize
$("#btn").click(function() {
  M.toast({html: 'Item Inserido com sucesso'}, 4000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="row">
  <button id="btn" class="waves-effect waves-light btn-small">
  <i class="material-icons left">access_alarm</i>Enviar
  </button>
</div>
<!-- Close row -->
Post Views: 1
Scroll to Top