Toast materialize

Asked

Viewed 1,351 times

4

I am trying to implement a Toast (code below), however, there is no result when clicking the button. I don’t know what I might 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 -->

Complete code of the page

 <!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" rel="stylesheet">
     <link rel="stylesheet" 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 rel="stylesheet" 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>
javascript materialize

1 answer

5


Two things to fix:

  • to API of .toast expects an object of oppositions as a 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 rel="stylesheet" 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 -->

  • I don’t know why, but in the code of my application it doesn’t. I saw that executed here, and the code is identical, but when I update the page, nothing happens. I edited the post and inserted the full code of the page. Thank you if you can help.

  • 1

    Opa, I managed to solve by inserting the code snippets you posted in the second code (I edited the question). Thanks.

Browser other questions tagged javascript materialize

You are not signed in. Login or sign up in order to post.