Foros del Web » Programando para Internet » PHP »

como utilizar los Toasts de materialize

Estas en el tema de como utilizar los Toasts de materialize en el foro de PHP en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/08/2017, 22:14
Avatar de aviweb2015  
Fecha de Ingreso: abril-2016
Ubicación: venezuela
Mensajes: 215
Antigüedad: 3 años, 2 meses
Puntos: 1
como utilizar los Toasts de materialize

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
  1. <!-- proceso para registrar-->
  2. <?php
  3. if(isset($_POST['guardar'])){
  4.  
  5.  
  6. $sql = "SELECT cuentas FROM cuentas WHERE cuentas = :cuentas LIMIT 1"; //Creamos la select
  7. $check = $DB_con->prepare($sql); //Preparamos la SELECT, de ésta manera evitamos SQL Injection
  8. $check->bindParam(':cuentas', $_POST['cuentas']);//Substituimos las variables de la SELECT
  9. $check->execute();//Ejecutamos la consulta
  10. $contador = $check -> rowCount();//Esta función devuelve el número de resultados que ha devuelto la SELECT
  11. if ($contador > 0) {
  12. $check->closeCursor();
  13.  
  14.           $errMSG = "¡ Ups Aviso: El Registro ya se Encuentra Insertado !";
  15.  
  16. }
  17. else
  18. {
  19.  
  20. $sql=$DB_con->prepare("INSERT INTO cuentas (cuentas) VALUES (:cuentas)");
  21. $sql->bindParam(':cuentas', $_POST['cuentas']);
  22. $sql->execute();
  23.  
  24.       $successMSG ="¡ Bien Hecho: Registro Insertado Correctamente !";
  25.  
  26.     }
  27.   }
  28. ?>


mostrar mjs

Código PHP:
Ver original
  1. <!-- mostrar mjs -->
  2. <?php
  3. if(isset($errMSG))
  4. {
  5.   ?>
  6.   <div id="element" class='col s5 card-panel blue lighten-2 right'>
  7.   <h6 class='black-text text-darken-2 center CONDENSED LIGHT5'>
  8.   <?php echo $errMSG; ?> <a href='#' class="black-text" id="hide">[X]</a>
  9.   </h6>
  10.   </div>
  11.   <?php
  12.  }
  13.  else if(isset($successMSG))
  14.  {
  15.    ?>
  16.    <div id="element" class='col s5 card-panel teal lighten-2 right'>
  17.    <h6 class='black-text text-darken-2 center CONDENSED LIGHT5'>
  18.    <?php echo $successMSG; ?> <a href='#' class="black-text" id="hide">[X]
  19.   </a>
  20.    </h6>
  21.    </div>
  22.   <?php
  23.   }
  24.  ?>
__________________
yoclens avilan
  #2 (permalink)  
Antiguo 15/08/2017, 06:56
 
Fecha de Ingreso: agosto-2011
Mensajes: 87
Antigüedad: 7 años, 10 meses
Puntos: 3
Respuesta: como utilizar los Toasts de materialize

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
__________________
No le pare bola a la vida, que la vida no le para bolas a uno!
  #3 (permalink)  
Antiguo 15/08/2017, 08:43
Avatar de aviweb2015  
Fecha de Ingreso: abril-2016
Ubicación: venezuela
Mensajes: 215
Antigüedad: 3 años, 2 meses
Puntos: 1
Respuesta: como utilizar los Toasts de materialize

Cita:
Iniciado por Camatagua123 Ver Mensaje
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
  1. $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)");
  2. $sql->bindParam(':cod_ticket', $_POST['cod_ticket']);
  3. $sql->bindParam(':monto', $_POST['monto']);
  4. $sql->bindParam(':porcentaje', $_POST['porcentaje']);
  5. $sql->bindParam(':ganancia', $_POST['ganancia']);
  6. $sql->bindParam(':total', $_POST['total']);
  7. $sql->bindParam(':id_puntos', $_POST['id_puntos']);
  8. $sql->bindParam(':fecha', $_POST['fecha']);
  9. $sql->bindParam(':hora', $_POST['hora']);
  10. $sql->bindParam(':id_usuarios', $_POST['id_usuarios']);
  11. $sql->execute();
  12.  
  13.      
  14. function success_toast($msj){
  15. $toastContent = '<div class="red-text text-darken-2"><strong>Sep</strong> '.$msj.'</div>';
  16. return '<script>Materialize.toast('.$toastContent .', 4000)</script>';
  17.  
  18. }
  19.  
  20.         }
  21.      }
  22.   }
  23.  
  24. ?>


Código PHP:
Ver original
  1. <!-- mjs -->
  2.  <?php
  3.     if(isset($errMSG))
  4.         {
  5.          echo error_toast($errMSG);
  6.         }
  7.          else if(isset($successMSG))
  8.         {
  9.          echo success_toast($successMSG);
  10.         }
  11.   ?>
  12. <!-- fin mjs -->
