Hola a todos.
Estoy utilizando la función load de jquery para hacer una petición asincronica como ajax.
La uso en un pequeño ejemplo que se puede adaptar a varias situaciones. el ejemplo hace la petición a un archivo php. El problema que tengo es que al hacer uso por primera vez el formulario que hace la petición se queda sin hacer nada. Pero al llenar datos en el formulario por segunda vez funciona todo bien.
No se si estoy haciendo algo mal o que pasa.
Les agradecería su ayuda.
Este es el codigo donde esta el formulario, los estilos, la llamada al archivo jquery.js que la pueden cambiar y el script que utiliza el jquery.
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Formulario</title>
<script type="text/javascript" language="javascript" src="../jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#btEnviar").click(function(){
$("#cargando").css("display", "inline");
var myAleatorio = parseInt(Math.random()*999999999);
$("#destino").load("mostrar-datos.php?txtNombre=" + $("#txtNombre").val()+"&txtApellidos=" + $("#txtApellidos").val() + "&txtTelefono=" + $("#txtTelefono").val() + "&txtSexo=" + $("#txtSexo").val()+ "&txtEdad=" + $("#txtEdad").val() + "&ale="+myAleatorio, function(){
$("#cargando").css("display", "none");
});
$('#formulario').each (function(){
this.reset();
});
});
});
</script>
<style type="text/css">
body{
background-color:#444;
color:#FFF;
}
h2{
text-align:center;
font-family:Verdana, Geneva, sans-serif;
font-size:28px;
}
.contiene-formulario{
width:500px;
background-color:#222;
color:#FFF;
border-radius:8px;
margin:auto;
font-size:22px;
}
.formulario{
margin-left:10px;
margin-right:10px;
}
.boton{
border-radius:8px;
font-size:18px;
background-color:#444;
color:#FFF;
}
.cargando{
display:none;
}
.nofloat{
clear:both;
}
.destino{
width:500px;
background-color:#222;
color:#FFF;
border-radius:8px;
margin:auto;
font-size:22px;
margin-top:25px;
}
.destino p{
margin-left:10px;
}
</style>
</head>
<body>
<h2>Envio de datos mediante jquery y la funcion load</h2>
<div class="contiene-formulario"><br />
<form id="formulario" name="formulario" class="formulario" method="get" action="">
<fieldset><legend>Datos para el registro:</legend>
<table width="85%" align="center">
<tr>
<td width="30%">Nombre:</td>
<td width="70%"><input type="text" name="txtNombre" id="txtNombre" /></td>
</tr>
<tr>
<td>Apellidos:</td>
<td><input type="text" name="txtApellidos" id="txtApellidos" /></td>
</tr>
<tr>
<td>Telefono:</td>
<td><input type="text" name="txtTelefono" id="txtTelefono" /></td>
</tr>
<tr>
<td>Sexo:</td>
<td>
<select name="txtSexo" id="txtSexo">
<option>Masculino</option>
<option>Femenino</option>
</select></td>
</tr>
<tr>
<td>Edad:</td>
<td>
<select name="txtEdad" id="txtEdad">
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
</select>
</td>
</tr>
<tr>
<td align="right"><input type="button" name="btEnviar" id="btEnviar" class="boton" value="Enviar" /></td>
<td align="right"><div class="cargando" id="cargando"><img src="http://s13.postimage.org/55b1f5hqf/loading2.gif" alt="load" /></div></td>
</tr>
</table></fieldset><br />
</form>
</div>
<div class="nofloat"></div>
<div class="destino" id="destino"></div>
</body>
</html>
Y este es el código del archivo mostrar-datos.php
Código PHP:
<?php
sleep(1);
if($_GET)
{
$nombre = $_GET["txtNombre"];
$apellidos = $_GET["txtApellidos"];
$telefono = $_GET["txtTelefono"];
$sexo = $_GET["txtSexo"];
$edad = $_GET["txtEdad"];
echo "<p>";
echo $nombre." ".$apellidos." ".$telefono." ".$sexo." ".$edad;
echo "</p>";
}
?>
Utilizo la funcio sleep() de php para poder ver bien lo que pasa.