[SOLUCIONADO] Problema con sweet alert

sergiodueso · #1 (**permalink**) 15/11/2017, 11:15

Buenas tardes, necesito saber como hacer para meter en un if un sweet alert. Este archivo php comprueba datos de un formulario con datos de una bd. Si son correctos,
(y aquí viene el if) que sweet alert saque un mensaje y si no son correctos, que saque un mensaje de error. Gracias

#2 (**permalink**) 15/11/2017, 11:52

No conocia sweet alert, está bueno, pero ve la documentación, pero muestra código no se que estás haciendo, estas usando js y/o ajax o derechamente con el resultado de php?

doc: https://limonte.github.io/sweetalert2/

xfxstudios · #3 (**permalink**) 15/11/2017, 12:06

para empezar debes colocar el fracmento de codigo para darte la respuesta, pero a simple vista se podria hacer algo asi

Código PHP:

Ver original<?php
 
if($condicion){
 
?>
 
<scritp>AQUI EL ALERT</script>
 
<?php }else{ ?>
 
<scritp>AQUI EL ALERT</script>
 
<?php } ?>

pero todo va a depender de como estes ejecutando la validacion y todo eso

Triby · #4 (**permalink**) 15/11/2017, 12:57

Lo que buscas no es solo con PHP, necesitas AJAX (Javascript + llamada asíncrona + PHP) para no recargar la página y que aparezca la alerta como ventana modal.

sergiodueso · #5 (**permalink**) 15/11/2017, 13:24

Y eso ¿cómo se hace? Gracias

xfxstudios · #6 (**permalink**) 15/11/2017, 13:57

algo asi:

Código Javascript:

Ver originalobj = {
    variable1:valor1,
    variable2:valor2
}
$.post('aquituphp.php',obj)
 
.done(function(resp){
    if(resp=="positivo"){
        //Aqui codigo del alert si es positiva la respuesta
    }else{
        //aqui codigo del alert si es negativa la respuesta
    }
})
.fail(function(err){
    //Aqui codigo si falla la peticion ajax
})

y en php lo usual

Código PHP:

Ver original$var = $_POST['variable1'];
 
if($var == 'loquesea'){
    echo "positivo";
}else{
    echo "negativo";
}

sergiodueso · #7 (**permalink**) 15/11/2017, 14:37

Gracias, lo probaré

sergiodueso · #8 (**permalink**) 15/11/2017, 14:50

Mañana os pondré el código que tengo para ver si entre todos lo podemos hacer. Gracias

sergiodueso · #9 (**permalink**) 15/11/2017, 14:54

Lo digo porque no controlo prácticamente nada de ajax y javascript y no sé cómo pasarle los campos del formulario al script que me habéis enviado. Gracias

haggenx · #10 (**permalink**) 15/11/2017, 20:22

Cita:

Iniciado por alvaro_trewhela

No conocia sweet alert, está bueno, pero ve la documentación, pero muestra código no se que estás haciendo, estas usando js y/o ajax o derechamente con el resultado de php?

doc: https://limonte.github.io/sweetalert2/

yo tampoco lo conocía, yo uso alertify.js http://fabien-d.github.io/alertify.js/ bajo licencia MIT, muy bueno

, gracias por compartirlo por cierto, saludos.

sergiodueso · #11 (**permalink**) 16/11/2017, 02:31

Buenos días, os pongo el código. El archivo es un php de un login enganchado con una bd.

<!doctype html>
<html lang="es">
<head>
<title>Acceso Administración</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">

