como utilizar los Toasts de materialize

aviweb2015 · #1 (**permalink**) 14/08/2017, 22:14

saludos amigos actualmente quisiera cambiar el modelo de como mostrar mis mjs de alertas para cuando hago un insert, delete y update. quisiera cambiar estas alertas por los Toasts de materialize. anexo el código como hago para mostrar las alertas. link de matrerialize http://materializecss.com/dialogs.html

metodo para insertar

Código PHP:

Ver original<!-- proceso para registrar-->
<?php
if(isset($_POST['guardar'])){
 
 
$sql = "SELECT cuentas FROM cuentas WHERE cuentas = :cuentas LIMIT 1"; //Creamos la select
$check = $DB_con->prepare($sql); //Preparamos la SELECT, de ésta manera evitamos SQL Injection
$check->bindParam(':cuentas', $_POST['cuentas']);//Substituimos las variables de la SELECT
$check->execute();//Ejecutamos la consulta
$contador = $check -> rowCount();//Esta función devuelve el número de resultados que ha devuelto la SELECT
if ($contador > 0) {
$check->closeCursor();
 
          $errMSG = "¡ Ups Aviso: El Registro ya se Encuentra Insertado !";
 
}
else
{
 
$sql=$DB_con->prepare("INSERT INTO cuentas (cuentas) VALUES (:cuentas)");
$sql->bindParam(':cuentas', $_POST['cuentas']);
$sql->execute();
 
      $successMSG ="¡ Bien Hecho: Registro Insertado Correctamente !";
 
    }
  }
?>

mostrar mjs

Código PHP:

Ver original<!-- mostrar mjs -->
<?php
if(isset($errMSG))
{
  ?>
  <div id="element" class='col s5 card-panel blue lighten-2 right'>
  <h6 class='black-text text-darken-2 center CONDENSED LIGHT5'>
  <?php echo $errMSG; ?> <a href='#' class="black-text" id="hide">[X]</a>
  </h6>
  </div>
  <?php
 }
 else if(isset($successMSG))
 {
   ?>
   <div id="element" class='col s5 card-panel teal lighten-2 right'>
   <h6 class='black-text text-darken-2 center CONDENSED LIGHT5'>
   <?php echo $successMSG; ?> <a href='#' class="black-text" id="hide">[X]
  </a>
   </h6>
   </div>
  <?php
  }
 ?>

Camatagua123 · #2 (**permalink**) 15/08/2017, 06:56

porque no creas una funcion helper en php con toast personalizados como por ejemplo

Código PHP:

  function error_toast($msj){ 
 
$toastContent = '<div class="red-text text-darken-2"><strong>Error</strong> '.$msj.'</div>'; 
 
return '<script>Materialize.toast('.$toastContent .', 4000)</script>'; 
 
}

y para llamarlo haces esto

Código PHP:

 
   <!-- mostrar mjs --> 
    <?php 
    if(isset($errMSG)) 
    { 
       echo error_toast($errMSG); 
     } 
     else if(isset($successMSG)) 
     { 
         echo success_toast($successMSG); 
      } 
       ?>

ps a mi parecer creo que es mas facil de mantener y se ve mas estetico

aviweb2015 · #3 (**permalink**) 15/08/2017, 08:43

Cita:

Iniciado por Camatagua123

porque no creas una funcion helper en php con toast personalizados como por ejemplo

Código PHP:

  function error_toast($msj){ 
 
$toastContent = '<div class="red-text text-darken-2"><strong>Error</strong> '.$msj.'</div>'; 
 
return '<script>Materialize.toast('.$toastContent .', 4000)</script>'; 
 
}

y para llamarlo haces esto

Código PHP:

 
   <!-- mostrar mjs --> 
    <?php 
    if(isset($errMSG)) 
    { 
       echo error_toast($errMSG); 
     } 
     else if(isset($successMSG)) 
     { 
         echo success_toast($successMSG); 
      } 
       ?>

ps a mi parecer creo que es mas facil de mantener y se ve mas estetico

he realizado lo que dices pero no me funciona

Código PHP:

Ver original$sql=$DB_con->prepare("INSERT INTO adelantos (cod_ticket,monto,porcentaje,ganancia,total,id_puntos,fecha,hora,id_usuarios) VALUES (:cod_ticket,:monto,:porcentaje,:ganancia,:total,:id_puntos,:fecha,:hora,:id_usuarios)");
$sql->bindParam(':cod_ticket', $_POST['cod_ticket']);
$sql->bindParam(':monto', $_POST['monto']);
$sql->bindParam(':porcentaje', $_POST['porcentaje']);
$sql->bindParam(':ganancia', $_POST['ganancia']);
$sql->bindParam(':total', $_POST['total']);
$sql->bindParam(':id_puntos', $_POST['id_puntos']);
$sql->bindParam(':fecha', $_POST['fecha']);
$sql->bindParam(':hora', $_POST['hora']);
$sql->bindParam(':id_usuarios', $_POST['id_usuarios']);
$sql->execute();
 
      
function success_toast($msj){ 
$toastContent = '<div class="red-text text-darken-2"><strong>Sep</strong> '.$msj.'</div>'; 
return '<script>Materialize.toast('.$toastContent .', 4000)</script>'; 
 
} 
 
        }
     }
  }
  
