Animacion mientras envía formulario

garcia2013 · #1 (**permalink**) 24/02/2013, 00:28

Hola! Espero puedan ayudarme, tengo el siguiente codigo en jsp:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/JavaScript" src="js/jquery-1.7.js"></script>
<script type="text/JavaScript">
$(document).ready(function(){
$("span#numeroPalabras").text("Número de palabras: ");

$("#send").click(function(){
var texto = $("#texto").val();
$.ajax({
type: "POST",
url: "cuenta.jsp",
data: "texto=" + texto,
success: function(msg){
$("span#resultado").text(msg);
},
error: function(xml, msg){
$("span#resultado").text("Error");
}
});
});
});
</script>

<title>JSP y JQuery</title>

<script>
window.onload = detectarCarga;
function detectarCarga(){
document.getElementById("carga").style.display="no ne";
}
</script>
<script>
function carga() {
setTimeout("document.getElementById('carga').style . display = 'none'", 10000);}
window.onload = carga;
</script>

</head>
<body>

<div id="carga">
<img src="images/cargando.gif" />
</div>

<p> <span id="numeroPalabras"></span>
<span id="resultado"></span>
</p>
<div>
<label> Introduce el texto: </label>
<br> <br>
<textarea id="texto" cols="40" rows="7"></textarea>
<br> <br>
<input id="send" type="button" value="Enviar" click="detectarCarga()"/>

</body>

</html>

Al ejecutarlo me genera la imagen de cargando arriba del formulario, la imagen dura el tiempo establecido (10000 milisegundos), pero lo que necesito es que la imagen aparezca cuando se le da click al boton enviar, y se espere el tiempo asignado antes de procesar la informacion.

Gracias!

rottenp4nx · #2 (**permalink**) 24/02/2013, 09:01

Primero al div carga colocale la propiedad css display en none, como default, para que funcione el siguiente código

Código Javascript:

Ver original$("#send").click(function(){
var texto = $("#texto").val();
$.ajax({
type: "POST",
url: "cuenta.jsp",
data: "texto=" + texto,
beforeSend: function(){
   $("#carga").show("slow");
},
success: function(msg){
$("#carga").hide("slow",function(){
$("span#resultado").text(msg);
});
},
error: function(xml, msg){
$("span#resultado").text("Error");
}
});
});
});
</script>

Con ese script hará lo que necesitas, saludos!

PD: No uses colores para el código, para poder leerlo bien

satjaen · #3 (**permalink**) 24/02/2013, 13:30

Podrías por favor poner el código terminado si lo has resuelto?
Un saludo

satjaen · #4 (**permalink**) 24/02/2013, 14:03

A ver si te vale este ejemplo:

Código PHP:

  <html>
<head>
<title>Untitled</title>
<style>
#loading_oculto{
z-index:99;
position:absolute;
top:50%;
left:50%;
margin-left:-117px;
margin-top:-117px;
visibility:hidden;
}

</style>
</head>

<body>
<form action="" id="ss" name="ss" method="post">
Nombre:<input type="text" name="e" /><br />
Apellidos:<input type="text" name="ww" />
<input type="submit" name="eeeee" value="Enviar" onclick="document.getElementById('loading_oculto').style.visibility='visible';" />
</form>
<div id="loading_oculto"><img src="imagenes/ajax-loader.gif" /></div>

</body>
</html>

Saludos