[SOLUCIONADO] Mostrar un mensaje en un span por unos 10 segundos

[MLDGATO]

Hola amigos, tengo un input en el cual tengo el evento OnBlur el cual me llama una función que por medio de ajax hace un update a mi tabla de la base de datos esto ya funciona bien pero quisiera que cuando se haga la actualización a mi base de datos se muestre un mensaje que indique que el cambio se hizo y que se muestre unos 10 segundos y luego se oculte, este es el código html de input:

Código HTML:

<input name="NombreEmpresa" type="text" required class="datosmenor" id="NombreEmpresa" onBlur="actualiza(<?php echo $idperfil; ?>, this.id, this.value)" value="<?php echo $fila['NombreEmpresa']; ?>">
 

Luego el Onblur llama a la función actualiza y le envía tres parámetros, aquí la función:

Código Javascript:

function actualiza(id, columna, valor)
{
    var actualizar;
    if(window.XMLHttpRequest)
    {
        actualizar = new XMLHttpRequest();
    }
    else
    {
        actualizar = new ActiveXObject("Microsoft.XMLHTTP");
    }
    actualizar.onreadystatechange=function()
    {
        if(actualizar.readyState==4 && actualizar.status==200)
        {
            
            document.getElementById("Mensaje").style.color = "White";
            document.getElementById("Mensaje").style.backgroundColor = "Green";
            document.getElementById("Mensaje").style.padding = "6px";
            document.getElementById("Mensaje").style.marginLeft = "250px";
            document.getElementById("Mensaje").style.borderRadius = "5px";
            document.getElementById("Mensaje").style.boxShadow = "1px 1px 5px Black";
            document.getElementById("Mensaje").innerHTML=actualizar.responseText;
        }
    }
    actualizar.open("GET","actualiza.php?puesto="+id+"&col="+columna+"&val="+valor,true);
    actualizar.send();
}
 

esta función llama al archivo actualiza.php que es el encargado de hacer el update:

Código PHP:

include("../Conexion/conexion.php");
    
    $id = mysqli_real_escape_string($conexion, $_GET['puesto']);
    $columna = mysqli_real_escape_string($conexion, $_GET['col']);
    $valor = mysqli_real_escape_string($conexion, $_GET['val']);
    
    $sql = "UPDATE PerfilPuesto SET $columna = '$valor' WHERE IdPuesto = '$id'";
    $consulta = mysqli_query($conexion, $sql) or die("Error al ejecutar la query: ".mysqli_error($conexion));
    
    if(mysqli_affected_rows($conexion) == 1)
    {
        echo "Registro Actualizado";
    }
    elseif(mysqli_affected_rows($conexion) == 0)
    {
        echo "";
    }
    elseif(mysqli_affected_rows($conexion) != 0 || mysqli_affected_rows($consulta) != 1)
    {
        echo "Se genero un error";
    }
 

Con lo que tengo se muestra el mensaje pero no se quita solo si actualizo la página, además si por equivocación hago clic en el input pero no cambio nada aparece un cuadrito con las propiedades css que le puse al span por medio de javascript

[Alexis88]

Para ocultar al <span> luego de transcurrido un determinado tiempo, puedes usar el método setTimeout, el cual ejecuta una función transcurrido un determinado tiempo dado en milésimas de segundo.

Código Javascript:

setTimeout(function(){
    document.getElementById("Mensaje").style.display = "none";
}, 10000);
 

Con respecto a lo otro, creo que tendrías un mayor control si la función se ejecutara al pulsar alguna tecla mientras el campo tenga el enfoque, por ejemplo, la tecla ENTER. También podrías colocar un mensaje de confirmación para proceder con la ejecución de la función, usando para ello el método confirm.

Saludos

[MLDGATO]

Iniciado por Alexis88

Para ocultar al <span> luego de transcurrido un determinado tiempo, puedes usar el método setTimeout, el cual ejecuta una función transcurrido un determinado tiempo dado en milésimas de segundo.

Código Javascript:

setTimeout(function(){
    document.getElementById("Mensaje").style.display = "none";
}, 10000);
 

Con respecto a lo otro, creo que tendrías un mayor control si la función se ejecutara al pulsar alguna tecla mientras el campo tenga el enfoque, por ejemplo, la tecla ENTER. También podrías colocar un mensaje de confirmación para proceder con la ejecución de la función, usando para ello el método confirm.

Saludos

Gracias por la ayuda pero la verdad no entiendo bien lo que me dices en el caso de colocar el setimeuot no funciona no se si lo coloque bien lo puse así:

Código Javascript:

function actualiza(id, columna, valor)
{
    var actualizar;
    if(window.XMLHttpRequest)
    {
        actualizar = new XMLHttpRequest();
    }
    else
    {
        actualizar = new ActiveXObject("Microsoft.XMLHTTP");
    }
    actualizar.onreadystatechange=function()
    {
        if(actualizar.readyState==4 && actualizar.status==200)
        {
            
            document.getElementById("Mensaje").style.color = "White";
            document.getElementById("Mensaje").style.backgroundColor = "Green";
            document.getElementById("Mensaje").style.padding = "6px";
            document.getElementById("Mensaje").style.marginLeft = "250px";
            document.getElementById("Mensaje").style.borderRadius = "5px";
            document.getElementById("Mensaje").style.boxShadow = "1px 1px 5px Black";
            document.getElementById("Mensaje").innerHTML=actualizar.responseText;
            setTimeout(function()
            {
                document.getElementById("Mensaje").style.display = "none";
            }, 10000);
        }
    }
    actualizar.open("GET","actualiza.php?puesto="+id+"&col="+columna+"&val="+valor,true);
    actualizar.send();
}
 

ahora lo de conforn no lo se pero voy a investigar esta afunción muchas gracias.

[Alexis88]

¿No se llega a ocultar el elemento? Qué extraño. Prueba colocando esto en la función y fíjate en la consola (en Chrome, pulsa F12 y luego selecciona 'Console').

Código Javascript:

setTimeout(function(){
    document.getElementById("Mensaje").style.display = "none";
    console.log(document.getElementById("Mensaje").style.display);
}, 10000);
 

Saludos

[MLDGATO]

Muchas gracias ya funcionó pero 10 segundos es mucho tiempo asi que lo deje en 3 segundos.