?>

Código PHP:

Ver original<!-- mjs -->
 <?php 
    if(isset($errMSG)) 
        { 
         echo error_toast($errMSG); 
        } 
         else if(isset($successMSG)) 
        { 
         echo success_toast($successMSG); 
        } 
  ?>
<!-- fin mjs -->

Camatagua123 · #4 (**permalink**) 15/08/2017, 10:01

por lo que veo estas declarando la funcion dentro de otra funcion... a ver si me explico un poco mejor.

Helper son funciones que pueden ayudarte en alguna tarea sencilla y mayormente comunes. Solo debes importar el archivo helper que quieres usar.

Crea un archivo alerta_helper.php

creas dentro del fichero la funcion success_toast

Código PHP:

  function success_toast($msj){  //En caso de mensaje positivo
$toastContent = '<div class="red-text text-darken-2"><strong>Sep</strong> '.$msj.'</div>'; 
return '<script>Materialize.toast('.$toastContent .', 4000)</script>'; 
 
}

en el archivo donde lo quieres usar solo haz el include

Código PHP:

 
 <?php 
include_once "alerta_helper.php"; //cargo el archivo helper
    if(isset($errMSG)) 
        { 
         echo error_toast($errMSG); 
        } 
         else if(isset($successMSG)) 
        { 
         echo success_toast($successMSG);  //llamo a la funcion de msj positivo del helper
        } 
  ?>

cualquier vaina avisa pero con el error o lo que te salga jajaja

aviweb2015 · #5 (**permalink**) 15/08/2017, 11:14

Cita:

Iniciado por Camatagua123

por lo que veo estas declarando la funcion dentro de otra funcion... a ver si me explico un poco mejor.

Helper son funciones que pueden ayudarte en alguna tarea sencilla y mayormente comunes. Solo debes importar el archivo helper que quieres usar.

Crea un archivo alerta_helper.php

creas dentro del fichero la funcion success_toast

Código PHP:

  function success_toast($msj){  //En caso de mensaje positivo 
$toastContent = '<div class="red-text text-darken-2"><strong>Sep</strong> '.$msj.'</div>';  
return '<script>Materialize.toast('.$toastContent .', 4000)</script>';  
  
}

en el archivo donde lo quieres usar solo haz el include

Código PHP:

 
 <?php  
include_once "alerta_helper.php"; //cargo el archivo helper 
    if(isset($errMSG))  
        {  
         echo error_toast($errMSG);  
        }  
         else if(isset($successMSG))  
        {  
         echo success_toast($successMSG);  //llamo a la funcion de msj positivo del helper 
        }  
  ?>

cualquier vaina avisa pero con el error o lo que te salga jajaja

lo acabo de hacer amigo pero a lo que me refiero es que no se me muestra nada de la alerta

Camatagua123 · #6 (**permalink**) 15/08/2017, 11:36

No conozco muy bien Materialize, pero creo que es porque TOAST no acepta ser instanciado por javascript directamente, el Modal si puede ser instanciado por javasript directamente de la siguiente forma:

Código HTML:

 <!-- Modal Structure -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
  </div>

para abrir el Modal

Código:

  $('#modal1').modal('open');

para cerrar el modal

Código:

  $('#modal1').modal('close');

seria cosa de que pruebes con modal a ver si te gusta asi :V

aviweb2015 · #7 (**permalink**) 15/08/2017, 11:42

Cita:

Iniciado por Camatagua123

No conozco muy bien Materialize, pero creo que es porque TOAST no acepta ser instanciado por javascript directamente, el Modal si puede ser instanciado por javasript directamente de la siguiente forma:

Código HTML:

 <!-- Modal Structure -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
  </div>

para abrir el Modal

Código:

  $('#modal1').modal('open');

para cerrar el modal

Código:

  $('#modal1').modal('close');

seria cosa de que pruebes con modal a ver si te gusta asi :V

si asi se como hacerlo pero lo que quiero mostrarlo es con los toast, esa es la logica que quiero aplicar xd

Camatagua123 · #8 (**permalink**) 15/08/2017, 12:41

la unica forma que veo es estudiando la clase Toast, para ver como trabaja y cual metodo es el que se usa para agregar Toast :/ quisiera ayudarte pero actualmente estoy montado en unos proyectos y no tengo mucho tiempo, pero me imagino que debe ser algo asi