__________________
yoclens avilan
  #4 (permalink)  
Antiguo 15/08/2017, 10:01
 
Fecha de Ingreso: agosto-2011
Mensajes: 87
Antigüedad: 7 años, 10 meses
Puntos: 3
Respuesta: como utilizar los Toasts de materialize

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
__________________
No le pare bola a la vida, que la vida no le para bolas a uno!
  #5 (permalink)  
Antiguo 15/08/2017, 11:14
Avatar de aviweb2015  
Fecha de Ingreso: abril-2016
Ubicación: venezuela
Mensajes: 215
Antigüedad: 3 años, 2 meses
Puntos: 1
Respuesta: como utilizar los Toasts de materialize

Cita:
Iniciado por Camatagua123 Ver Mensaje
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
__________________
yoclens avilan
  #6 (permalink)  
Antiguo 15/08/2017, 11:36
 
Fecha de Ingreso: agosto-2011
Mensajes: 87
Antigüedad: 7 años, 10 meses
Puntos: 3
Respuesta: como utilizar los Toasts de materialize

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
__________________
No le pare bola a la vida, que la vida no le para bolas a uno!
  #7 (permalink)  
Antiguo 15/08/2017, 11:42
Avatar de aviweb2015  
Fecha de Ingreso: abril-2016
Ubicación: venezuela
Mensajes: 215
Antigüedad: 3 años, 2 meses
Puntos: 1
Respuesta: como utilizar los Toasts de materialize

Cita:
Iniciado por Camatagua123 Ver Mensaje
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
__________________
yoclens avilan
  #8 (permalink)  
Antiguo 15/08/2017, 12:41
 
Fecha de Ingreso: agosto-2011
Mensajes: 87
Antigüedad: 7 años, 10 meses
Puntos: 3
Respuesta: como utilizar los Toasts de materialize

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.
__________________
No le pare bola a la vida, que la vida no le para bolas a uno!
  #9 (permalink)  
Antiguo 16/08/2017, 10:44
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.371
Antigüedad: 11 años, 4 meses
Puntos: 1043
Respuesta: como utilizar los Toasts de materialize

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 original
  1. funcion confirm($request){
  2.   ... // TODAS LAS VALIDACIONES QUE NECESITES
  3. if(!empty($error){
  4.   return $error;// STRING CON EL MENSAJE DE ERROR
  5. }
  6. ... // CONTINUAR CON EL PROCESO DE GUARDADO
  7. }

Código Javascript:
Ver original
  1. function guardar(datos){
  2.   $.post('urlSave', function(responseSave){
  3.       Materialize.toast(responseSave, 4000) // 4000 is the duration of the toast
  4.   });
  5. }
  #10 (permalink)  
Antiguo 16/08/2017, 10:59
 
Fecha de Ingreso: agosto-2011
Mensajes: 87
Antigüedad: 7 años, 10 meses
Puntos: 3
Respuesta: como utilizar los Toasts de materialize

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)
__________________
No le pare bola a la vida, que la vida no le para bolas a uno!

Última edición por Camatagua123; 16/08/2017 a las 11:05
  #11 (permalink)  
Antiguo 15/12/2018, 04:19
Avatar de RjveraL  
Fecha de Ingreso: junio-2007
Mensajes: 4
Antigüedad: 12 años
Puntos: 0
Respuesta: como utilizar los Toasts de materialize

La idea es... digamos en PHP...
Código PHP:
Ver original
  1. <?php if(!empty($algunerroralenviardatos)): ?>
  2.     <!-- Hay que setear la variable toastHTML en algun punto -->
  3.     <span onload="M.toast({html: toastHTML});"></span>
  4. <? 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
  1. <body onload="M.toast({html: toastHTML, classes: 'rounded'});">
  2. <!-- La variable la cargo desde un script donde lo necesito... -->
  3.     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>';

He probado segun la doc...
Código HTML:
Ver original
  1.     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>';
  2.     M.toast({html: toastHTML});
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
  1. <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

Última edición por RjveraL; 15/12/2018 a las 05:51 Razón: Agregue las estructuras de código y Ejemplos
  #12 (permalink)  
Antiguo 15/12/2018, 10:52
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.371
Antigüedad: 11 años, 4 meses
Puntos: 1043
Respuesta: como utilizar los Toasts de materialize

@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.
  #13 (permalink)  
Antiguo 24/12/2018, 04:15
Avatar de RjveraL  
Fecha de Ingreso: junio-2007
Mensajes: 4
Antigüedad: 12 años
Puntos: 0
Respuesta: como utilizar los Toasts de materialize

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 Ver Mensaje
@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.

Última edición por RjveraL; 24/12/2018 a las 08:06 Razón: Agregué Link

Etiquetas: javascript
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:36.