¿Cómo utilizar los Toasts de materialize?

yoclens · 2022-08-02T22:09:54-0500

Hola 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 con como hago para mostrar las alertas.

Link de matrerialize: https://materializecss.com/toasts.html

Método para insertar


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


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


ya lo he intentado así, pero no me resulta. gracias de ante mano

$errMSG = "<script>M.toast({html: 'I am a toast!'})</script> ";

moiseseccam · 2022-08-02T22:40:45-0500

En que parte estas importando el módulo de Materialize?

yoclens · 2022-08-02T23:07:10-0500

moiseseccam dijo:
En que parte estas importando el módulo de Materialize?

todo el llamado esta bien fíjate que si lo pongo normal ósea agrego un botón en la pagina y hago el llamado del toasts me funciona perfectamente ahora no se si es porque estoy incluyendo java dentro de código php

moiseseccam · 2022-08-02T23:25:56-0500

yoclens dijo:
todo el llamado esta bien fíjate que si lo pongo normal ósea agrego un botón en la pagina y hago el llamado del toasts me funciona perfectamente ahora no se si es porque estoy incluyendo java dentro de código php

Lo que haces es una mala práctica, pero bueno, lo edité tal como esta.

PHP:

<html>

<head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>


    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>

    <?php


    $contador = 0; //Esta función devuelve el número de resultados que ha devuelto la SELECT
    if ($contador > 0) {

        $errMSG = "¡ Ups Aviso: El Registro ya se Encuentra Insertado !";
    } else {

        $successMSG = "¡ Bien Hecho: Registro Insertado Correctamente !";
    }

    ?>
    <!-- fin proceso para registrar-->



    <!-- mostrar mjs -->
    <?php
    if (isset($errMSG)) {
    ?>
        <script>
            var toastHTML = '<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>';
            M.toast({
                html: toastHTML
            });
        </script>
    <?php
    }
    if (isset($successMSG)) {
    ?>
        <script>
            var toastHTML = '<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>'
            M.toast({
                html: toastHTML
            });
        </script>

    <?php
    }
    ?>


</body>

</html>

Los mensajes salen así

yoclens · 2022-08-02T23:59:04-0500

moiseseccam dijo:

Lo que haces es una mala práctica, pero bueno, lo edité tal como esta.

PHP:

<html>

<head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>


    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>

    <?php


    $contador = 0; //Esta función devuelve el número de resultados que ha devuelto la SELECT
    if ($contador > 0) {

        $errMSG = "¡ Ups Aviso: El Registro ya se Encuentra Insertado !";
    } else {

        $successMSG = "¡ Bien Hecho: Registro Insertado Correctamente !";
    }

    ?>
    <!-- fin proceso para registrar-->



    <!-- mostrar mjs -->
    <?php
    if (isset($errMSG)) {
    ?>
        <script>
            var toastHTML = '<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>';
            M.toast({
                html: toastHTML
            });
        </script>
    <?php
    }
    if (isset($successMSG)) {
    ?>
        <script>
            var toastHTML = '<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>'
            M.toast({
                html: toastHTML
            });
        </script>

    <?php
    }
    ?>


</body>

</html>

Los mensajes salen así
Ver el archivo adjunto 811516

muchas gracias me sirve a la perfección.


<?php
if (isset($errMSG)) {
?>
<script>
var toastHTML = '<?php echo $errMSG; ?>';

M.toast({
html: toastHTML
});
</script>
<?php
} else if (isset($successMSG)) {
?>
<script>
var toastHTML = '<?php echo $successMSG; ?>';

M.toast({
html: toastHTML
});
</script>
<?php
}
?>


doy per terminado este tema

¿Cómo utilizar los Toasts de materialize?

yoclens

moiseseccam

yoclens

moiseseccam

yoclens

Temas similares