Código:

return new Toast(message, displayLength, className, completeCallback);

Cita:

por cierto, me queda cierta curiosidad de conocer ese framework a fondo.

ArturoGallegos · #9 (**permalink**) 16/08/2017, 10:44

No tiene nada que ver con toast, es la forma en que insertas el código, así mismo tu problema no es directamente con PHP que te parece si muestras tu código javascript que invoca estas alertas?

Mira yo lo haría o me lo imagino así.

Código PHP:

Ver originalfuncion confirm($request){
  ... // TODAS LAS VALIDACIONES QUE NECESITES
if(!empty($error){
  return $error;// STRING CON EL MENSAJE DE ERROR
}
... // CONTINUAR CON EL PROCESO DE GUARDADO
}

Código Javascript:

Ver originalfunction guardar(datos){
  $.post('urlSave', function(responseSave){
      Materialize.toast(responseSave, 4000) // 4000 is the duration of the toast
  });
}

Camatagua123 · #10 (**permalink**) 16/08/2017, 10:59

Arturo, me imagino que lo posteo aqui, en PHP, porque quiere mandar de una vez la función, porque se registre o no, los datos, siempre ira redireccionado a esa pagina.

y ps la cuestion está en que el metodo toast no puede ser invocado sino por eventos como el click y esas cosas... me imagino que tendra que simular un click o cualquier otro evento con javascript para que muestre el msj.(SUPONGO)

RjveraL · #11 (**permalink**) 15/12/2018, 05:19

La idea es... digamos en PHP...

Código PHP:

Ver original<?php if(!empty($algunerroralenviardatos)): ?>
    <!-- Hay que setear la variable toastHTML en algun punto -->
    <span onload="M.toast({html: toastHTML});"></span>
<? endif; ?>

Cuando se retorna desde algún enviar datos...

La única forma que me ha resultado es poniendo en el BODY el atributo OnLoad, y la magia es que lo puedes modificar con PHP...:

Código HTML:

Ver original<body onload="M.toast({html: toastHTML, classes: 'rounded'});">
<!-- La variable la cargo desde un script donde lo necesito... -->
<script>
    var toastHTML = '<i class="material-icons red-text medium left">info</i><span>Hubo un ERROR.</span><button class="btn-flat toast-action">Entiendo</button>';
</script>

He probado segun la doc...

Código HTML:

Ver original<script>
    var toastHTML = '<i class="material-icons red-text medium left">info</i><span>Hubo un ERROR.</span><button class="btn-flat toast-action">Entiendo</button>';
    M.toast({html: toastHTML});
</script>

No me funciono....

Lo siguiente, yo sé que esta mal semanticamente hablando, pero así también me funcionó... Esta línea la puse donde quería que apareciera la Alerta... puedes sacar ideas y mejorarlas

Código HTML:

Ver original<body onload="M.toast({html: toastHTML, classes: 'rounded'});"></body>

Ejemplos de TOAST (Extraidos desde páginas WEB, modificados, comentados y o traducidos)

[URL="https://codepen.io/RjveraL/pen/qLZRQg"]https://codepen.io/RjveraL/pen/qLZRQg [/URL] ---> De este lo que te atraiga más posiblemente sea el CallBack
[URL="https://codepen.io/RjveraL/pen/yGOgLJ"]https://codepen.io/RjveraL/pen/yGOgLJ[/URL] ---> De este lo interesantes el que cambia los colores del Toast

En que forma dejaste tu sistema... finalmente usaste Toast o diseñaste otra forma... querrías compartir tu experiencia.

Gracias

ArturoGallegos · #12 (**permalink**) 15/12/2018, 11:52

@RjveraL favor de no revivir temas viejos, si se fija en la fecha del post original tiene mas de un año, cuando le aparezca la advertencia en rojo de que es un tema viejo mejor ya no responder.

RjveraL · #13 (**permalink**) 24/12/2018, 05:15

Disculta, mi intensión no fue revivir temas muertos, pero estoy con dilemas similars y como el post no tiene respuesta final... como el usuario que lo originó lo resolvio finalmente, quise postear y como dice al final pedir COMO resolvio su idea,

Por ejemplo: Aquí me ha funcionado como deseaba... le envió parámetros y listo... deje una muestra Uds. pueden jugar y hacer más cosas:
https://codepen.io/RjveraL/pen/YdVgxy

Tengas una buena navidad, gracias

Cita:

Iniciado por ArturoGallegos

@RjveraL favor de no revivir temas viejos, si se fija en la fecha del post original tiene mas de un año, cuando le aparezca la advertencia en rojo de que es un tema viejo mejor ya no responder.