<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../css/sweetalert.css" rel="stylesheet">
<style>
.cuerpo{background-color:#666;}
.container{margin-top:100px;}
.sombra{
text-shadow:#999 1px 2px;
text-align:center}
</style>
<script type="text/javascript">

function myFn(){
swal({
title: "Success",
text: "Thank you for contacting us. We will get back to you soon!",
type: "success"
},
function(){
//event to perform on click of ok button of sweetalert
});
}
</script>

</head>

<body class="cuerpo">

<div class="col‐md‐6">
<h1 class="sombra">Administración</h2>
</div>
<div class="container">
<form class="form-horizontal" action="" method="post">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Usuario</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="usuario" id="usuario" placeholder="Usuario" required>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Contraseña</label>
<div class="col-sm-6">
<input type="password" class="form-control" name="pass" id="pass" placeholder="Contraseña" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-6">
<button type="submit" class="btn btn-primary" name="btn_entrar">Entrar</button>
</div>
</div>
</form>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/sweetalert.min.js"></script>
</body>
</html>
<?php
session_start();
if (isset($_SESSION['usuario']))
{
echo " <script language='JavaScript'>
document.location=('prueba.php');
</script>";

}

?>
<?php
if (isset($_POST['btn_entrar']))
{
include ("../cafeteria_tonik_conexion.php");
$usuario = $_POST["usuario"];
$pass = $_POST["pass"];
$clave = sha1($pass);
//1.- Comprobar que el usuario existe
$sql = "SELECT * FROM usuario WHERE usuario = '".mysql_real_escape_string($usuario)."' AND pass = '".mysql_real_escape_string($clave)."'";
$result = mysql_query($sql, $cafeteria_tonik_conexion);
if( $fila=mysql_fetch_array($result) )
{
//El usuario y la contraseña es correcto
$_SESSION['usuario']=$_POST['usuario'];
$_SESSION['pass']=$_POST['pass'];
echo " <script language='JavaScript'>
alert('Bienvenido $usuario');
document.location=('prueba.php');
</script>";

}
else
{
//No existe ese usuario con esa contraseña
/*echo " <script language='JavaScript'>
alert('El usuario o la contraseña son incorrectos');
document.location=('index.html');
</script>";*/

echo '<script type="text/javascript">
myFn();
</script>';

}
}
?>
Este código funciona perfecto con alert. Me gustaría que funcionara con Sweet Alert. Gracias.

xfxstudios · #12 (**permalink**) 16/11/2017, 05:59

1.- El codigo php que inicia la sesion debe estar al principio de todo

Código PHP:

Ver original<?php 
session_start();
//resto de codigo

2.- estas trabajando con mysql y esa libreria esta depeciada, pasa a mysqli o PDO.

3.- no se cual es la finalidad de colocar el pass en una variable de sesion.

4.- no veo problema en la implementacion del sweet alert, solo debes seleccionar el codigo correcto y configurarlo un poco

Código Javascript:

Ver originalswal({
        title: 'INFO',
        text: "Se ha autenticado correctamente",
        type: 'success',
        showCancelButton: false,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Continuar'
    }).then(function () {
        window.location.href="paginadestino.php"
    })

xfxstudios · #13 (**permalink**) 16/11/2017, 06:12

por cierto tienes un arroz con mango en tu codigo, en este indicas una cosa y en el otro (duplicado) indicas otra como por ejemplo que trabajas con ajax, cosa que esta mal implementado y utilizado, pues si vas a utilizar ajax, no deves imprimir en el php los alert:

Código HTML:

Ver original<input type="text" name="usuario" id="usuario"/>
<input type="password" name="clave" id="clave"/>

Código Javascript:

Ver originalobj = {
    usuario:$("#usuario").val(),
    clave:$("#clave").val()
}
 
$.post('tuphpdestino.php',obj)
.done(function(resp){
    if(resp=="correcto"){
        swal({
            title: 'INFO',
            text: "Se ha autenticado correctamente",
            type: 'success',
            showCancelButton: false,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Continuar'
        }).then(function () {
            window.location.href="paginadestino.php"
        })
    }else{
        swal({
            title: 'Atención',
            text: "Los datos ingresados son incorrectos",
            type: 'warning',
            showCancelButton: false,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Intentar'
        }).then(function () {
            //No hago nada
        })
    }
 
})
.fail(function(err){
    //Codigo en caso de error de peticion ajax
})

y en php

Código PHP:

Ver originalsession_start();
 
//resto de includes
 
if(isset($_POST['control'])){
 
    $usuario = $_POST['usuario'];
    $clave = $_POST['clave'];
 
    $a = $db->query("SELECT * FROM tabla WHERE usuario = $usuario");
    $c = mysqli_num_rows($a);
    $row = $a->fetch_assoc();
 
    if($c >=1 && $row['clave']==$clave){
        //Creo las variables de sesion que necesite
 
        echo "correcto";//retorno la respuesta para ajax
        exit;
    }
 
}else{
    echo "Datos no Enviados";
    exit;
}

es algo así mas o menos, adapta a tu codigo

sergiodueso · #14 (**permalink**) 16/11/2017, 12:51

Buenas tardes. He puesto el código que me has mandado y no funciona. En primer lugar, cuando carga la página, sale el sweet alert de error. Luego, cuando es correcto, no redirige a la primera, tengo que volver a insertar los datos. y ademas, imprime a la parte izquierda el mensaje de los echo. Necesito vuestra ayuda. Gracias. Os pongo el código de nuevo. Si veo que es muy complicado para mí, volveré al alert de toda la vida. POR CIERTO, EL CÓDIGO ESTÁ EN UN ÚNICO ARCHIVO PHP.

Código PHP:

Ver original<?php
    session_start();
?>

Código HTML:

Ver original<!doctype html>
<html lang="es">
<head>
<title>Acceso Administración</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="../css/sweetalert.css" rel="stylesheet">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/sweetalert.min.js"></script>
    <style>
      .cuerpo{background-color:#666;}
      .container{margin-top:100px;}
      .sombra{
          text-shadow:#999 1px 2px;
          text-align:center}
    </style>

Código Javascript:

Ver original<script type="text/javascript">
        
    obj = {
    usuario:$("#usuario").val(),
    clave:$("#pass").val()
}
 
$.post('index1.php',obj)
.done(function(resp){
    if(resp=="correcto"){
        swal({
            title: 'INFO',
            text: "Se ha autenticado correctamente",
            type: 'success',
            showCancelButton: false,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Continuar'
        }).then(function () {
            window.location.href="prueba.php"
        })
    }else{
        swal({
            title: 'Atención',
            text: "Los datos ingresados son incorrectos",
            type: 'warning',
            showCancelButton: false,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Intentar'
        }).then(function () {
            //No hago nada
        })
    }
 
})
.fail(function(err){
    //Codigo en caso de error de peticion ajax
})
</script>

Código HTML:

Ver original</head>
 
<body class="cuerpo">
   
    <div class="col‐md‐6">
        <h1 class="sombra">Administración</h2>
    </div> 
    <div class="container">
        <form class="form-horizontal" action="index1.php" method="post" id="fomulario">
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-2 control-label">Usuario</label>
          <div class="col-sm-6">
            <input type="text" class="form-control" name="usuario" id="usuario" placeholder="Usuario" required>
          </div>
        </div>
        <div class="form-group">
          <label for="inputPassword3" class="col-sm-2 control-label">Contraseña</label>
          <div class="col-sm-6">
            <input type="password" class="form-control" name="pass" id="pass" placeholder="Contraseña" required>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-6">
            <button type="submit" class="btn btn-primary" name="btn_entrar">Entrar</button>
          </div>
        </div>
      </form>
    </div>
 
</body>
</html>

Código PHP:

Ver original<?php
if (isset($_SESSION['usuario']))
{
    echo "      <script language='JavaScript'> 
                document.location=('prueba.php'); 
                </script>";     
    
}
 
?>
<?php
if (isset($_POST['btn_entrar']))
{
  include ("../cafeteria_tonik_conexion.php");
  $usuario = $_POST["usuario"];
  $pass = $_POST["pass"];
  $clave = sha1($pass);
  //1.- Comprobar que el usuario existe
  $sql = "SELECT * FROM usuario WHERE usuario = '".mysql_real_escape_string($usuario)."' AND pass = '".mysql_real_escape_string($clave)."'";
  $result = mysql_query($sql, $cafeteria_tonik_conexion);
  $numero_filas = mysql_num_rows($result);
  if($numero_filas == 1)
  {
    // El usuario y la contraseña es correcto  
    $data = mysql_fetch_array($result);  
    $_SESSION['usuario']=$data['usuario'];
   
     /*echo "     <script language='JavaScript'> 
                alert('Bienvenido $usuario');
                document.location=('prueba.php'); 
                </script>";*/
    echo 'correcto'; 
    exit;
  }
  else
  {
    //No existe ese usuario con esa contraseña
    /*echo "      <script language='JavaScript'> 
                alert('El usuario o la contraseña son incorrectos');
                document.location=('index.html'); 
                </script>";*/
   
  
  
   echo "";
   exit;
  
 
  }
}
?>

xfxstudios · #15 (**permalink**) 16/11/2017, 18:04

pues claro, el asunto es que se esta ejecutando de unavez al abrir la pagina el ajax

Código Javascript:

Ver originalfunction peticion(){
//Aqui la funcion ajax
}

y en el boton de enviar, coloca un onClick="peticion()"

xfxstudios · #16 (**permalink**) 16/11/2017, 18:10

Aqui tu codigo completo con 2 medias variaciones:

Código HTML:

Ver original<?php
    session_start();
?>
<!doctype html>
<html lang="es">
<head>
<title>Acceso Administración</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="../css/sweetalert.css" rel="stylesheet">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/sweetalert.min.js"></script>
    <style>
      .cuerpo{background-color:#666;}
      .container{margin-top:100px;}
      .sombra{
          text-shadow:#999 1px 2px;
          text-align:center}
    </style>
 
<script type="text/javascript">
function validar(){        
        obj = {
        usuario:$("#usuario").val(),
        clave:$("#pass").val()
    }
    
    $.post('index1.php',obj)
    .done(function(resp){
        if(resp=="correcto"){
            swal({
                title: 'INFO',
                text: "Se ha autenticado correctamente",
                type: 'success',
                showCancelButton: false,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Continuar'
            }).then(function () {
                window.location.href="prueba.php"
            })
        }else{
            swal({
                title: 'Atención',
                text: "Los datos ingresados son incorrectos",
                type: 'warning',
                showCancelButton: false,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Intentar'
            }).then(function () {
                //No hago nada
            })
        }
    
    })
    .fail(function(err){
        //Codigo en caso de error de peticion ajax
    })
}
</script>
 
</head>
 
<body class="cuerpo">
   
    <div class="col‐md‐6">
        <h1 class="sombra">Administración</h2>
    </div> 
    <div class="container">
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-2 control-label">Usuario</label>
          <div class="col-sm-6">
            <input type="text" class="form-control" name="usuario" id="usuario" placeholder="Usuario" required>
          </div>
        </div>
        <div class="form-group">
          <label for="inputPassword3" class="col-sm-2 control-label">Contraseña</label>
          <div class="col-sm-6">
            <input type="password" class="form-control" name="pass" id="pass" placeholder="Contraseña" required>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-6">
            <button type="button" onClick="validar()" class="btn btn-primary" name="btn_entrar">Entrar</button>
          </div>
        </div>
    </div>
 
</body>
</html>

en el php sio no estas accediendo de manera directa no requiere impresion inicial

Código PHP:

Ver originalif (isset($_POST['btn_entrar']))
{
  include ("../cafeteria_tonik_conexion.php");
  $usuario = $_POST["usuario"];
  $pass = $_POST["pass"];
  $clave = sha1($pass);
  //1.- Comprobar que el usuario existe
  $sql = "SELECT * FROM usuario WHERE usuario = '".mysql_real_escape_string($usuario)."' AND pass = '".mysql_real_escape_string($clave)."'";
  $result = mysql_query($sql, $cafeteria_tonik_conexion);
  $numero_filas = mysql_num_rows($result);
  if($numero_filas == 1)
  {
    // El usuario y la contraseña es correcto  
    $data = mysql_fetch_array($result);  
    $_SESSION['usuario']=$data['usuario'];
    echo 'correcto'; 
    exit;
  }
  else
  {
   echo "incorrecto";
   exit;
  
 
  }
}

sergiodueso · #17 (**permalink**) 30/11/2017, 05:52

Gracias. Siento la demora al contestar. Lo probaré y os diré. Mil gracias de nuevo.