Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Mensaje de exito al procesar datos

Estas en el tema de Mensaje de exito al procesar datos en el foro de Jquery en Foros del Web. Hola chicos que tal, queria saber si hay una manera de hacer que un link que envia datos de la pagina 1 a la pagina ...
  #1 (permalink)  
Antiguo 05/01/2016, 18:16
 
Fecha de Ingreso: julio-2015
Ubicación: Lima
Mensajes: 23
Antigüedad: 6 años, 9 meses
Puntos: 0
Mensaje de exito al procesar datos

Hola chicos que tal, queria saber si hay una manera de hacer que un link que envia datos de la pagina 1 a la pagina 2 me muestre un mensaje de "envio exitoso" en la misma pagina.

Osea que el mensaje solo debe aparecer en la pagina 1, que al darle click al link, me muestre el mensaje "envio exitoso" y que por detras se envie los datos sin que se vean claro.
No se si me entendieron pero por ahi es la cosa jaja.

No estoy pidiendo codigo ni nada pero si me pueden ayudar aunque sea diciendome si se hace en ajax o con javascript o como el nombre de ese efecto me seria de gran ayuda.
Gracias
  #2 (permalink)  
Antiguo 05/01/2016, 19:28
 
Fecha de Ingreso: octubre-2010
Ubicación: España
Mensajes: 1.007
Antigüedad: 11 años, 7 meses
Puntos: 123
Respuesta: Mensaje de exito al procesar datos

La solución es ajax.
  #3 (permalink)  
Antiguo 05/01/2016, 19:56
 
Fecha de Ingreso: diciembre-2015
Mensajes: 529
Antigüedad: 6 años, 4 meses
Puntos: 39
Respuesta: Mensaje de exito al procesar datos

Con ajax. En la funcion ajax existe algo conocido como "success", aquí puedes incluir lo que quieres mostrar después de que la petición haya sido completada :)
  #4 (permalink)  
Antiguo 06/01/2016, 09:28
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.539
Antigüedad: 10 años, 6 meses
Puntos: 970
Respuesta: Mensaje de exito al procesar datos

Una petición asíncrona (AJAX) es lo único que necesitas.

Código Javascript:
Ver original
  1. document.addEventListener("DOMContentLoaded", function(){ //DOM cargado
  2.     document.querySelector("#id del enlace").addEventListener("click", function(event){
  3.         event.preventDefault();
  4.         var ajax = new XMLHttpRequest();
  5.         ajax.open("GET", this.href, true);
  6.         ajax.send();
  7.         ajax.addEventListener("load", function(){
  8.             if (this.status == 200){
  9.                 alert("Envío exitoso");
  10.             }
  11.         }, false);
  12.     }, false);
  13. }, false);

Como la acción natural de un enlace es la de redirigir luego de darle un clic, tienes que cancelar el evento utilizando el método .preventDefault(); luego, instancias al objeto XMLHttpRequest para realizar la petición, pasándole a su método .open() el método de envío que en este caso será GET pues es el que utilizan los enlaces, la ruta de destino que debe contener el dato a enviar mediante una cadena de consulta, algo como destino.php?variable=valor y el parámetro true para indicar que será una petición asíncrona. Si la ruta de destino no contiene al dato a enviar, tendrás que hacerlo mediante el método .send() de la forma ajax.send("variable=valor"), pero si la ruta de destino contiene al dato a enviar, no será necesario que le asignes un argumento al método, quedando tal y como aparece en el código de ejemplo.

Finalmente, cuando se complete la petición (evento load), necesitas verificar si el estado de la respuesta de la petición fue exitoso, algo que se comprueba cuando la propiedad status del objeto XMLHttpRequest posee el código 200. Si esta condición se cumple, sabremos que la petición finalizó de forma exitosa y procedemos a mostrar el respectivo mensaje al usuario.

Un saludo
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #5 (permalink)  
Antiguo 06/01/2016, 10:37
 
Fecha de Ingreso: julio-2015
Ubicación: Lima
Mensajes: 23
Antigüedad: 6 años, 9 meses
Puntos: 0
Respuesta: Mensaje de exito al procesar datos

Gracias alexis88 no sabia de esa petición asíncrona, funciona de maravillas. Una consulta, hay algun framework o algo para modificar ese alert. osea cambiarlo por un div al centro de la pagina o simplemente ponerle color al alert.
Gracias
  #6 (permalink)  
Antiguo 06/01/2016, 13:01
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.539
Antigüedad: 10 años, 6 meses
Puntos: 970
Respuesta: Mensaje de exito al procesar datos

En lugar del mensaje de alerta, utiliza un <div> que centrarás con CSS y le asignarás la respuesta de la petición como contenido. Puedes usar un segundo <div> como fondo para darle una mejor presentación. Los <div> estarían inicialmente ocultos y cuando recibas la respuesta, los haces visibles y le asignas la respuesta al <div> que irá al frente.

Un saludo
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Etiquetas: exito, mensaje, procesar
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 15:03.