0

Buenas, alguien sabe como agregar una animación después de que envió datos a mi base de datos?

Encuentro varias animaciones, pero no se como usarlas con lo que estoy haciendo.

Quiero que después de presionar el botón submit y despues de que los datos se hallan ingresado, me muestre una pequeña animación indicándome que el registro se realizo correctamente, y luego desaparezca y se muestre la pagina del formulario.

Aqui encontre algunas animaciones

Alguien sabe como aplicarlo? Algún tutorial o algo? Agradeceria cualquier sugerencia.

Por ahí leí que podría usar AJAX, pero no encuentro mucho sobre ello y lo que encuentro no lo entiendo muy bien.

1
  • 1
    Hola Raphael, esta pregunta es demasiado amplia. Por favor, ayuda a reducir su amplitud añadiendo información adicional como por ejemplo cómo realizas el envío de la información y el código relevante a la pregunta (y lo que hayas intentado hacer)
    – Alvaro Montoro
    Commented el 16 jun. 2016 a las 8:47

4 respuestas 4

2

Suponiendo el fichero recibir_datos.php que se encarga de insertar en base de datos.

Un formulario sencillo:

<div id="form-container">
    <div class="loading-animation" style="display:none;">Animación aquí</div>
    <form action="recibir_datos.php" method="post">
         <input type="text" name="title">
         <input type="submit" value="Enviar">
    </form>   
</div>

El formulario, por si, hará una petición post contra el script php. Mediante código javascript no intrusivo, interceptaremos el evento de envío del formulario para crear el efecto deseado, usando principalmente la librería jQuery.

javascript:

jQuery(document).ready(function($){
    $('#form-container form').on('submit', function(e){

         e.preventDefault(); // Importante! detenemos el evento de envío

         // Ocultamos el formulario (opcional) y mostramos la animación
         $('#form-container form').hide(); // Opcional
         $('.loading-animation').show(); // Seleccionamos el elemento contenedor de la animación por el nombre de su clase.

         // Realizamos una petición post mediante ajax serializando el formulario.
         $.post(
             $('#form-container form').attr('action'), // Enviamos contra la acción del formulario.
             $('#form-container form').serializeArray(), // Serializamos como array el contenido del formulario.
             function (data, status, xhr){
                 // Aquí se muestra el mensaje de insercción correcta, restablaces el formulario o rediriges al usuario. Se ejecutará siempre que la petición POST devuelva un código de estado 2XX.
             }
         );

    });
});

Puedes echar un vistazo a jQuery.post y jQuery.serializeArray() para entender mejor como funciona. Te recomiendo también encarecidamente leer sobre selectores en jQuery, es vital para saber qué se hace en cada caso.

Hay otras muchas formas de hacer esto y todas correctas, pero la idea es básicamente esto.

Por último, es posible que el código contenga errores tipográficos o de sintaxis, que pueden ser fácilmente resueltos, te pido disculpas por ello, no puedo probarlo en este momento.

2
  • y cuando vuelves a ocultar el .loadin-animation... se te olvido me parece Commented el 16 jun. 2016 a las 11:03
  • @rnd No, ha sido intencionado, en el comentario se indica dónde se pueden hacer ese tipo de operaciones. Es más una cuestión de orientar que de dar las cosas hechas.
    – Muriano
    Commented el 16 jun. 2016 a las 11:42
2

Sin un poco más de información sobre la lógica del código me es difícil ayudarte pero supongamos que realizas la llamada a BD con la función en javascript SaveValues(). En ese caso:

function SaveValues() {
    document.getElementById('divAnimacion').style.display = "block";
    LLamadaACódigo(); //Esto es lo que ya tienes
    document.getElementById('divAnimacion').style.display = "none";
}

Y en el código html añades un div que contenga la animación:

<div id="divAnimacion">
    <img src="something.jpg" alt="" />        
</div>

Lo ideal sería hacerlo con AJAX que te permitíra tener más control sobre la sincronización de los datos.

0
2

Porque no pruebas a usar jquery validate, cuando se mande el formulario, comprueba la respuesta que te manda y mustras la animación, asi lo hice yo en un formulario que hice en una web. El enlace a la web para que te puedas descargar la libreria: https://jqueryvalidation.org Te indico un ejemplo:

    <form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>Please provide your name, email address (won't be published) and a comment</legend>
    <p>
      <label for="cname">Name (required, at least 2 characters)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (required)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (optional)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">Your comment (required)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>
<script>
$("#commentForm").validate(
  submitHandler: function() {
            alert("submitted!");//Aqui haces que se muestre la animación
            });
</script>
2

Te recomiendo que te muevas a Ajax y utilizes los eventos ajaxStart y ajaxComplete. Es la forma natural que viene con jQuery para hacer lo que estas intentando. Si usas formularios tipo submit, no podrás mostrar nada pues la pagina se recarga y se pierde la pagina del formulario.. Si tienes dudas sobre como reconvetir el formulario para usar Ajax mira este link.

Estos eventos son invocados por jQuery automáticamente al iniciarse , lo cual simplifica todo el código y queda mucho mas limpio.

$(document).ajaxStart(function() {
    $('#reloj').show();
}).ajaxComplete(function() {
    $('#reloj').hide();
});

De acuerdo al ejemplo deberías tener un <div> inicialmente oculto, donde insertar la animación, que se mostrara cuando hagas cualquier pedido al servidor y se ocultara automáticamente cuando termine la consulta (sea exitosa o no).

Este es CSS, cámbialo por la animación que elijas (respetando el Id o cambiando el script arriba por la clase correspondiente). No olvides agregarle display: none; para que esta oculto al iniciar.

#reloj {
   display: none;
   position: fixed;
   background: yellow;
} 

Agregar esto en el html

<div id="reloj">Cargando...</div>
4
  • Si usas formularios no podrás mostrar nada pues la pagina se recarga y se pierde la pagina del formulario. Quién dice eso? Hay formas de hacer envíos post de formularios con ajax sin perder la página actual.
    – Muriano
    Commented el 16 jun. 2016 a las 10:59
  • @Muriano, como ves antes dice "usa Ajax".. tu respuesta incluye "preventDefault() // detener el envió " lo cual prueba mi punto... Commented el 16 jun. 2016 a las 11:00
  • Tu ejemplo hace lo mismo, pero de otra manera. Intercepta el envío mediante el método .submit() y retorna false, que es, a fin de cuentas, lo mismo que usar e.preventDefault() así que dime, ¿qué punto es el que queda probado?
    – Muriano
    Commented el 16 jun. 2016 a las 11:46
  • @Muriano el punto que queda probado es que aclare que tenia que cambiarse a ajax y no argumentare mas. es una niñada ponerse a discutir por una respuesta. Saludos y suerte. Commented el 16 jun. 2016 a las 11:51

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.