Cargar datos via ajax/jquery según dato.

martuanez · #1 (**permalink**) 07/02/2010, 14:08

Que tal, mi problema radica en que tengo un input text con un submit al hacer click en el submit tendría que mostrarme los datos de un socio(el cual ingrese en el input text), si lo hago sin ajax funciona

, toma los datos de la base de datos y me los devuelve, pero al momento de trabajar con jquery no me funciona...

he aquí el codigo:

Código HTML:

<body>
<form id="form1" name="form1" method="post" action="carga_socio.php">
  <label>Id_socio
    <input type="text" name="socio" id="socio" />
  </label> <label class="error" for="socio" id="socio_error">No ha ingresado un socio.</label>
  <label>
    <input type="submit" name="button" id="button" value="Enviar" />
  </label>
</form>
<div id="resultado"></div>
 <script type="text/javascript">
 $(document).ready(function(){
         $('#button').submit(function() {
			event.preventDefault();
           $.load('carga_socio.php', function(respuesta) {
               $('#resultado').html(respuesta);
				return false;
            });
        });});
   </script>
</body>

mayid · #2 (**permalink**) 07/02/2010, 14:37

Yo utilizo un plugin para manejar formularios ajax. Es simple. Ej:

Cita:

$(document).ready(function() {

$('#myForm').ajaxForm(function(respuesta) {
alert("funcionó! La respuesta es:"+respuesta);
});

En cuanto a tu funcion, no anda porque no estas pasando valores a PHP (.load sirve para recibir). Yo la vería así:

Cita:

$('#button').click(function() {

$.ajax({
type: "POST",
url: "carga_socio.php",
success: function(respuesta) {

$('#resultado').html(respuesta);

}
});
return false;

})

Usando POST o GET segun conveniencia.

nota: quizas con .load puedas pasar variables GET encadenandolas con ?

martuanez · #3 (**permalink**) 07/02/2010, 14:58

Me toma el php pero no me toma la variable (ERROR: de Undefined Index) , o sea me aparece el mensaje de error en la misma página, lo curioso es que sin jquery lo toma bien...

mayid · #4 (**permalink**) 07/02/2010, 15:08

Ah, ok. Pero como estás enviando informacion del formulario a PHP? Es con el evento .submit()? Yo no se porque la verdad no uso ese evento. Contame.

Que es "la variable (ERROR: de Undefined Index)"?

martuanez · #5 (**permalink**) 07/02/2010, 15:11

Yo le envio el id de socio por medio del input text, al darle click al submit esta llama al archivo php que hace un select basado en el id ingresado y me lo devuelve en pantalla con datos del socio al que le corresponde ese id

mayid · #6 (**permalink**) 07/02/2010, 15:17

Por lo que leí, prevent default cancela el envio de datos.

La llamada "real" al archivo PHP se esta haciendo con .load

Cita:

$.load('carga_socio.php', function(respuesta) {
$('#resultado').html(respuesta);
return false;
});

Esto es lo que entendí leyendo la API de jquery. Pero .load no envia data. Según dicen ahí, tendrías que usar esto para retomar el envío:

Cita:

$('#form1').submit();

Pero ya todo es medio confuso. Yo usaría el evento click que te comenté en vez de .submit()

Fijate a ver si está bien lo que digo.

martuanez · #7 (**permalink**) 07/02/2010, 15:26

Estoy usando el post:

Código HTML:

$(document).ready(function(){
	$('#button').click(function() {
		$.ajax({ 
		type: "POST", 
		url: "carga_socio.php", 
		success: function(respuesta) { 
		$('#resultado').html(respuesta);

	} 
		}); 
		return false;
	}); 
});

pero no me toma el dato que le mando...

Cita:

Notice: Undefined index: socio in C:\wamp\www\PRUEBAS\cargar_socio\carga_socio.php on line 14

sin jquery lo toma, con jquery no... probé con data:"algo" y con $(this).serialize, pero no sé si lo estoy haciendo bien...

martuanez · #8 (**permalink**) 07/02/2010, 15:33

Este script me funcionó:

Código HTML:

$(document).ready(function(){
	$('#button').click(function() {
		$.ajax({ 
		type: "POST", 
		url: "carga_socio.php", 
		data:$("#form1").serialize(),
		success: function(respuesta) { 
		$('#resultado').html(respuesta);

	} 
		}); 
		return false;
	}); 
});

Muchas gracias, por tu ayuda!!!

mayid · #9 (**permalink**) 07/02/2010, 15:45

Buenisimo.

Para que sirve esto?:

Cita:

data:$("#form1").serialize(),

martuanez · #10 (**permalink**) 07/02/2010, 15:50

toma los datos del formulario o del "id=#" que se elija para uso posterior, en este caso para enviar con el post elegí el id del form porque así estaba en el ejemplo de jquery, pero podría haber tomado el id del cuadro de texto ya que es el único valor que se envía te dejo el vínculo a la página de Jquery:

http://api.jquery.com/serialize/